The React Roadmap

What React is, the problem it solves, how it thinks about a page, the JavaScript you need first, and your very first React app.

JSX from the ground up: its rules, curly braces, what it can render, styles and classes, converting HTML, and the plain objects it turns into.

Build your own tags: write components, split them into files, pass data with props, compose with children, keep renders pure and think in React.

Show different UI for different data with if, ternaries and &&, turn arrays into lists with map, and use keys so React never mixes up your rows.

Make components respond: event handlers, useState, the Rules of Hooks, state as a snapshot, batching, updating objects and arrays, render and commit.

Controlled and uncontrolled inputs, checkboxes, radios and selects, submitting with FormData, one state object for many fields, validation with ARIA, and form libraries.

Shape state so bugs can't happen: no contradictions or copies, derive what you can, lift shared state, reset with keys, and put each piece where it belongs.

Sync components with the world outside React: when effects run, dependencies, cleanup, StrictMode, fetching without races, layout effects and useEffectEvent.

useRef for values that shouldn't re-render, reaching real DOM nodes, ref as a prop, useImperativeHandle, portals and wrapping non-React widgets.

Pass data deep without drilling props, avoid context re-render traps, move state logic into reducers, and combine both into a small app-wide store.

Write your own hooks, reuse proven recipes, subscribe to outside stores with useSyncExternalStore, and know when compound components, render props or HOCs still fit.

className and style, CSS Modules, Tailwind, CSS-in-JS, component libraries and headless UI, and animation that respects reduced motion.

Type props, children, state, refs, reducers, events, context and custom hooks, then build generic and polymorphic components the compiler keeps honest.

Give your React app real URLs: client-side routing, React Router 8, params and search params, nested layouts, loaders and actions, guards and navigation UX.

Load server data the right way: avoid waterfalls, model loading and error states, use Suspense, use() and error boundaries, TanStack Query and race-free caching.

Sort state into its kinds, see where context stops scaling, and learn Zustand, Redux Toolkit, atoms, signals and state machines, and how to choose between them.

Why components re-render, how reconciliation works, memo, useMemo, useCallback, the React Compiler, profiling, transitions, code splitting, big lists and Activity.

Test React apps the way users use them: Vitest and Testing Library, role queries, user-event, async UI, mocks, hooks, context, and end-to-end checks with Playwright.

Build React apps everyone can use: semantic HTML, focus after re-renders and route changes, ARIA with useId, live regions, keyboard widgets and a11y testing.

Everything new in React 19: async Actions, form actions, useActionState, useFormStatus, useOptimistic, document metadata, resource loading and the removals.

Where HTML is made (CSR, SSR, SSG, ISR, streaming), React Server Components, Server Functions, the Next.js App Router, caching, hydration and choosing a framework.

Defend React apps: how JSX escaping stops XSS, safe HTML and URLs, secrets and tokens in the browser, securing Server Functions, CSP and dependency hygiene.

Structure a React codebase that grows: feature folders, component APIs, logic apart from UI, an error strategy, i18n, large-app boundaries and anti-pattern fixes.

What a build does, environment config, deploying with SPA fallbacks and cache headers, Core Web Vitals, error reporting with source maps, and upgrading React safely.

Build the features every product has, for real: virtual lists, infinite scroll, scroll behaviour, lazy loading, autocomplete, live updates, uploads, overlays, offline, theming.

Design a frontend the way senior interviews and real teams expect: RADIO, building blocks, six full designs with live React slices, and a checklist.

React internals (fiber, lanes, the scheduler), the classic interview questions, hooks traps, class components and machine coding rounds, all live.

Plan, build, test and ship a real task board with React: components, a reducer with context, persistence, URL filters, a fake API, optimistic updates, accessibility and tests.