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
620
The Dos and Don'ts of CBRA
acconrad
0
69
A-Frame and You
acconrad
0
37
UX and Performance
acconrad
0
54
SX - Startup Experience
acconrad
0
62
Other Decks in Programming
See All in Programming
生成AIで知るお願いの仕方の難しさ
ohmori_yusuke
1
120
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
430
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
140
オープンソースコントリビュート入門
_katsuma
0
130
「理解」を重視したAI活用開発
fast_doctor
0
310
CursorとDevinが仲間!?AI駆動で新規プロダクト開発に挑んだ3ヶ月を振り返る / A Story of New Product Development with Cursor and Devin
rkaga
3
920
Embracing Ruby magic
vinistock
2
250
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
ymbigo
14
6.4k
Road to Ruby for A Linguistics Nerd
hayat01sh1da
PRO
0
310
Serving TUIs over SSH with Go
caarlos0
0
710
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
590
Cursor/Devin全社導入の理想と現実
saitoryc
29
22k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
It's Worth the Effort
3n
184
28k
Thoughts on Productivity
jonyablonski
69
4.6k
Building Adaptive Systems
keathley
41
2.5k
A Tale of Four Properties
chriscoyier
159
23k
Into the Great Unknown - MozCon
thekraken
38
1.8k
Six Lessons from altMBA
skipperchong
28
3.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
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?