A collection of patterns and practices that help you build better React components
Follow these codesandboxes for the workshop:
In this first part we will go through some basic patterns that can be applied on regular React components to make them more readable and to allow you to write less code for the same result.
As a bonus, we will have a quick look at the difference between stateless components and the PureComponent class from React. Sandbox link.
Now we will tackle various patterns of passing props from one component to another. As applications grow, so does the need of passing values between multiple level of components.
Now it's time to look at some patterns aimed at ensuring we have code and functionality reusability across an entire app as well as making communication between components in different parts of the application easier.
- Higher Order Components - Sandbox link
- Render Props - Sandbox link
- React Context - Sandbox link
- BONUS - React Hooks - Sandbox link
At the end of the workshop, it's time to put everything we learned to practice. HOCs, RenderProps, React Context and all the rest, bundled into a single task, of implementing your own state management system.
We'll start from this sandbox and we will have to:
- Implement a simple store object (nothing fancy)
- Provide the store reference to all the React components via React Context
- Create a connect HOC which can consume the store
- Implement a couple of connect calls with their corresponding mapStateToProps, mapDispatchToProps.
Final solution: https://codesandbox.io/s/k00l3zovqo