Pro Yearly is on sale from $80 to $50! »

Structuring a React.js App

Structuring a React.js App

This talked was presented on the 7 masters event.

4bf4e83b2a407bc85701f1579e201058?s=128

Mauricio Soares

April 02, 2016
Tweet

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!