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
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
180
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
650
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.7k
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.2k
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
180
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
530
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
100
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
230
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
For a Future-Friendly Web
brad_frost
176
9.6k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Building Your Own Lightsaber
phodgson
104
6.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Unsuck your backbone
ammeep
669
57k
Docker and Python
trallard
44
3.3k
The Invisible Side of Design
smashingmag
299
50k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
BBQ
matthewcrist
87
9.5k
A designer walks into a library…
pauljervisheath
205
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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!