Build production React applications, the whole stack
A hands-on frontend path — hooks, routing, server state, global state, component architecture, testing, performance and Next.js — ending with a capstone app you build, test and deploy yourself.
Prerequisites & tooling
What you should already know
- Comfortable writing HTML, CSS and everyday JavaScript (ES6+)
- Basic TypeScript is helpful, but not required to start
- Familiarity with the command line and Git
- Node.js (LTS) installed on your machine
Stack you'll work with
The same tools teams use to ship real React products in production.
Your 28-week learning path
Seventeen modules, from your first component to a tested, performant app you deploy with Next.js.
React Fundamentals, JSX & the Component Model
Understand what a component actually is before you write dozens of them.
- JSX, elements & the virtual DOM mental model
- Props vs. state, and one-way data flow
- Vite project setup & component file conventions
State & Effects: useState and useEffect
The two hooks that show up in almost every component you'll ever write.
- State updates, batching & why state is immutable
- Effects, dependency arrays & cleanup functions
- Common effect pitfalls: stale closures & infinite loops
useMemo, useCallback & useRef
Stop unnecessary re-renders and hold values across renders without triggering one.
useMemofor expensive computationsuseCallbackfor stable function referencesuseReffor DOM access & mutable values
useReducer & Custom Hooks
Extract reusable logic and manage complex local state the idiomatic way.
useReducerfor complex state transitions- Writing your own custom hooks
- When a custom hook beats a render prop or HOC
Forms, Controlled Inputs & Validation
Build forms that stay in sync with state and validate cleanly.
- Controlled vs. uncontrolled inputs
- React Hook Form & schema validation with Zod
- Accessible error messaging & field-level state
Routing with React Router
Turn a single-page component tree into a real multi-page application.
- Routes, nested layouts & dynamic segments
- The
<Outlet />pattern for nested UI - Programmatic navigation & search params
Loaders, Actions & Protected Routes
Fetch data before render and gate access to routes that need auth.
- Data loaders &
useLoaderData - Form submissions with route actions
- Protected routes & auth-gated navigation
TanStack Query — Queries & Caching
Stop treating API data like local state — it behaves differently.
- Queries, caching & automatic refetching
- Stale-while-revalidate & background refetching
- Loading/error UI patterns
Mutations, Optimistic Updates & Cancellation
Write data back to the server without the UI feeling laggy or stale.
- Mutations & cache invalidation
- Optimistic updates
- Request cancellation
Global State: Context, Zustand & Redux Toolkit
Pick the right tool for state that spans more than one component tree.
- The Context API, and where it stops scaling
- Lightweight global state with Zustand
- Redux Toolkit slices & when a bigger app needs them
State Management at Scale
Organize state as an app grows past a handful of components.
- Feature-based state architecture
- Normalizing nested data & memoized selectors
- RTK Query vs. TanStack Query
Component Architecture & Composition Patterns
Structure a growing codebase so it doesn't collapse under its own weight.
- Composition over prop drilling, compound components
- Render props vs. custom hooks
- Feature-based folder structure at scale
Error Boundaries & Suspense
Handle failure and loading states the React 19 way.
- Error boundaries &
react-error-boundary - Suspense fallback UI
- Suspense for data fetching with TanStack Query
Unit Testing React Apps
Build a test suite that survives refactors instead of breaking on every one.
- Component tests with Vitest & React Testing Library
- Querying by role, mocking network requests with MSW
- Testing custom hooks & coverage
Integration & E2E Testing
Prove multiple pieces actually work together, up through a real browser.
- Integration tests spanning routing & data fetching
- Playwright setup & the page object pattern
- Visual regression & running e2e tests in CI
Profiling & Code-Splitting
Keep a growing app fast under real data and real users.
- Profiling re-renders with React DevTools
- Route-based code-splitting & lazy loading
- Bundle analysis basics
List Virtualization
Render huge lists without paying the DOM cost of every row up front.
- Why huge lists get slow
- The windowing concept
- Implementing virtualization with TanStack Virtual
Next.js — Server vs. Client Components
Take React beyond the client with server rendering and file-based routing.
- Server components vs. client components
- The App Router's file-based structure
- The
'use client'directive
App Router Data Fetching, Layouts & Streaming
Nested layouts, streaming and rendering strategy, done right.
- Nested layouts & streaming with Suspense
generateStaticParams- SSR vs. SSG vs. client rendering — when to use each
Next.js — Route Handlers & Server Actions
Write data back to the server: a real API endpoint, and the more idiomatic Server Action alternative.
- Route Handlers — REST endpoints inside the App Router
- Server Actions,
'use server'&useActionState - Revalidating cached data after a mutation
Next.js — Middleware, Metadata & Caching
Gate requests, describe pages correctly to search engines, and master the caching model.
proxy.ts— redirects & request gatinggenerateMetadata, SEO & Open Graph tags- Cache Components & the
"use cache"directive
Deployment, CI/CD & Production Ops
Turn a working app into something real users can actually reach.
- Production builds & environment variables
- Deploying to Vercel/Netlify with preview deployments
- CI pipelines, monitoring & rollbacks
Styling Systems & Accessibility
Ship UI that looks intentional and works for every user.
- Tailwind CSS & component-scoped styling approaches
- Semantic HTML, ARIA & keyboard navigation
- Auditing a component with axe/Lighthouse
Animations & Internationalization
Make an app feel finished — motion with intent, and text that works globally.
- CSS transitions, keyframes & Framer Motion
- Respecting
prefers-reduced-motion - i18n with react-i18next & locale-aware formatting
Security, Authentication & Authorization
How auth actually works, and how to stop an app from being trivially exploitable.
- Session vs. JWT vs. OAuth/OIDC
- Secure token storage & protected routes
- Preventing XSS & CSRF
Micro-Frontends & Advanced Architecture
Scale the same ideas across many teams and many apps — and know when not to.
- Module Federation basics
- Monorepo structuring with Nx/Turborepo
- Shared design systems & independent deployability
Capstone: Ship a Production React Application
Apply every module in one project — built, tested, optimized and deployed by you.
- A tested, accessible, performant Next.js app
- Code review & deployment walkthrough
- Portfolio-ready project you can show employers