Structuring a React.js App

This talked was presented on the 7 masters event.

Transcript

1. Structuring a React.js App
2. Mauricio Soares Software Developer @ Loggi @omauriciosoares gh/mauriciosoares
3. Default Pattern ʮʒʒ actions ʮʒʒ components ʮʒʒ containers ʮʒʒ index.js ʦʒʒ reducers
4. Works very well for small projects But still there’s a problem…
5. Too many components ʮʒʒ actions ʮʒʒ components ʔ ʦʒʒ … 30 files ʮʒʒ containers ʔ ʦʒʒ … 15 files ʮʒʒ index.js ʦʒʒ reducers
6. A Solution Not the silver bullet
7. ʮʒʒ actions ʮʒʒ index.js ʮʒʒ reducers ʮʒʒ screens ʦʒʒ shared
8. Actions and Reducers basically keeps the same
9. ʮʒʒ actions ʮʒʒ index.js ʮʒʒ reducers ʮʒʒ screens ʦʒʒ shared shared is everything that can be used within your application (utils / components / routes / constants)
10. ʮʒʒ actions ʮʒʒ index.js ʮʒʒ reducers ʮʒʒ screens ʦʒʒ shared Screens are components that have a great responsability on your application (usually containers)
13. ʦʒʒ screens ʮʒʒ header ʔ ʦʒʒ index.js ʮʒʒ map ʔ ʦʒʒ index.js ʮʒʒ order ʔ ʦʒʒ index.js ʦʒʒ sidebar ʔ ʦʒʒ index.js
15. ʦʒʒ screens ʦʒʒ order ʦʒʒ screens ʮʒʒ form ʔ ʦʒʒ index.js ʦʒʒ summary ʦʒʒ index.js Screens may have inner screens
16. ʦʒʒ screens ʦʒʒ order ʮʒʒ screens ʔ ʮʒʒ form ʔ ʔ ʦʒʒ index.js ʔ ʦʒʒ summary ʔ ʦʒʒ index.js ʦʒʒ shared ʦʒʒ components ʦʒʒ select ʦʒʒ index.js Screens may have a shared folder
17. If a file is shared among other root screens, it goes to the root shared folder
18. ʦʒʒ screens ʦʒʒ order ʦʒʒ shared ʦʒʒ components ʦʒʒ select ʮʒʒ __tests__ ʦʒʒ index.js Tests files belongs to it’s context
19. ʦʒʒ screens ʦʒʒ order ʦʒʒ shared ʦʒʒ components ʦʒʒ select ʮʒʒ __tests__ ʮʒʒ index.css ʦʒʒ index.js CSS files belongs to it’s context as well (thank God webpack!)
20. inner folders === path hell
21. import CoreComponent from '../../../../../../../shared/components/core-component'
22. web builders for the rescue! webpack: https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories grunt: https://github.com/jmreidy/grunt-browserify#alias
23. import CoreComponent from 'shared/components/core-component';
24. Thanks!