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
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
380
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.4k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
760
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
SODA - FACT BOOK(JP)
sodainc
1
8.5k
チームの境界をブチ抜いていけ
tokai235
0
200
Six and a half ridiculous things to do with Quarkus
hollycummins
0
190
理論と実務のギャップを超える
eycjur
0
170
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
120
Devoxx BE - Local Development in the AI Era
kdubois
0
130
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
450
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
What's in a price? How to price your products and services
michaelherold
246
12k
Building Adaptive Systems
keathley
44
2.8k
Designing for Performance
lara
610
69k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Unsuck your backbone
ammeep
671
58k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Building Applications with DynamoDB
mza
96
6.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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?