React Mastery Path¶

Mastery Path

BOOTCAMP

VINOD BHANUJA

A hooks-first React course that starts with npm create vite@latest and ends with the architecture decisions you make on a large team codebase. There are no class components here: everything is taught with function components and hooks, the way React is written today.

Knowing the API is not enough to be good at React. What separates people who fight the framework from people who use it well is a correct mental model: a render is just a function call, state is a snapshot, effects synchronize with the outside world, and keys tell the reconciler which item is which. Every lesson therefore has a How It Actually Works section that opens the hood — how reconciliation decides what to touch in the DOM, why hooks depend on call order, where stale closures come from, how updates get batched — so you can predict what your code will do instead of guessing.

You should already be comfortable with modern JavaScript (arrow functions, destructuring, modules, promises, async/await, array methods like map and filter). If any of that is shaky, the JavaScript Mastery Path covers it.

How the program is organized¶

Level	Focus	Modules
Level 1 · Entry	Components, JSX, state, events, forms, first effects	9 topics + 1 project (expense tracker)
Level 2 · Intermediate	Data flow, reducers, context, custom hooks, fetching, routing, testing	9 topics + 1 project (recipe finder SPA)
Level 3 · Advanced	Reconciliation, state libraries, server state, a11y, Suspense, TypeScript	9 topics + 1 project (Kanban board)
Level 4 · Master	Server Components, concurrency, profiling, design systems, security, i18n	9 topics + 1 capstone (team dashboard)

How to use this site¶

Work through the levels in order — later lessons lean on the mental models built earlier.
Keep one Vite project open while you read (Level 1, lesson 1 sets it up) and paste every snippet into it. Changing a line and watching what happens teaches more than reading.
Do the Exercise at the end of each lesson before moving on. They are small on purpose; the projects at the end of each level are where things come together.
The code targets React 18 and 19. Where an API exists only in React 19 (for example useActionState or ref as a plain prop), the lesson says so.
Use the search bar at the top of the page to jump straight to a hook or topic.

Start here → Level 1 · Entry

🎥 Prefer video? Watch the Mastery Path video series on YouTube — Shorts and full walkthroughs of lessons across the series.