Structuring a React.js App

4bf4e83b2a407bc85701f1579e201058?s=47 Mauricio Soares
April 02, 2016
Technology
2
250

Structuring a React.js App

This talked was presented on the 7 masters event.

4bf4e83b2a407bc85701f1579e201058?s=128

Mauricio Soares

April 02, 2016
Tweet

More Decks by Mauricio Soares

See All by Mauricio Soares
4bf4e83b2a407bc85701f1579e201058?s=48 mauriciosoares
28
3.2k

Other Decks in Technology

See All in Technology
E8da8d13d06ca69dbe019ecad71ed2a4?s=48 vinaygaba
1
200
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
0
220
46fdd2ebc85d68659b83d5eb5c6a49aa?s=48 keisukeyamashita
2
330
69f5ab96892df4d8cbe32189f2ed2d9d?s=48 heyinc
2
2.9k
703c34db2db0e609fddec6a5585ceccc?s=48 kenta_sato3
0
170
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
140
53850955f15249a1a9dc49df6113e400?s=48 line_developers
1
150
C5e26822fb2aa64410b50eac63ef7d84?s=48 fill9120
1
210
20451295e0cb4dce2b2805b2a61cd92d?s=48 tnk4on
6
800
80c79a9d024d1e1a253893a78189ce6d?s=48 ujnak
1
110
75fd80a8ace6ab292a7de563e018ae11?s=48 takashi_toyosaki
0
140
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
2
230

Featured

See All Featured
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
270
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
606
53k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
323
14k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
113
6.8k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
50
3.9k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
224
8.2k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
55
5.1k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
420
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
93
5k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.6k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
648
110k

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!