Learn React by doing. Every topic is a piece of code you can read, copy, and run in a Next.js app — work through the lessons in order, from components and hooks to data fetching, forms, and the patterns that make production UIs robust.
React is just JavaScript — be comfortable with it (and ideally TypeScript) first.
Before you start
If you want to practice the exercises in this course on your computer:
Ctrl+`).pnpm create next-app@latest my-app --yes if you are using pnpm, or npx create-next-app@latest my-app --yes if you are using npm. This creates a my-app folder containing a Next.js project — the setup every example in this course is written for.my-app folder (File → Open Folder) and run pnpm dev (or npm run dev) in the terminal.app/page.tsx — with the dev server running, http://localhost:3000 updates every time you save the file.Components & TSX
Write your first components — TSX rules, props, conditional rendering, lists and keys, events, and composition with children.
State & the Basic Hooks
Master the hooks you use daily — useState and immutable updates, useEffect, useRef, useContext, useReducer, useMemo, useCallback, and custom hooks.
Sharing State
Share state across components the right way — lift state to a common parent, provide app-wide values with Context, combine Context with useReducer for a dependency-free store, and reach for Zustand when state changes often.
Fetching Data
Load and mutate data in a Next.js app — fetch directly in Server Components, then use TanStack Query for client-side reads and mutations with caching built in.
Forms & Validation
Build forms that validate themselves — controlled inputs, Zod schemas that check data at runtime, and React Hook Form wired to Zod for typed, validated forms.
Styling & UI
Style React components with Tailwind utility classes — including conditional styles — and build on shadcn/ui components you own and can restyle freely.
Robust UIs
Make your app resilient and responsive — error boundaries that contain crashes, Suspense for streaming slow content, portals for modals, and Server Actions for mutations.
Testing
Test components the way users use them with Vitest and React Testing Library, then cover critical flows end-to-end in a real browser with Playwright.
Animation
Animate entrances, exits, and interactions with Motion (Framer Motion) — declare start and end states and let the library animate the difference.