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
99
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
170
Other Decks in Programming
See All in Programming
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
500
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.7k
document.write再考
brn
5
2.5k
Ruby製社内ツールのGo移行
bgpat
2
260
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
170
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
24
7.3k
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
2.5k
Dockerで始めるAWS Lambda開発
stutkhd0709
13
2.5k
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
490
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
18
11k
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Documentation Writing (for coders)
carmenintech
59
3.8k
A Tale of Four Properties
chriscoyier
150
22k
Infographics Made Easy
chrislema
237
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Building an army of robots
kneath
300
41k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Faster Mobile Websites
deanohume
296
30k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Web development in the modern age
philhawksworth
201
10k
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