React Tutorial: Learn React Step by Step

React is a JavaScript library for building user interfaces. You describe what the screen should look like for the current data, and React keeps the page in sync when the data changes. Websites such as dashboards, shops, editors and social feeds are often built this way because their screens change all the time.

This course teaches React from the first component to a production build. Every lesson explains one idea in simple language, shows a complete example, points out the mistakes beginners make and ends with something to try. You do not need to install anything to start: most examples run right on the page, in a live React playground.

What is different about this course

A real React playground. Examples marked Runnable lesson have a Try it button. It compiles your JSX in your own browser, runs real React 19 inside a locked-down sandbox, and shows the live result, console output and clear error messages. Edit the code, press Run, click the buttons. Nothing runs on this website’s server.
Honest about what needs a real project. Routing, npm packages, TypeScript, tests and production builds cannot run in a single-file playground. Those lessons are labelled Full-project lesson. They give you the exact files and commands, and the code in them was run in a real Vite project before it was written here.
Current React. The examples use React 19.3 (the current release when this course was written) and the current Vite template. Where older code is still common, such as class components or ReactDOM.render, the lesson says it is legacy and shows the modern replacement. See React Versions and What This Course Uses.
No hooks for the sake of hooks. The hooks chapter explains when a hook is actually needed, and when it is not.

Lesson types

Every lesson starts with a small label that says what kind of lesson it is.

Label	What it means
Runnable lesson	Single-file examples that run in the playground. Press Try it.
Full-project lesson	Needs Node.js, npm and several files. Setup steps are included.
Concept lesson	An idea to understand. Code is shown for reading.

Before you start

You will move faster if you already know the basics of HTML, CSS and especially JavaScript. React is JavaScript, so these lessons help most: variables, arrow functions, array methods like map and filter, destructuring, the spread operator, modules and async code. If any of those feel shaky, read them first. Our HTML tutorial, CSS tutorial and JavaScript tutorial cover the rest.

What you will be able to do

By the end of the course you will be able to:

Explain how React turns data into a user interface, and why it uses components.
Create a React project with Vite and understand every file in it.
Write JSX and build reusable components that take props.
Manage state with useState and useReducer, and share it with Context.
Use effects, refs, memoization and custom hooks only where they help.
Build and validate forms, and load and display data from APIs with loading and error states.
Style components with CSS, CSS Modules and inline styles, and make them accessible.
Add client-side routing with React Router.
Use TypeScript, write component tests, build for production and deploy.
Build eleven small projects, ending with a complete application.

How to take the course

Go in order. Each chapter builds on the one before. Type the examples instead of only reading them, change something, and see what breaks. The fastest way to learn React is to break it on purpose in the playground and read the error message. Every chapter has exercises with solutions, and the last chapter has practice sets, a cheat sheet and common error messages.

Start with What Is React?.

Course contents

React Foundations

What React is, why people use it, how the course playground works, and the ideas behind components, the Virtual DOM and single-page apps.

Setup and Your First Application

Install Node.js, create a React project with Vite, understand every file in it, run the dev server, and write, render, import and export your first components.

JSX and Components

Write JSX correctly: expressions, attributes, fragments, dynamic values and conditional rendering, then build reusable components and combine them with composition and children.

Props and Data

Pass data into components with props, set defaults, destructure, pass functions, understand props versus state, and render lists with map, keys, filtering, sorting and empty states.

State and Events

Make components interactive: understand state and the useState hook, update it correctly, handle clicks, typing and forms, and update objects and arrays without mutating them.

React Hooks

Learn the rules of hooks, then useState in depth, useEffect with dependencies and cleanup, data fetching, useRef, useMemo, useCallback, useContext and custom hooks, with honest advice on when you do not need a hook.

Forms and Validation

Build complete forms: controlled forms and multiple inputs, select, checkbox and radio fields, submission states, client-side validation with accessible messages, resetting, reusable form components and React 19 form actions.

Styling React Applications

Style components with CSS files, CSS Modules, conditional class names and inline styles, build responsive components, scope styles to components, keep focus states accessible and weigh the trade-offs between approaches.

Data and APIs

Load and show data from JSON APIs: fetch in React, loading, error and empty states, rendering responses, search, pagination, aborting requests, environment variables and API security, including why secret keys must never ship in client code.

Routing and Application Structure

Add pages to a single-page app with React Router: install it, configure routes, link between pages, read route parameters, nest layouts, handle not-found pages, load data with routes and organise a growing codebase.

Advanced React Concepts

Share state with lifting and Context, manage complex state with reducers, design reusable and compound components, catch errors with boundaries, load code lazily with Suspense and keep apps fast and free of common rendering mistakes.

Modern React and Production

Structure a modern project, add TypeScript and tests, debug and make apps accessible, then build, configure, deploy and harden a production app, and understand how client-side React differs from frameworks such as Next.js.

Practical Projects

Build eleven original React projects, from a counter to a cart, a dashboard and a complete task board: each with requirements, a working implementation you can edit and run, a walkthrough and the reasons behind the key decisions.

Practice and Reference

Practice sets with solutions, debugging challenges, a React cheat sheet, the exact error messages React prints and how to fix them, interview questions and a plan for what to learn next.