Step 1 • Before You Start
Prerequisites — JS, DOM, and npm beginner React assumes strong JavaScript fundamentals — ES6+ (classes, arrow functions, destructuring, spread, modules), async/await, array methods (map, filter, reduce), the DOM API, and how npm scripts work. Don't skip this: struggling with React is usually struggling with JavaScript in disguise.
5h Step 2 • Before You Start
Project Setup with Vite and TypeScript beginner Scaffold a React project with Vite (vite + @vitejs/plugin-react — faster HMR and builds than CRA), add TypeScript for type safety, configure tsconfig.json (jsx, strict, paths), set up ESLint and Prettier, and understand the project structure (main.tsx entry, index.html shell, src/ directory). Know how to use the dev server and build for production.
4h Step 3 • fundamentals
Styling React Applications beginner Style React applications with multiple approaches: CSS Modules (locally scoped classNames, built-in with Create React App and Vite), Tailwind CSS (utility-first with JIT, install via PostCSS), and CSS-in-JS solutions (Styled Components, Emotion — understanding runtime vs zero-runtime tradeoffs). Integrate UI component libraries: MUI (Material Design), Radix UI (accessible primitives), Shadcn UI (copy-paste components built on Radix + Tailwind). Apply conditional classNames with the clsx utility.
5h Step 4 • Foundations
Components and JSX beginner Understand React's core model — JSX is syntactic sugar for React.createElement(), components are functions that return JSX, React.Fragment (<>) avoids extra DOM nodes, and the rules of JSX (single root, className vs class, self-closing tags, expressions in curly braces, no statements in JSX). Learn how Babel/SWC transforms JSX.
6h Step 5 • Foundations
Props and Component Composition beginner Pass data down through the component tree with props — prop types with TypeScript interfaces, default props with destructuring defaults, the children prop for composition, passing components as props (render props pattern), and the principle that a component should own the smallest amount of data needed. Understand why you should prefer composition over deep prop chains.
5h Step 6 • State
State with useState beginner Add interactivity with useState — initial state, state updates (immutable updates with spread for objects/arrays, never mutate state directly), the functional update form (when new state depends on old), batched state updates (automatic since React 18), and when multiple useState calls beat a single state object.
6h Step 7 • State
Event Handling and Controlled Forms beginner Handle user interaction in React — onClick, onChange, onSubmit, onKeyDown event handlers, SyntheticEvent wrapper and accessing e.target.value, controlled inputs (value + onChange pair — React owns the value), uncontrolled inputs with useRef (when and why), form submission and preventing default, and multi-field form state management.
7h Step 8 • State
Conditional Rendering and Lists beginner Render UI conditionally — ternary expressions, short-circuit && rendering (and why null/false are safe but 0 is not), if/else outside JSX, and the nullish pattern. Render lists with .map() and stable keys (why index keys cause bugs with reordering or deletion), and understand React's reconciliation algorithm uses keys to decide what to re-render.
4h Step 9 • State
State as a Snapshot and Re-renders intermediate Understand React's render cycle deeply — state is a snapshot per render (stale closures), each render creates a new snapshot of state/props/handlers, why you can't read updated state immediately after a setState call, how React batches multiple setState calls in event handlers (and why this was different in React 17), and how to avoid derived-state bugs by computing values from state instead of syncing them.
6h Step 10 • State
useEffect and Side Effect Management intermediate Synchronize React components with external systems using useEffect — the dependency array (why exhaustive-deps matters), cleanup functions (unsubscribe, clearTimeout, AbortController), and the strict mode double-invoke behavior that finds bugs. Critically: learn when NOT to use an effect (derived state, event handlers, data transformations can all be done without effects).
8h Step 11 • State
Refs and Imperative DOM Access intermediate Use useRef for DOM access (focus management, measuring elements, scrollIntoView), storing mutable values that don't trigger re-renders (timer IDs, previous values), and forwardRef to pass refs to child components. Use useImperativeHandle for exposing a controlled imperative API to parents. Understand when refs are appropriate vs when state is better.
5h Step 12 • Architecture
Context API for Shared State intermediate Share state across the component tree without prop drilling using createContext, useContext, and Provider. Understand when Context is appropriate (theme, locale, auth user, feature flags) vs when it causes performance issues (frequent updates), how to split contexts by update frequency, and how to colocate context with its reducer for better organization.
6h Step 13 • Architecture
useReducer and Complex State intermediate Manage complex state transitions with useReducer — actions and reducers (same model as Redux), why reducers are pure functions (no side effects), the dispatch function, combining reducers for different domains, and when useReducer beats useState (multiple related fields, complex state transitions, when "next state depends on action type not just new value").
6h Step 14 • Architecture
Custom Hooks and Logic Reuse intermediate Extract reusable stateful logic into custom hooks — naming conventions (must start with use), composing React hooks, separating UI from behavior, when a custom hook is better than a utility function (when it uses other hooks), and avoiding the trap of over-abstracting hooks that hide important state transitions. Read the rules of hooks (only in components or other hooks, only at top level).
7h Step 15 • Architecture
React Router and Client-Side Routing intermediate Add navigation to React apps with React Router — BrowserRouter, Routes, Route, nested routes with Outlet, dynamic segments (:id), useParams, useNavigate, useLocation, Link vs NavLink, protected routes (redirect if not authed), URL search params for persistent filter state (useSearchParams), and the tradeoff between SPA routing and server rendering.
7h Step 16 • Data
Server State with TanStack Query intermediate Separate server state from UI state using TanStack Query — queries (useQuery with query keys, caching, stale-while-revalidate, background refetching), mutations (useMutation with onSuccess/onError), cache invalidation after mutations, optimistic updates (update cache immediately, roll back on error), and the difference between query keys for granular cache control.
10h Step 17 • Data
Global Client State with Zustand intermediate Manage global client state (UI preferences, shopping cart, notifications, sidebar open/closed) with Zustand — define stores with actions that update state immutably, use selectors to prevent unnecessary re-renders (only subscribe to the slice you need), combine multiple stores, and persist state to localStorage with the persist middleware. Understand when Zustand is overkill vs when Context becomes a performance bottleneck.
6h Step 18 • Performance
Code Splitting and Lazy Loading intermediate Reduce initial bundle size with route-based code splitting using React.lazy() and Suspense — understand how dynamic import() works, why route-level splitting is the highest ROI, add loading fallbacks with Suspense, preload routes the user is likely to navigate to, and measure the impact with bundle analyzer and Lighthouse.
5h Step 19 • Performance
React Performance Optimization advanced Profile and optimize React rendering — use React DevTools Profiler to find expensive renders, React.memo to skip re-renders for expensive pure components, useMemo for expensive computations, useCallback for stable function references (when passing to memoized children or effect deps), and understand that premature optimization is harmful. The React Compiler (stable in React 19) eliminates most manual memoization needs.
8h Step 20 • Performance
Error Boundaries and Suspense advanced Gracefully handle runtime errors and async loading — ErrorBoundary components (class-based, or use react-error-boundary library) that catch render errors and show fallback UI, error recovery (the reset prop), Suspense for data loading (pairs with React 19's use() hook or TanStack Query's suspense mode), and how to nest boundaries for granular recovery without full-page errors.
6h Step 21 • Quality
Accessibility in React intermediate Build accessible React UIs — semantic HTML first (use button not div[onClick]), ARIA roles/labels only when native semantics aren't enough, focus management on route changes and modal open/close (useFocusTrap), keyboard navigation (Tab, Enter, Escape, arrow keys for composite widgets), announcing dynamic content with aria-live regions, and testing with axe-core and VoiceOver/NVDA.
7h Step 22 • Quality
Testing React with RTL and Vitest intermediate Test React apps as users experience them — query by role/label/text (not by class names or test IDs), use userEvent for realistic interactions (type, click, keyboard), mock network requests with MSW (Mock Service Worker) so tests don't depend on real APIs, test custom hooks with renderHook, and write integration tests that cover critical user journeys at the component level.
10h Step 23 • Advanced
Concurrent Features and Transitions advanced Use React 18+ concurrent features — startTransition to mark non-urgent state updates (so urgent ones like typing don't get blocked), useTransition to track pending state (show a spinner while a transition runs), useDeferredValue to debounce an expensive derived value, and how Concurrent Mode enables React to interrupt and resume renders for better responsiveness.
6h Step 24 • Advanced
React Server Components and Next.js advanced Understand the React Server Components model — Server Components run on the server (zero JS sent to client, direct database access, no useState/useEffect), Client Components run on client and server (add 'use client' directive), the composition model (Server wraps Client wraps Server), Suspense for streaming HTML, Next.js App Router as the primary RSC framework, and when RSC is the right choice vs SPA.
10h Step 25 • Ship It
Production Patterns and Best Practices advanced Ship React apps with production confidence — feature flags for safe rollouts, environment-specific configuration, monitoring with Sentry for runtime errors (ErrorBoundary + Sentry.captureException), bundle analysis and performance budgets, preview deployments per PR, a11y CI checks (axe in your test suite), and the React Compiler as your first memoization strategy before manual optimization.
8h 