React JS Patterns

Chris Laughlin

Patterns

• Basic Render
• Compound Components
• Render Props
• Child as a function
• Prop Getter
• Higher Order Components 
• Context 

Basic Render

https://codesandbox.io/s/znn72m2xvm

Compound Components

https://codesandbox.io/s/q97kxk9kk9

Render Props

https://codesandbox.io/s/p76j9z8qxj

Child as a Function 

https://codesandbox.io/s/2wypv5mvw0

Prop Getters

https://codesandbox.io/s/k1n7k194o

Higher Order Components

https://codesandbox.io/s/zwky8yxp13

Context

https://codesandbox.io/s/r07n19m8jm

Extras 

Children as an Array

https://codesandbox.io/s/xvro2vwkmz

https://codesandbox.io/s/6wlvvvzk1k

Thanks 

Slides: https://slides.com/chrislaughlin/react-patterns