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
Agile PBL at New Grads Trainings
kawaguti
PRO
1
420
Obsidian応用活用術
onikun94
2
490
20250913_JAWS_sysad_kobe
takuyay0ne
2
190
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
180
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
110
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
190
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A designer walks into a library…
pauljervisheath
207
24k
Building Adaptive Systems
keathley
43
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing for Performance
lara
610
69k
Typedesign – Prime Four
hannesfritz
42
2.8k
Designing for humans not robots
tammielis
253
25k
Code Review Best Practice
trishagee
70
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Raft: Consensus for Rubyists
vanstee
140
7.1k
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!