Beginner to Intermediate

React

A hands-on React course that takes you from JSX and components to hooks, routing, global state, data fetching, testing and deployment. Every lesson explains how React behaves at runtime, not only how to write the syntax, and the course ends with two real projects and a full interview prep module.

10 modules
36 lessons
About 267 min reading

Start learning

Course syllabus

Select any lesson to open it.

Module 1: Getting Started

3 lessons

Refresh the JavaScript React depends on, set up a modern Vite project, and learn to think in components and state instead of manual DOM updates.

Module 2: JSX and Components

4 lessons

What JSX really compiles to, how function components run, how props flow, and why class components still show up.

Module 3: State and Interactivity

4 lessons

useState, events, conditional rendering and lists, including how React decides what to keep and what to throw away.

Module 4: Hooks and Lifecycles

5 lessons

Effects, refs, context, reducers and custom hooks, with a clear picture of when each one runs.

Module 5: Forms, Styling and Routing

4 lessons

Controlled forms and validation, the main styling options, and client-side routing with React Router.

Module 6: Global State and App Architecture

3 lessons

Deciding where state belongs, then using Redux Toolkit or Zustand when lifting state stops being enough.

Module 7: Real-World Usage

5 lessons

Fetch server data by hand and with TanStack Query and Axios, control re-renders with memoization, split bundles with lazy and Suspense, and deploy to production.

Module 8: Tooling and Testing

3 lessons

Debug with React DevTools and a repeatable method, test components with Vitest and React Testing Library, and set up linting, formatting and build tooling.

Module 9: Projects

2 lessons

Two realistic projects that combine everything: a Focus Board task manager and a Recipe Finder with routing, server state and favorites.

Module 10: Interview Questions

3 lessons

Conceptual questions with real explanations, plus coding exercises with solutions and reasoning.

What you will learn

Think in components and describe any UI as a function of state
Write JSX confidently and understand what it compiles to
Manage local state with useState and complex state with useReducer without mutating data
Use useEffect correctly for synchronization, cleanup and data subscriptions, and know when not to use it
Share state with Context, custom hooks, Zustand or Redux Toolkit and pick the right tool for the job
Build controlled and uncontrolled forms, including validation with React Hook Form
Style apps with CSS Modules, Sass or Tailwind CSS and understand when a component library makes sense
Implement multi-page navigation, nested layouts and protected routes with React Router
Fetch and cache server data with TanStack Query and Axios, with proper loading and error handling
Find and fix unnecessary re-renders and ship smaller bundles with memo, useMemo, useCallback, lazy and Suspense
Debug with React DevTools and test components and hooks with Vitest and React Testing Library
Build a production bundle and deploy it to Vercel, Netlify or AWS
Answer React interview questions with real reasoning and solve common coding exercises

Prerequisites

Solid HTML5 (semantic elements, forms, accessibility basics)
Solid CSS3 (selectors, box model, flexbox, grid)
Modern JavaScript (ES6+): arrow functions, destructuring, spread and rest operators, modules (import and export), array methods like map and filter
Comfort with the command line and a code editor such as VS Code

Loading course...