Starting out
What React is, which build of it every panel here runs, and how to read the first error you get.
3 of 3 written
React, from zero
React 19 from the first component to a tested, server-rendered app, and every line of output on every page really ran.
Where this stands
36 of 36 lessons written. The bar on every card below is counted from the lesson files that exist, not from a number I typed. A lesson that is planned and unwritten says so on its own page too.
- Node v26.7.0, React 19.2.7, happy-dom 20.11.6, TypeScript 6.0.3
- 43 server panels, 115 DOM panels, 21 also run in the browser
- 8 terminal commands, 178 files shown
- 392 checks passed
- 17 raising panels, 3 names
- 29 warning panels, 25 distinct warnings
- 4 production panels
- 27 entries across 32 errors and warnings
- Starting out: 3 of 3 lessons written
- JSX: 4 of 4 lessons written
- State and events: 5 of 5 lessons written
- Effects and refs: 5 of 5 lessons written
- Structuring an app: 4 of 4 lessons written
- Performance: 3 of 3 lessons written
- Async UI: 3 of 3 lessons written
- React 19: 2 of 2 lessons written
- Server rendering: 4 of 4 lessons written
- Quality: 2 of 2 lessons written
- Project: 1 of 1 lessons written
- network canaries: 3 of 3 blocked
Every panel runs React's development build unless its badge says React prod. Lesson 2 shows how and why. No network, and no npm dependencies of its own: React, TypeScript and happy-dom are vendored and checked by hash.
JSX
JSX is function calls: what it compiles to, how props and children travel, and rendering conditionally and in lists.
4 of 4 written
State and events
Events in a DOM, state as a snapshot per render, updating objects and arrays without mutating them, forms, and sharing state.
5 of 5 written
Effects and refs
Synchronising with the world outside React, the dependency array, StrictMode's double run, when not to use an effect, and refs.
5 of 5 written
Structuring an app
Context, reducers, custom hooks, and the rules of hooks, broken on purpose so you can read what React says.
4 of 4 written
Performance
When React re-renders, counted rather than guessed, what memo, useMemo and useCallback buy, and transitions.
3 of 3 written
Async UI
Suspense and lazy, promises as data with use(), and error boundaries for the things that go wrong.
3 of 3 written
React 19
Actions and useActionState, optimistic updates and useFormStatus: forms that talk to the server.
2 of 2 written
Server rendering
renderToString, streaming, hydration and what a mismatch looks like, and the line between server code and client code.
4 of 4 written
Quality
Testing components with the test runner that ships in Node, and accessibility in React.
2 of 2 written
Project
One reading list, end to end: rendered on the server, hydrated, filtered, added to, and tested, all by panels that really ran.
1 of 1 written