Skip to content

Latest commit

 

History

History
44 lines (31 loc) · 2.59 KB

README.md

File metadata and controls

44 lines (31 loc) · 2.59 KB

Curricula

A collection of patterns and practices that help you build better React components

Follow these codesandboxes for the workshop:

Component Design

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.

Sandbox link

As a bonus, we will have a quick look at the difference between stateless components and the PureComponent class from React. Sandbox link.

Having fun with Props

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.

Sandbox link

Composition and Reusability

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.

Final Exercise

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

References