kentcdodds/advanced-react-patterns

This is the latest advanced react patterns workshop. The compound components idea I just used in a 'Conditional Progress List' pattern.

Summary

kentcdodds/advanced-react-patterns is a JavaScript workshop codebase that pairs with the EpicReact.dev course of the same name, focused on building flexible React components and hooks. It is organized as numbered exercises with reference solutions and Jest tests, rather than as a library to install. Engineers use it by cloning, running the setup script, and working through the exercises alongside the recorded material.

What it is useful for

The repository is useful for React engineers who already build component abstractions and want a structured way to compare patterns. Each exercise in src/exercise/ introduces a problem; src/final/ holds the instructor's reference solution; and src/__tests__/ provides Jest tests. The exercises rely on a consistent set of emoji markers in the source files, such as 🐨 for instructions, 💰 for tips, and 💯 for extra credit.

A stated prerequisite is familiarity with the concept of "Inversion of Control," which the README links to a blog post and screencast. The workshop is best treated as a companion to the EpicReact.dev videos rather than a standalone reading list, since the README notes the goal is to help readers formulate the right questions while the instructor walks through the material. The README also flags that the EpicReact.dev videos were recorded against React ^16.13 and that the repo has been updated to React ^18, with relevant differences called out in the instructions.

How engineers can use it

The README offers three documented ways to get started:

1. Cloud environments: badges in the README launch the repo in Gitpod, CodeSandbox, or GitHub Codespaces.
2. Local setup: requires git v2.13+, NodeJS >=16, and npm v8.16+. After cloning, run:

   git clone https://github.com/kentcdodds/advanced-react-patterns.git
   cd advanced-react-patterns
   node setup
   

3. Manual install: if node setup fails, the fallback is npm install followed by npm run validate. A docker-compose up option is also documented for users with Docker.

To see the work in progress, run npm start (a standard react-scripts application) and use npm test to launch Jest in watch mode. A live deployment of the demo app is also linked from the README (Netlify) for a quick preview without cloning.

Two limitations to keep in mind. First, the GitHub license field shows NOASSERTION, so licensing terms are not clearly declared in the repo and should be confirmed before reusing the code. Second, the README explicitly warns that the tests are not a complete authority, since an alternative correct implementation can still fail the included assertions.