Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React's Lost Socks: Where Did I Put that Component?
Adam Conrad
March 26, 2019
Programming
0
130
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
280
The Dos and Don'ts of CBRA
acconrad
0
40
A-Frame and You
acconrad
0
25
UX and Performance
acconrad
0
33
SX - Startup Experience
acconrad
0
38
Other Decks in Programming
See All in Programming
Cybozu GoogleI/O 2022 LT会 - Input for all screens
jaewgwon
0
270
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
120
GitHub Actions を導入した経緯
tamago3keran
1
420
IE Graduation Certificate
jxck
6
4.7k
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.6k
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
100
Chart実装が楽になりました。
keisukeyamagishi
0
110
ISUCON12 事前講習
rosylilly
3
4k
From Java through Scala to Clojure
lagenorhynque
0
150
Get Ready for Jakarta EE 10
ivargrimstad
0
1.7k
Airflowはすごいぞ!
hankehly
0
370
Jakarta EE 10 and Beyond
ivargrimstad
0
1.8k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
32
10k
Faster Mobile Websites
deanohume
294
28k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Typedesign – Prime Four
hannesfritz
33
1.3k
Building Applications with DynamoDB
mza
83
4.7k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
126
8.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
WebSockets: Embracing the real-time Web
robhawkes
57
5.1k
Documentation Writing (for coders)
carmenhchung
48
2.5k
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?