A presentation at RuhrJS in in Bochum, Germany by Jenn Creighton
THE HOW AND WHY The how and why of flexible OF FLEXIBLE REACT React components COMPONENTS
Hi! I’m Jenn. Senior Frontend Engineer, ClassPass @gurlcode
@gurlcode
flexible @gurlcode
@gurlcode
@gurlcode
with Tooltip withTooltip @gurlcode
withDot with Dot with Tooltip withTooltip @gurlcode
with Modal withModal withDot with Dot with Tooltip withTooltip @gurlcode
<BlockComponent <BlockComponent className=“block block—md block—orange” className=“block block-md block—orange” withTooltip={false} message={message} withDot={false} withTooltip={false} withModal withModal modalProps={modalProps} modalProps={modalProps} userId={userId} onModalClose={onModalClose} userName={userName} withDot={false} onMouseOver={onMouseOver} experimentRunning experimentId={experimentId} withExperiment colorChange={false} experimentId={experimentId} showMessageOnLoad onModalClose={() => {}} userName={userName} hasRoundedCorners userId={userId} withAnalytics analyticsProps={analyticsProps} analyticsProps={analyticsProps} /> roundedCorners /> BEWARE THE APROPSCALYPSE @gurlcode
@gurlcode
@gurlcode
You have another reservation at this time. @gurlcode
Is the user logged in? yes no State of subscription? unsubscribed Join cancelled Reactivate subscribed Join State of class? available unavailable reserved Reserve Disabled Cancel @gurlcode
@gurlcode
reusable !== flexible @gurlcode
Flexibility is about more than reusability. It’s about the ability understand and augment. @gurlcode
@gurlcode
@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
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@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
@gurlcode
Decreased prop complexity Use whatever logic we want Use whatever logic we want Use individual CTAs alone Use&individual CTAswith alone Add remove CTAs ease 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
Here’s what was said about this presentation on social media.
for free. You
can too.