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
280
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.4k
Other Decks in Technology
See All in Technology
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
240
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
360
AI導入の理想と現実~コストと浸透〜
oprstchn
0
150
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
500
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
300
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
190
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
590
rubygem開発で鍛える設計力
joker1007
2
270
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Optimising Largest Contentful Paint
csswizardry
37
3.3k
It's Worth the Effort
3n
185
28k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Become a Pro
speakerdeck
PRO
28
5.4k
Unsuck your backbone
ammeep
671
58k
Optimizing for Happiness
mojombo
379
70k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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!