Slide 1

Slide 1 text

WAYS TO COMPOSE IN REACT JAKE TRENT

Slide 2

Slide 2 text

1. WRAP CHILDREN 2. SPECIAL CHILDREN 3. VALUES AS PROPS 4. COMPONENTS AS PROPS 5. OVERRIDE METHODS 6. HIGHER-ORDER COMPONENTS

Slide 3

Slide 3 text

Wrap Children - Hierarchy - Style

Slide 4

Slide 4 text

Special Children const SpecialChild = props =>

{props.specialness}

const Parent = props =>

{React.Children.map(props.children, child => child.type === SpecialChild ? React.cloneElement(child, { specialness: 'somethingFromParent' }) : child )}

- Nice APIs - Data sharing

Slide 5

Slide 5 text

Values as Props const GiveMeValues = props =>

{props.orGiveMe}

- Dynamic values

Slide 6

Slide 6 text

Components as Props const Title = _ =>

Composition!

const SubTitle = _ =>

Over Inheritance -- Literally div> const Header = props => {props.title} {props.subtitle} } subtitle={} /> - Dynamic UI - Component encapsulation

Slide 7

Slide 7 text

Override Methods const defaultHandleClick = _ => alert('common clicked') const Common = props => Click me const overrideHandleClick = _ => alert('specific click') const Specific = _ => - Dynamic functionality - Reuse common components

Slide 8

Slide 8 text

Higher-order components const OriginalComponent = props =>

Style me

const HigherOrder = newStyle => originalComponent => props => originalComponent({ ...props, style: { ...props.style, ...newStyle } }) const AlwaysRed = HigherOrder({ color: 'red' }) (OriginalComponent) - Share common functionality

Slide 9

Slide 9 text

THANK YOU