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
170
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
170
The how and why of flexible React components
jenncreighton
7
4.2k
React 16, the future & you
jenncreighton
0
190
Other Decks in Technology
See All in Technology
Platform Engineering for Private Cloud
cote
PRO
1
170
GrafanaをClaude DesktopからMCPで触ってみた
hamadakoji
0
1.3k
ワールドカフェ再び、そしてロール・ツール群の開発 / World Café Again, and the Development of a Suite of Roles and Tools
ks91
PRO
0
110
やめシフ大集合!!~SHIFT卒業生座談会~ / 20250517 Hiroko Tamagawa & Ayako Ueno & Ryo Asou &Kei Ishimaru
shift_evolve
0
210
Microsoft Fabric のライセンスについて
ryomaru0825
2
3.5k
4社統合におけるマスタデータ管理に立ち向かう / Towards master data management in the four-company integration
carta_engineering
0
360
4月15日の AZ 障害をテクサポの中の人目線で振り返ってみる
kazzpapa3
3
190
【iOSエンジニア特集】 iOSアプリ開発の裏側 開発組織が向き合う課題とこれから - 株式会社カウシェ
akifumifukaya
0
350
Cloudflare Use Cases at CADDi
minato128
2
340
Kent Beckの思想と学びの道筋 / 20250517 Ryutaro Yoshiba & Hiromitsu Akiba
shift_evolve
1
250
AI駆動時代の新規事業の作り方
ryohysk
2
120
MagicPodが描くAIエージェント戦略とソフトウェアテストの未来
magicpod
0
340
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Scaling GitHub
holman
459
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why Our Code Smells
bkeepers
PRO
336
57k
Designing for humans not robots
tammielis
253
25k
Producing Creativity
orderedlist
PRO
344
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
440
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.7k
RailsConf 2023
tenderlove
30
1.1k
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