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 05, 2018
Tweet

More Decks by Jenn Creighton

Other Decks in Technology

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? Join State

    of class? Reactivate Reserve Cancel Disabled Join yes no cancelled subscribed unsubscribed available unavailable reserved @gurlcode
  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