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 20-week learning path
Thirteen 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
Advanced Hooks & Custom Hooks
Optimize re-renders and extract reusable logic the idiomatic way.
useMemo,useCallback&useRef- Writing your own custom hooks
useReducerfor complex local state
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
- Loaders, actions & protected routes
- Programmatic navigation & search params
Data Fetching & Server State with TanStack Query
Stop treating API data like local state — it behaves differently.
- Queries, caching & automatic refetching
- Mutations & optimistic updates
- Loading/error UI patterns & 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
Component Architecture & Composition Patterns
Structure a growing codebase so it doesn't collapse under its own weight.
- Composition over prop drilling, compound components
- Feature-based folder structure at scale
- Error boundaries & Suspense for data fetching
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
- End-to-end smoke tests with Playwright
Performance: Memoization, Code-Splitting & Virtualization
Keep a growing app fast under real data and real users.
- Profiling re-renders with React DevTools
- Route-based code-splitting & lazy loading
- List virtualization for large datasets
Next.js, SSR & the App Router
Take React beyond the client with server rendering and file-based routing.
- Server components vs. client components
- Data fetching, layouts & streaming in the App Router
- SSR vs. SSG vs. client rendering — when to use each
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
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