Structuring a React.js App

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)
11. None
12. None

13. ʦʒʒ screens ʮʒʒ header ʔ ʦʒʒ index.js ʮʒʒ map ʔ

    ʦʒʒ index.js ʮʒʒ order ʔ ʦʒʒ index.js ʦʒʒ sidebar ʔ ʦʒʒ index.js
14. None

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!