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
630
The Dos and Don'ts of CBRA
acconrad
0
70
A-Frame and You
acconrad
0
40
UX and Performance
acconrad
0
58
SX - Startup Experience
acconrad
0
65
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
76
25k
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
技術同人誌をMCP Serverにしてみた
74th
1
630
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
510
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
生成AI時代のコンポーネントライブラリの作り方
touyou
1
170
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
990
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
11
3k
Hack Claude Code with Claude Code
choplin
3
890
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
160
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
4.7k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
GraphQLとの向き合い方2022年版
quramy
49
14k
BBQ
matthewcrist
89
9.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Why Our Code Smells
bkeepers
PRO
337
57k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Designing Experiences People Love
moore
142
24k
How to Ace a Technical Interview
jacobian
277
23k
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?