Free · interactive · 7 days

Learn React in a week.From zero to shipped.

A hands-on course for complete beginners. You’ll learn the JavaScript you need, then build one real app, day by day, until it’s live on the internet. Every example runs in your browser.

Start Day 0 See the syllabus

React 19.3
Vite
TypeScript
TanStack Query
Next.js 16

BookCard.jsx

export function BookCard({ book }) {
  return (
    <article className="card">
      <h3>{book.title}</h3>
      <p>{book.author}</p>
    </article>
  );
}

Preview

The Pragmatic Programmer

Hunt & Thomas

Reading

Refactoring UI

Wathan & Schoger

Done

days, including setup: 8; days, including setup
bite-sized lessons: 56; bite-sized lessons
of focused practice: ~35 h; of focused practice
real app, deployed: 1; real app, deployed

The syllabus

Seven days, one step at a time

Each day builds on the last. Pick a day to see what it covers. Your progress is saved in this browser as you mark lessons complete.

Day 0 · Setup

Start here

Install the tools, create your first app with Vite, and learn how this course works.

Node & VS Code
Vite
DevTools

About 1 h

An empty “reading-list” app running on your machine

0 of 3 lessons done

Open Day 0

Day 0 of 7

How it works

Learn by building, not by watching

Everything you read, you can run and change right on the page.

One project, all week

You build a Reading List app. It starts as two hard-coded cards on Day 1. By Day 7 it has forms, filters, routing, a server and a public URL.

D1Static cards
D2List from data
D3Add & edit
D4Filters & persistence
D5TypeScript & routes
D6Actions & tests
D7Deployed

Live sandboxes

Every example is an editor with a live preview. Break things, then hit Reset.

const [count, setCount] = useState(0);

Clicked 3 times+1

Modern React only

React 19.3, function components and hooks, Actions, use(), <ViewTransition> and the React Compiler. No outdated patterns to unlearn.

Made for beginners

Day 1 teaches the JavaScript React relies on. New terms are defined as they appear. Advanced topics come later, once you’re ready for them.

Production habits

TypeScript, testing, accessibility and deployment are part of the course, not optional extras.

Every lesson has the same shape

01
Goals
Three to five things you will be able to do.
02
Concept
The why, with a mental model, before the how.
03
Live code
Editable sandboxes with an instant preview.
04
Try it
A challenge, with a solution when you need it.
05
Quick check
A short quiz with explanations.
06
Recap
What to remember, and where to read more.

Why this order

Built on the best React guides

Before writing a single lesson, we reviewed the most respected React resources and kept what each does best. The order follows react.dev; the teaching style borrows from the others.

The full annotated reading list is on the Sources page.

Ready for Day 0?

It takes about an hour: install two tools, create your app, and see it run.

Start the course