Advanced
React
Patterns

@selbekk

today

  • 4 patterns

  • Quick introduction

  • Tasks!

  • Quick summary

today

  • Implicit props via React.cloneElement

  • Higher order components

  • Render props
  • Context

github

github.com/selbekk/react-workshop

Implicit props

Implicit props

React.cloneElement(
  element, 
  { extra: 'props', to: 'apply' },
  children,
);

Implicit props

React.Children.map(
  props.children, 
  child => cloneElement(
    child, 
    { extra: 'props', to: 'apply' },
  ),
);

implicit props

Tasks!

github.com/selbekk/react-workshop

Higher order components

Higher order components

const withHOC = (TargetComponent) => {
  return (props) => (
    <TargetComponent {...props} />
  );
};

Higher order components

const withHOC = (TargetComponent) => {
  class WrapperComponent extends Component {
    render() {
      return (
        <TargetComponent {...this.props} />
      );
    }
  };
  return WrapperComponent;
};

HIGHER ORDER COMPONENTS

Tasks!

github.com/selbekk/react-workshop

Render props

Render props

<Cheers
  render={(sayCheers) => (
    <button onClick={sayCheers}>
      šŸŗ Cheers!
    </button>
  )}
/>

Render props

const Cheers = props => {
  const sayCheers = alert('Cheers!');
  return props.render(sayCheers);
};

Render props

<Cheers
  render={(sayCheers) => (
    <button onClick={sayCheers}>
      šŸŗ Cheers!
    </button>
  )}
/>

Render props

<Cheers
  children={(sayCheers) => (
    <button onClick={sayCheers}>
      šŸŗ Cheers!
    </button>
  )}
/>

Render props

<Cheers>
  {(sayCheers) => (
    <button onClick={sayCheers}>
      šŸŗ Cheers!
    </button>
  )}
</Cheers>

Render props

Tasks!

github.com/selbekk/react-workshop

CONTExt

CONTExt

const MyContext = React.createContext('default');

CONTExt

const MyContext = React.createContext(42);

CONTExt

const MyContext = React.createContext({
  myValue: 'some value',
  updateValue: f => f,
});

CONTExt

const { 
  Provider, 
  Consumer,
} = React.createContext('default');

CONTExt

const SmileyContext = React.createContext('šŸ˜Ž');

class SmileyProvider extends Component {
  state =Ā { smiley: 'šŸ˜Ž' };
  render() {
    return (
      <SmileyContext.Provider 
        value={this.state.smiley}
      >
        {props.children}
      </SmileyContext.Provider>
    );
  }
}

CONTExt

const SmileyContext = React.createContext('šŸ˜Ž');
const SmileyProvider = ...;

const App = () => (
  <SmileyProvider>
    <LotsOfOtherComponents>
      <SmileyContext.Consumer>
        (smiley => (
          <span>My smiley is {smiley}</span>
        )}
      </SmileyContext.Consumer>
    </LotsOfOtherComponents>
  </SmileyProvider>
);

CONTExt

const SmileyContext = React.createContext('šŸ˜Ž');
const SmileyProvider = ...;

const withSmiley = (TargetComponent) => {
  return (props) => (
    <SmileyContext.Consumer>
      {smiley => (
        <TargetComponent 
          {...props} 
          smiley={smiley} 
        />
      )}
    </SmileyContext.Consumer>
  );
};

const App = () => (
  <SmileyProvider>
    <LotsOfOtherComponents>
      <SmileyContext.Consumer>
        (smiley => (
          <span>My smiley is {smiley}</span>
        )}
      </SmileyContext.Consumer>
    </LotsOfOtherComponents>
  </SmileyProvider>
);

Context

Tasks!

github.com/selbekk/react-workshop

</workshop>

Advanced React Patterns

By Kristofer Giltvedt Selbekk

Made with Slides.com

Advanced React Patterns

  • 241

More from Kristofer Giltvedt Selbekk