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
260
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
小さな開発会社がWebサービスを作る理由
polidog
PRO
0
120
社内勉強会運営のコツ
senoo
6
1.1k
NLP2024 参加報告LT ~RAGの生成評価と懇親戦略~ / nlp2024_attendee_presentation_LT_masuda
taro_masuda
1
190
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
1.9k
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
9
2k
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
620
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
SREとその組織類型
tatsuo48
8
1.5k
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
1
2.9k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs (QCon London)
inesmontani
PRO
0
150
Algyan イベント振り返り
linyixian
0
180
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
1
310
Featured
See All Featured
The Cult of Friendly URLs
andyhume
73
5.7k
Typedesign – Prime Four
hannesfritz
36
2k
In The Pink: A Labor of Love
frogandcode
137
21k
Building Adaptive Systems
keathley
29
1.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
75
41k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
The Invisible Customer
myddelton
114
12k
Become a Pro
speakerdeck
PRO
9
4.5k
Designing for Performance
lara
601
67k
Optimizing for Happiness
mojombo
369
69k
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!