How we structure our front-end Rails apps with React.js

How we structure our front-end Rails apps with React.js

We’ve tried almost everything for our Rails frontends - typical Rails views, Backbone, Angular and others. What we settled with is React.js. In this post we’re showing you, how we structure a typical React.js app when it comes to the files structure.

Our file structure per a single mini-application:
--- app_directory
    --- components

app_init - we got one per each application. We always keep it simple:

#= require_tree ./app_directory

App = require('app_directory/app')

$('[data-app=appFromAppDirectory]').each -> = new App(@)
  • app - starting point of application. Here we initialize and start every component of application

  • backend - here we fetch and send data to backend. It is also a place, where we create domain objects

  • components - our React.js components we use to render an application.

  • domain - definitions of domain objects used in view. Example: immutable list of single entries (which are domain objects too).

  • glue - hexagonal.js glue

Further reading

Now, a plug 🔌. Join ARKADEMY.DEV and get access to our best courses: Rails Architect Masterclass, Anti-IF course, Blogging for busy programmers, Async Remote, TDD video class, Domain-Driven Rails video course and growing!

You might also like