Production-Grade React Architecture Playbook
The architecture decisions senior React engineers make, with one page each for folder structure, components, state and data, testing, and performance and tooling. Most pages close with a takeaway that says what to avoid and what to prefer. Pin it next to your editor.
Get the playbook
What's inside
Every page, before you sign up.
All 6 pages of the PDF, shrunk down. The full-size file lands in your inbox.
p. 1
Structure your React app the way senior engineers do
How a senior engineer reads a codebase, six architect axioms and the stack baseline.
p. 2
Folder structure and module boundaries
An annotated feature-based tree, and when layered, feature-based or hybrid fits.
p. 3
Component architecture
Three axes for splitting a component, custom hooks, and composition over configuration.
p. 4
State and data fetching
A decision tree for where each piece of state lives, from server data and the URL to forms, shared and local state.
p. 5
Testing strategy
The shape of a healthy React test suite, what to test at each layer, and the stack.
p. 6
Performance, quality automation and the 10 rules
Performance fixes in the order to try them, then the 10 rules of senior React.
Who it's for
- React developers with an app or two behind them who want to know where things go, and why.
- Senior engineers who want one page to point at in code review.
If you're learning React from zero, start elsewhere. It's a reference for decisions and skips the basics.
When one PDF isn't enough
The playbook is the condensed companion. The book has 100+ tips, each with the code to avoid, the code to prefer and why.