The How and Why of Flexible React Components

Slide 1

THE HOW AND WHY The how and why of flexible OF FLEXIBLE REACT React components COMPONENTS

Slide 2

Hi! I’m Jenn. Senior Frontend Engineer, ClassPass @gurlcode

Slide 3

@gurlcode

Slide 4

flexible @gurlcode

Slide 5

@gurlcode

Slide 6

@gurlcode

Slide 7

with Tooltip withTooltip @gurlcode

Slide 8

withDot with Dot with Tooltip withTooltip @gurlcode

Slide 9

with Modal withModal withDot with Dot with Tooltip withTooltip @gurlcode

Slide 10

<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

Slide 11

@gurlcode

Slide 12

@gurlcode

Slide 13

You have another reservation at this time. @gurlcode

Slide 14

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

Slide 15

Slide 16

@gurlcode

Slide 17

reusable !== flexible @gurlcode

Slide 18

Flexibility is about more than reusability. It’s about the ability understand and augment. @gurlcode

Slide 19

@gurlcode

Slide 20

@gurlcode

Slide 21

<ScheduleCta type={?} /> @gurlcode

Slide 22

@gurlcode

Slide 23

@gurlcode

Slide 24

@gurlcode

Slide 25

@gurlcode

Slide 26

Keep business logic out of your components. @gurlcode

Slide 27

@gurlcode

Slide 28

Centralized logic is easier to reason about @gurlcode

Slide 29

Test the component separate from the logic @gurlcode

Slide 30

@gurlcode

Slide 31

<ScheduleCta type={?} /> @gurlcode

Slide 32

@gurlcode

Slide 33

@gurlcode

Slide 34

@gurlcode

Slide 35

@gurlcode

Slide 36

Slide 37

Slide 38

Slide 39

@gurlcode

Slide 40

@gurlcode

Slide 41

Slide 42

@gurlcode

Slide 43

@gurlcode

Slide 44

@gurlcode

Slide 45

@gurlcode

Slide 46

<ScheduleCta type={?} /> @gurlcode

Slide 47

components[type] @gurlcode

Slide 48

components = { reserve: ReserveCta, join: JoinCta, cancel: CancelCta, disable: DisableCta, reactivate: ReactivateCta } @gurlcode

Slide 49

const Component = components[type]; @gurlcode

Slide 50

const Component =${left || right}Sidebar; @gurlcode

Slide 51

const Component = props.isCard ? ( <Card> <Content /> </Card> ) : (<Content />); @gurlcode

Slide 52

@gurlcode

Slide 53

@gurlcode

Slide 54

@gurlcode

Slide 55

@gurlcode

Slide 56

@gurlcode

Slide 57

Slide 58

@gurlcode

Slide 59

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

Slide 60

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

Slide 61

Hmm… @gurlcode

Slide 62

Render Props* *children as a function @gurlcode

Slide 63

… so what if children were a function? @gurlcode

Slide 64

@gurlcode

Slide 65

?? ? ? ? ? ? ?? ? ? ? ? ? ?? ? ? ? ?? ? ? ? ? ? ? ? ? ?? @gurlcode

Slide 66

@gurlcode

Slide 67

@gurlcode

Slide 68

@gurlcode

Slide 69

@gurlcode

Slide 70

@gurlcode

Slide 71

@gurlcode

Slide 72

Render Props === state delegate children function === UI handler @gurlcode

Slide 73

https://reactjs.org/docs/render-props.html https://github.com/paypal/downshift @gurlcode

Slide 74

@gurlcode

Slide 75

you === flexible @gurlcode

Slide 76

@gurlcode

Slide 77

Know your traps. @gurlcode

Slide 78

Kill your darlings. @gurlcode

Slide 79

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

Slide 80

Thank you! Content by Jenn Creighton Illustrations by Janny Ji (jannyji.com) @gurlcode