Learn core React in ~4 weeks the way you actually get good at it: by building components. 20 hands-on, test-driven blocks in strict TypeScript, each with runnable examples and verified reference solutions.
A complete, free course for developers who can copy a React tutorial but don't really understand
the mental model. You don't watch — you build components, make failing tests pass, and learn why
useEffect behaves the way it does. Perfect for self-study and interview prep.
- 🧪 Test-driven — every block ships failing tests (Vitest + React Testing Library); you make them green.
- 🧠 Mental model first — dedicated blocks on the render cycle, the effect model, and why components re-render, not just API memorization.
- 🔒 Strict TypeScript — typed props, typed hooks,
strictmode, so you learn the habits real codebases expect. - ✅ Verified solutions — every reference answer passes its own tests, so what you compare against is guaranteed correct.
- 📦 Real-world finish — data fetching, forms with validation, routing, and a full app capstone.
# 1. Clone (or "Use this template" on GitHub)
git clone https://github.com/Rossoline/react-learn.git
cd react-learn
# 2. Install dependencies (Node.js 18+)
npm install
# 3. Run all tests — most fail until you build the components
npm test
# 4. Work one block at a time, re-running on save
npx vitest blocks/01-getting-started
# 5. See any block in the browser
npm run dev- Read the block's
README.md. - Open
src/examples.tsx, read it, and view it withnpm run dev. - Open
src/exercises.tsxand implement each// TODOcomponent or hook. - Run that block's tests until they all pass:
npx vitest blocks/01-getting-started
- Type-check, then compare with
solutions/:npm run typecheck
blocks/NN-topic/
├── README.md # the topic explained, with examples and the exercise list
├── src/examples.tsx # runnable, worked examples
├── src/exercises.tsx # practice components/hooks with // TODO stubs — your job
├── tests/ # automated tests (Vitest + RTL) — make them pass
└── solutions/ # reference solutions (try the exercises first!)
The full day-by-day plan is in PLAN.md. Twenty blocks across four weeks:
| Week | Theme | Blocks |
|---|---|---|
| 1 | Foundations | 01 Getting Started · 02 Components & Props · 03 Lists & Keys · 04 Events & Forms · 05 State with useState |
| 2 | Effects & Hooks | 06 useEffect & the Effect Model · 07 Rules of Hooks & Custom Hooks · 08 useRef & the DOM · 09 useReducer · 10 useContext |
| 3 | Thinking in React | 11 Composition & children · 12 Lifting State & Data Flow · 13 Memoization · 14 Performance & Re-renders · 15 Error Boundaries & Suspense |
| 4 | Practical React | 16 Data Fetching · 17 Forms in Depth · 18 Routing · 19 Testing React · 20 Capstone Project |
| Command | What it does |
|---|---|
npm test |
Run every block's tests (your progress). |
npm run typecheck |
Type-check the whole project (tsc --noEmit). |
npm run test:solutions |
Verify the reference solutions all pass. |
npm run dev |
Open the examples/exercises in the browser (Vite). |
npx vitest blocks/NN-... |
Run/watch a single block. |
Each block's tests render your component with React Testing Library and assert on what a user sees and does — text on screen, clicks, typing — not implementation details. Make the behavior right and the test goes green. The goal isn't only passing tests — it's understanding the render cycle well enough that React stops surprising you.
- Use this template (or fork) so you can commit your solutions and build a streak.
- Commit after each block (
git commit -m "block 06 done"). - For every component, ask: "When does this re-render, and why?"
- Don't reach for
useMemo/useEffectreflexively — blocks 13–14 teach when not to. - Stuck for ~15 min? Read the solution, understand it, then re-build from memory.
If this helped React finally click, please ⭐ the repo — it helps others find it. Contributions and issue reports are welcome. Happy building! ⚛️