The React roadmap

Every React lesson we teach, laid out as one path. Each station is a stage; tap any lesson to open it. Stations turn teal as you finish them.

Legend:Lesson stageStage completeTap a lesson to open it

Fundamentals & Mental Model

Declarative vs. Imperative UI

JSX & Compilation

Elements vs. Components

Virtual DOM & Reconciliation

One-Way Data Flow

Component Architecture (The Basics)

Functional Components

Props & Destructuring

State & useState

Functional State Updates

Event Handling

Conditional Rendering

Lists & Keys

Component Lifecycle & Side Effects

The useEffect Hook

The Dependency Array

Stale Closures in Hooks

Effect Cleanup

Strict Mode

Refs & useRef

Intermediate Patterns

Controlled vs Uncontrolled

Lifting State Up

Context API

The Context Performance Trap

Custom Hooks

Error Boundaries

Portals

Data Fetching & State

Client vs. Server State

Data Fetching & Caching

Global State Management

Complex State with useReducer

Performance Optimization

React.memo

useMemo & useCallback

The Over-Optimization Trap

Code Splitting & <Suspense>

List Virtualization

Concurrency in React 18

Routing & Forms

Client-Side Routing

React Router DOM Basics

Form State Management

Controlled Inputs & Validation

React Hook Form & Zod

Ecosystem & Tooling

TypeScript in React

Headless Component Libraries

Component-Driven Development

Testing React

Full-Stack Architectures

Rendering Patterns

React Server Components (RSCs)

Server Actions

Meta-Frameworks