Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Structuring a React.js App
Search
Mauricio Soares
April 02, 2016
Technology
2
270
Structuring a React.js App
This talked was presented on the 7 masters event.
Mauricio Soares
April 02, 2016
Tweet
Share
More Decks by Mauricio Soares
See All by Mauricio Soares
Javascript para adultos
mauriciosoares
28
3.3k
Other Decks in Technology
See All in Technology
タイミーのレコメンドにおける ABテストの運用
ozeshun
1
140
リアルお遍路+SORACOM IoT
ozk009
1
140
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
4
1.3k
Next.js のページ遷移を全力で止める
ypresto
7
3.3k
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
220
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
実務における脅威モデリングを考えよう
nikinusu
0
630
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
210
グイグイ系QAマネージャーの仕事
sadonosake
0
340
Mocking in Rust Applications
taiki45
2
410
「認証認可」という体験をデザインする ~Nekko Cloud認証認可基盤計画
logica0419
2
440
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
325
38k
For a Future-Friendly Web
brad_frost
174
9.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Become a Pro
speakerdeck
PRO
22
4.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
BBQ
matthewcrist
83
9.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Debugging Ruby Performance
tmm1
72
12k
Done Done
chrislema
180
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
GraphQLとの向き合い方2022年版
quramy
43
13k
Transcript
Structuring a React.js App
Mauricio Soares Software Developer @ Loggi @omauriciosoares gh/mauriciosoares
Default Pattern ʮʒʒ actions ʮʒʒ components ʮʒʒ containers ʮʒʒ index.js
ʦʒʒ reducers
Works very well for small projects But still there’s a
problem…
Too many components ʮʒʒ actions ʮʒʒ components ʔ ʦʒʒ …
30 files ʮʒʒ containers ʔ ʦʒʒ … 15 files ʮʒʒ index.js ʦʒʒ reducers
A Solution Not the silver bullet
ʮʒʒ actions ʮʒʒ index.js ʮʒʒ reducers ʮʒʒ screens ʦʒʒ shared
Actions and Reducers basically keeps the same
ʮʒʒ actions ʮʒʒ index.js ʮʒʒ reducers ʮʒʒ screens ʦʒʒ shared
shared is everything that can be used within your application (utils / components / routes / constants)
ʮʒʒ actions ʮʒʒ index.js ʮʒʒ reducers ʮʒʒ screens ʦʒʒ shared
Screens are components that have a great responsability on your application (usually containers)
None
None
ʦʒʒ screens ʮʒʒ header ʔ ʦʒʒ index.js ʮʒʒ map ʔ
ʦʒʒ index.js ʮʒʒ order ʔ ʦʒʒ index.js ʦʒʒ sidebar ʔ ʦʒʒ index.js
None
ʦʒʒ screens ʦʒʒ order ʦʒʒ screens ʮʒʒ form ʔ ʦʒʒ
index.js ʦʒʒ summary ʦʒʒ index.js Screens may have inner screens
ʦʒʒ screens ʦʒʒ order ʮʒʒ screens ʔ ʮʒʒ form ʔ
ʔ ʦʒʒ index.js ʔ ʦʒʒ summary ʔ ʦʒʒ index.js ʦʒʒ shared ʦʒʒ components ʦʒʒ select ʦʒʒ index.js Screens may have a shared folder
If a file is shared among other root screens, it
goes to the root shared folder
ʦʒʒ screens ʦʒʒ order ʦʒʒ shared ʦʒʒ components ʦʒʒ select
ʮʒʒ __tests__ ʦʒʒ index.js Tests files belongs to it’s context
ʦʒʒ screens ʦʒʒ order ʦʒʒ shared ʦʒʒ components ʦʒʒ select
ʮʒʒ __tests__ ʮʒʒ index.css ʦʒʒ index.js CSS files belongs to it’s context as well (thank God webpack!)
inner folders === path hell
import CoreComponent from '../../../../../../../shared/components/core-component'
web builders for the rescue! webpack: https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories grunt: https://github.com/jmreidy/grunt-browserify#alias
import CoreComponent from 'shared/components/core-component';
Thanks!