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

… and check why 5600+ Rails engineers read also this

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_init.js.coffee
--- app_directory
    --- app.module.js.coffee
    --- backend.module.js.coffee
    --- components
        --- component_file1.module.js.coffee
        ...
    --- domain.module.js.coffee
    --- glue.module.js.coffee

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 ->
  window.app = new App(@)
  window.app.start()

  • 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

You might also like