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 Component?
Search
Adam Conrad
March 26, 2019
Programming
0
140
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
530
The Dos and Don'ts of CBRA
acconrad
0
61
A-Frame and You
acconrad
0
32
UX and Performance
acconrad
0
47
SX - Startup Experience
acconrad
0
49
Other Decks in Programming
See All in Programming
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Product Management LT会_クアンド新家
shinshin
0
210
Introduction to GitOps
hwchiu
0
110
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
CSC307 Lecture 05
javiergs
PRO
0
210
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
CSC307 Lecture 12
javiergs
PRO
0
220
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
46
7k
Building Applications with DynamoDB
mza
89
5.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Happy Clients
brianwarren
94
6.5k
Facilitating Awesome Meetings
lara
46
5.8k
What's in a price? How to price your products and services
michaelherold
239
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
RailsConf 2023
tenderlove
16
720
How to name files
jennybc
67
96k
Bash Introduction
62gerente
607
210k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
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?