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 14, 2018
Programming
7
3.8k
The how and why of flexible React components
Jenn Creighton
October 14, 2018
Tweet
Share
More Decks by Jenn Creighton
See All by Jenn Creighton
Understanding Iterators & Iterables in JavaScript
jenncreighton
0
100
Everything I Know About React I Learned From Twitter
jenncreighton
0
1.1k
React 16, the future & you (December 4, 2018)
jenncreighton
1
150
The How and Why of Flexible React Components
jenncreighton
0
130
React 16, the future & you
jenncreighton
0
180
Other Decks in Programming
See All in Programming
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
340
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
Netty Chicago Java User Group 2024-04-17
sullis
0
140
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
240
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.9k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
490
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
Featured
See All Featured
A better future with KSS
kneath
231
16k
Building Applications with DynamoDB
mza
88
5.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
BBQ
matthewcrist
80
8.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
How STYLIGHT went responsive
nonsquared
92
4.8k
Become a Pro
speakerdeck
PRO
10
4.5k
Product Roadmaps are Hard
iamctodd
43
9.7k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
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? State of
class? yes unsubscribed subscribed available unavailable reserved cancelled no join reactivate reserve disable cancel join
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