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
React's Lost Socks: Where Did I Put that Compon...
Search
Adam Conrad
March 26, 2019
Programming
0
150
React's Lost Socks: Where Did I Put that Component?
This talk aims to add structure for production-ready React applications. Hopefully.
Adam Conrad
March 26, 2019
Tweet
Share
More Decks by Adam Conrad
See All by Adam Conrad
Code review in JavaScript
acconrad
0
650
The Dos and Don'ts of CBRA
acconrad
0
70
A-Frame and You
acconrad
0
41
UX and Performance
acconrad
0
58
SX - Startup Experience
acconrad
0
69
Other Decks in Programming
See All in Programming
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
230
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3k
CSC509 Lecture 04
javiergs
PRO
0
300
オープンソースソフトウェアへの解像度🔬
utam0k
12
2.5k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.5k
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.7k
CSC305 Lecture 03
javiergs
PRO
0
240
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
800
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
990
All About Angular's New Signal Forms
manfredsteyer
PRO
0
110
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
A Modern Web Designer's Workflow
chriscoyier
697
190k
How to Ace a Technical Interview
jacobian
280
24k
Being A Developer After 40
akosma
91
590k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Visualization
eitanlees
148
16k
Practical Orchestrator
shlominoach
190
11k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Transcript
React’s Lost Socks Where did I put that component?
None
None
(Everything in its right place)
Who in the h*ck are you??
@theadamconrad
Why are we here?
React deserves structure
None
None
None
Such segmentati on
Such segmentati on Lol wut tests
Such segmentati on Lol wut tests Are u too good
for ur home
Such segmentati on Lol wut tests Are u too good
for ur home
None
None
None
None
Some prereqs
Some prereqs
None
CCU Pattern
CCU Pattern MVC for the front-end
CCU Pattern MVC for the front-end Component
CCU Pattern MVC for the front-end Component => Model Container
CCU Pattern MVC for the front-end Component => Model Container
=> Controller Utility
CCU Pattern MVC for the front-end Component => Model Container
=> Controller Utility => View
None
Prereqs For real apps React (duh) Apollo & GraphQL React
Router Styled-components Formik Typescript (optional)
None
0. Set up routes
None
1. Add a page/route
None
None
2. Add a component
None
None
3. Add tests (you know you want to)
None
None
4. Component too big? Split it up
None
None
None
5. Component doing too much? Add a utility
None
None
None
6. Nested containers? Not a problem!
None
None
None
None
None
7. Writing data? We got that too!
None
None
None
None
None
8. App doing too much? Split it up!
None
9. THERE IS NO STEP NINE
None
In summary
In summary Touching data? CONTAINER
In summary Touching data? CONTAINER Passing data? COMPONENT
In summary Touching data? CONTAINER Passing data? COMPONENT Adding logic?
UTILITY
None
Kthnxbye. questions?