Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The how and why of flexible React components

The how and why of flexible React components

Jenn Creighton

October 14, 2018
Tweet

More Decks by Jenn Creighton

Other Decks in Programming

Transcript

  1. The how and why of flexible React components THE HOW

    AND WHY OF FLEXIBLE REACT COMPONENTS
  2. <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
  3. 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
  4. components = { reserve: ReserveCta, join: JoinCta, cancel: CancelCta, disable:

    DisableCta, reactivate: ReactivateCta } @gurlcode
  5. 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
  6. 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
  7. ? ? ? ? ? ? ? ? ? ?

    ? ? ? ? ? ?? ?? ?? ? ? ?? ? ? ? ? ?? @gurlcode
  8. 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