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
The How and Why of Flexible React Components
Search
Jenn Creighton
October 05, 2018
Technology
0
180
The How and Why of Flexible React Components
Jenn Creighton
October 05, 2018
Tweet
Share
More Decks by Jenn Creighton
See All by Jenn Creighton
Understanding Iterators & Iterables in JavaScript
jenncreighton
0
120
Everything I Know About React I Learned From Twitter
jenncreighton
0
1.1k
React 16, the future & you (December 4, 2018)
jenncreighton
1
180
The how and why of flexible React components
jenncreighton
7
4.3k
React 16, the future & you
jenncreighton
0
200
Other Decks in Technology
See All in Technology
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
450
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.8k
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
140
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
420
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
150
20250913_JAWS_sysad_kobe
takuyay0ne
2
230
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
180
人工衛星のファームウェアをRustで書く理由
koba789
15
8.1k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
690
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Pragmatic Product Professional
lauravandoore
36
6.9k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
The Language of Interfaces
destraynor
161
25k
Rails Girls Zürich Keynote
gr2m
95
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
For a Future-Friendly Web
brad_frost
180
9.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing for humans not robots
tammielis
253
25k
Transcript
The how and why of flexible React components THE HOW
AND WHY OF FLEXIBLE REACT COMPONENTS
Hi! I’m Jenn. Senior Frontend Engineer, ClassPass @gurlcode
@gurlcode
flexible @gurlcode
@gurlcode
@gurlcode
with Tooltip withTooltip @gurlcode
with Tooltip with Dot withTooltip withDot @gurlcode
with Tooltip with Dot with Modal withDot withModal withTooltip @gurlcode
<BlockComponent className=“block block-md block—orange” message={message} withTooltip={false} withModal modalProps={modalProps} userId={userId} userName={userName}
withDot={false} experimentRunning experimentId={experimentId} colorChange={false} showMessageOnLoad onModalClose={() => {}} hasRoundedCorners withAnalytics analyticsProps={analyticsProps} /> BEWARE THE APROPSCALYPSE <BlockComponent className=“block block—md block—orange” withTooltip={false} withDot={false} withModal modalProps={modalProps} onModalClose={onModalClose} onMouseOver={onMouseOver} withExperiment experimentId={experimentId} userName={userName} userId={userId} analyticsProps={analyticsProps} roundedCorners /> @gurlcode
@gurlcode
@gurlcode
You have another reservation at this time. @gurlcode
Is the user logged in? State of subscription? Join State
of class? Reactivate Reserve Cancel Disabled Join yes no cancelled subscribed unsubscribed available unavailable reserved @gurlcode
None
@gurlcode
reusable !== flexible @gurlcode
Flexibility is about more than reusability. It’s about the ability
understand and augment. @gurlcode
@gurlcode
@gurlcode
<ScheduleCta type={?} /> @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
Keep business logic out of your components. @gurlcode
@gurlcode
Centralized logic is easier to reason about @gurlcode
Test the component separate from the logic @gurlcode
@gurlcode
<ScheduleCta type={?} /> @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
None
None
None
@gurlcode
@gurlcode
None
@gurlcode
@gurlcode
@gurlcode
@gurlcode
<ScheduleCta type={?} /> @gurlcode
components[type] @gurlcode
components = { reserve: ReserveCta, join: JoinCta, cancel: CancelCta, disable:
DisableCta, reactivate: ReactivateCta } @gurlcode
const Component = components[type]; @gurlcode
const Component =`${left || right}Sidebar`; @gurlcode
const Component = props.isCard ? ( <Card> <Content /> </Card>
) : (<Content />); @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
<ScheduleCta type={?} className=“” />
@gurlcode
Decreased prop complexity Use whatever logic we want Use individual
CTAs alone Add & remove CTAs with ease Use whatever logic we want Use individual CTAs alone Add & remove CTAs with ease @gurlcode
CTAs added and removed for A/B tests Removing Disable CTA
on some pages Classnames changed Messaging changed for ReserveCta Ask for specific CTA on specific page @gurlcode
Hmm… @gurlcode
Render Props* *children as a function @gurlcode
… so what if children were a function? @gurlcode
@gurlcode
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ?? ?? ?? ? ? ?? ? ? ? ? ?? @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
Render Props === state delegate children function === UI handler
@gurlcode
https://reactjs.org/docs/render-props.html https://github.com/paypal/downshift @gurlcode
@gurlcode
you === flexible @gurlcode
@gurlcode
Know your traps. @gurlcode
Kill your darlings. @gurlcode
Start with the ideal API Let the API inform the
component design Decide what level of magic you want Business logic does not belong in components Render Props is awesome (use it!) Be flexible as an engineer (know your traps, kill your darlings) @gurlcode
Thank you! Content by Jenn Creighton Illustrations by Janny Ji
(jannyji.com) @gurlcode