How to Use This Tutorial
Welcome. This tutorial teaches you how React actually works, from first principles, with zero assumed internals knowledge. By the end, phrases like "reconciliation", "lanes", "hydration", and "suspended render" will be things you can explain to someone else, not things you nod along to.
What makes this different
- No source code required. Everything is taught as concepts and mental models with small pseudocode illustrations. You don't need to read React's source to understand React.
- Every example is complete. No mysterious fragments, you can type any example into a project and run it.
- Complex things are taught step by step. When React does something subtle, we walk through it numbered, one step at a time, often twice (broken version first, then the fix).
- Misconceptions get their own section. In every chapter, because knowing what something isn't is half of understanding it.
Your starting point
- Read 0.1, JavaScript you actually need. Even if you're experienced: the event-loop and
Object.issections are load-bearing for later chapters. - Then follow the parts in order, each chapter links to the next at the bottom.
The parts at a glance
| Part | Theme | The one question it answers |
|---|---|---|
| 1, Foundations | The mental model | What is React actually doing when it "renders"? |
| 2, The engine | The internal trees | How does React decide what changed? |
| 3, State & hooks | The hook machinery | Where does state live, and why do hooks have rules? |
| 4, Concurrency | The scheduler | How can React pause a render halfway through? |
| 5, Suspense & errors | Async UI | How does a component "wait" for data? |
| 6, React DOM | The browser layer | What really happens when you click? |
| 7, Server | SSR, hydration, RSC | What runs where, and in what order? |
| 8, Performance | Making it fast | When is React actually slow, and what fixes it? |
| 9, Advanced | The edge machinery | StrictMode, escape hatches, hidden trees, myths |
| 10, Consolidation | Locking it in | Glossary, cheatsheet, 40-question self-test |
Rules of engagement
- Do the "Try it yourself" experiments. They're small and each one states the expected outcome, verifying the model against reality is where the learning sticks.
- Don't skip the Recap sections. They're designed to be screenshot-worthy; collect them.
- If a chapter references an earlier concept you skipped, go back, the series is cumulative.
- Finish with the self-test. Score it honestly and re-read the parts your wrong answers point to.