14 chapters · no sign-up

Describe the screen you want. React draws it.

A clear, worked-example guide to the React basics — components, props, state, events, and hooks.

Card.jsx

function Card({ title, body }) {  const [likes, setLikes] = useState(0);   return (    <article className="card">      <h3>{title}</h3>      <p>{body}</p>      <button onClick={() => setLikes(likes + 1)}>        Like ({likes})      </button>    </article>  );}

On the page

Thinking in components

Build the interface out of small pieces, then compose them.

The guide

Written to be read in order. Each chapter assumes the one before it, and every idea is shown with code you can paste into a project.

Introduction to React

What React is, the problem it solves, and the mental model that makes the rest of the guide click.

Getting Started

Two ways to run React: a single HTML file for experiments, and a real toolchain for actual projects.

JSX

The syntax that lets you write markup inside JavaScript, and the handful of rules that differ from HTML.

Components

The unit React is built from: a function that returns markup, composed into a tree.

Props

How data flows from a parent component into a child, and why it only flows that way.

State and useState

Memory that survives between renders, and the rules for changing it correctly.

Handling Events

Responding to clicks, keys, and input in JSX, and the differences from plain DOM listeners.

Conditional Rendering

Showing different output for different data, using ordinary JavaScript rather than special syntax.

Lists and Keys

Turning arrays into elements with map, and why every item needs a stable key.

Forms

Controlled inputs, multiple fields, validation, and submitting.

Hooks Overview

What hooks are, the rules that govern them, and which ones you will actually reach for.

useEffect

Running code outside the render — subscriptions, timers, and data fetching — and cleaning up after it.

Context and useContext

Sharing values across a whole tree without threading props through every level.

Refs and Custom Hooks

Reaching the DOM directly, keeping values between renders, and packaging logic for reuse.

What you need first

HTML, CSS, and JavaScript fundamentals — particularly arrow functions, destructuring, spread syntax, and array methods such as map and filter. Most early confusion with React turns out to be confusion with modern JavaScript.