Free through lesson 3

React Intro Course

From setting up with Vite through JSX, components, props, state, useEffect, hooks, React Router, testing. Across 50 lessons, you'll build, compile, and publish a task management app. Every line of code and test output has been run live with React 19.3.0 and Vite 8.3.0.

Start from lesson 1 Unlock every course

Curriculum

All 50 lessons are divided into 7 chapters. It's best to work through chapter 1 first, but you can also skip around to topics that interest you. Note: You can't run JSX in the browser, so test it in the Vite project you create in lesson 2. Prerequisites are JavaScript basics from JavaScript.

Chapter 1 — Getting Started with React (lessons 1–7)

Understand what React handles in screen updates, build dev environment with Vite, grasp JSX and component writing. Use StrictMode and developer tools to read React's behavior during development.

1

Why React? (Difference from Direct DOM Manipulation)

Build the same like button in plain JavaScript and React side by side. See "write steps" vs. "write UI for state," and what React handles.

Free
2

Create Dev Environment with Vite

Make React project with npm create vite, start dev server, HMR (changes show instantly), build for production. See index.html → main.jsx → App.jsx flow.

Free
3

JSX's True Nature (JSX Is JavaScript Expressions)

JSX converts to jsx() and jsxs() function calls — check Vite's output. Why className, why two elements side-by-side error.

Free
4

Embed Values in JSX, Conditionally Display

Embed values and calculations in JSX's {}, split display with functions, if, ternary, && — three ways. Watch the pitfall where && with 0 on left shows 0 on screen.

🔒 Basic
5

Build Your First Component

Components are "JSX-returning functions" starting with capitals. Export and import pieces to build a profile card. Why lowercase doesn't show, import errors.

🔒 Basic
6

Style (className, CSS Modules, style)

CSS file + className, CSS Modules scope class names, style prop as objects. See what HTML results and when to use each.

🔒 Basic
7

StrictMode and Developer Tools

StrictMode runs console.log and useEffect twice during dev. Catch bugs with deliberately impure components, install React Developer Tools.

🔒 Basic

Chapter 2 — props and Component Design (lessons 8–14)

Pass values with props, build layouts with children, transform arrays to lists with map and key. Finish by splitting a product catalog into components.

8

Pass Data with props

Parent → child with props, write and receive. "3" vs {3} makes 3 + 1 become 31, props must never change.

🔒 Basic
9

Destructuring props, Defaults, Spread

Destructure props by position with defaults with =. null doesn't trigger defaults, {...obj} and ...rest pass props together.

🔒 Basic
10

Build Layouts with children

Receive content between tags in children, make frame-only parts. Multiple slots pass JSX as regular props.

🔒 Basic
11

List Rendering with map and key

Transform array to JSX array with map, display lists. Filter and toSorted before showing, show message when empty, warning without key.

🔒 Basic
12

Key's Role (What Happens When index Is key)

Add row at list start with index keys, input text shifts to another row. key marks "which row is which data," safe key values.

🔒 Basic
13

How to Split Components

Split one order screen into three targets: visual groups, repeat units, calculations. HTML unchanged before/after — verify with tests.

🔒 Basic
14

[Project] Build Product Catalog

Use only props, children, lists, key, splitting to build category-sorted catalog. Handle sale price, discount rate, stock badge display.

🔒 Basic

Chapter 3 — state and Events (lessons 15–22)

Hold state with useState, move screens with events and forms. Grasp that state is a snapshot and immutable updates, finish building a ToDo list.

15

Hold State with useState

Regular variables don't trigger redraws — two reasons, useState handles them. State per placement is separate, hooks at top level only.

🔒 Basic
16

Event Handlers (onClick, onChange, Event Object)

onClick gets the function itself. () calls mistakes and Too many re-renders, e.target.value, preventDefault, stopPropagation, pass handlers as props.

🔒 Basic
17

State Is a Snapshot (Fix with Update Functions)

Call setCount(count + 1) three times, only +1 result. Read right after set, still old. State is the value at render time, update functions, batching.

🔒 Basic
18

Update Object and Array State Immutably

Direct mutation + set doesn't trigger redraw (Object.is), spread creates new objects. Array add, remove, change, sort patterns.

🔒 Basic
19

Form Input with Controlled Components

State decides field value. Handle text, select, radio, checkbox with one state and handler, transform values before storing. Two common warnings.

🔒 Basic
20

Form Submission and Validation

Separate validation into a function, onSubmit and preventDefault receive submission. Show errors near inputs, aria-invalid and aria-describedby for screen readers.

🔒 Basic
21

Lift State Up

Siblings share values — move state to common parent, distribute via props. Compare accordion and searchable products before/after lifting.

🔒 Basic
22

[Project] Build a ToDo List

Decide state and placement first in a table, then build add, complete, delete, filter, bulk-delete — chapter 3 capstone.

🔒 Basic

Chapter 4 — Side Effects and Lifecycle (lessons 23–30)

Master useEffect as "syncing external systems," dependency arrays, cleanup, data fetching race conditions. Finish with Suspense and error boundaries to build searchable user lists.

23

Sync External Systems with useEffect

useEffect is for React's outside world (page title, localStorage, timers, network) matching state. Effect runs after React renders to DOM.

🔒 Basic
24

Dependency Arrays and useEffectEvent

Compare logs: no deps, [], [a] for when Effect runs. Dependency array holds all read values. Objects run every time, React 19.2's useEffectEvent.

🔒 Basic
25

Cleanup Functions (Timers, Event Listeners)

Function from Effect is cleanup. Timers, window events, connections — compare written vs. forgotten. StrictMode catches forgetting, async pitfall.

🔒 Basic
26

When Effect Isn't Needed

Compute derivable values during render, reset state on prop change with key, event-triggered work in handlers. Three common "unnecessary Effects."

🔒 Basic
27

Fetch Data in useEffect (Guard Race Conditions)

Late response overwrites early. Fake API with reordered responses to trigger race, guard with flag and AbortController.

🔒 Basic
28

Show Loading and Error States

Four displays: loading, error, empty, success held by one status. Boolean separately creates "impossible combinations," retry with dependencies.

🔒 Basic
29

Suspense, use(), and Error Boundary

React 19's use() reads Promise, <Suspense> shows loading, error boundary handles errors. Promise caching from use(), act pitfall in tests.

🔒 Basic
30

[Project] Searchable User List

Debounce after typing finishes, split old request cancellation into 2 Effects, employee search screen. Display per state, highlight matches.

🔒 Basic

Chapter 5 — Mastering Hooks (lessons 31–38)

Use useRef, useMemo, useCallback, useReducer, useContext and custom hooks to organize component logic. TypeScript versions for major examples, finish combining useReducer and Context.

31

Manipulate DOM with useRef

useRef and ref attribute receive DOM elements for focus and scroll. React 19 passing ref as props, per-list-item refs, React 19.3 Fragment ref, TypeScript.

🔒 Basic
32

Hold Re-render-Less Values with useRef

useRef remembers values across renders. Stopwatch timer ID in ref, changing ref doesn't redraw — compare with state. Decision criteria, TypeScript.

🔒 Basic
33

Memoize Calculations with useMemo

useMemo remembers heavy calculation results, skip recalculating on unrelated re-renders. Count function calls to verify effect, when to use, React Compiler.

🔒 Basic
34

memo and useCallback Reduce Re-renders

memo skips child redraw when props same. But parent passes new function each time, doesn't help. Count renders, compare none, memo alone, memo + useCallback.

🔒 Basic
35

Consolidate State Updates with useReducer

Put state update ways in one reducer function, components dispatch "what happened" only. Test reducer without screen via table, TypeScript prevents action typos.

🔒 Basic
36

Pass Deep Values with useContext

Context avoids prop drilling — set values at top, read from anywhere. Make, provide, read — 3 steps, nearest Provider wins, React 19 changes.

🔒 Basic
37

Reuse Logic with Custom Hooks

Extract hook-using logic into functions starting with use. Online status, localStorage save, input waits — make hooks, test with renderHook. Hook rule violations error.

🔒 Basic
38

Combine useReducer and Context

Create Provider that distributes useReducer result via Context, read state and dispatch everywhere. Separate tasks and dispatch — why, error on missing Provider.

🔒 Basic

Chapter 6 — Routing and State Management (lessons 39–45)

Split pages with React Router, handle URL parameters, nested routes, loader and action with data. Global state, React 19 forms, testing with Vitest and Testing Library.

39

Split Pages with React Router

Show different components per URL — routing. Build route table in Router 8, move with Link, NavLink, useNavigate, 404 page and test rendering.

🔒 Basic
40

URL Parameters and Dynamic Routes

/products/:productId route, read with useParams. Query ?sort=price with useSearchParams and URL benefits.

🔒 Basic
41

Nested Routes and Outlet

Nest routes, parent stays in <Outlet /> children swap. Settings tabs (nested-nested), frame doesn't rebuild on move, useOutletContext.

🔒 Basic
42

loader and action for Data

loader reads data before showing page, action receives form submission. Build contact app with search, detail, create, delete — verify list auto-refreshes after save.

🔒 Basic
43

Manage Global State (useSyncExternalStore)

Create small store outside React: hold value, notify changes, read with useSyncExternalStore. Distant parts share without Provider, only changed parts redraw.

🔒 Basic
44

React 19 Forms (useActionState, useOptimistic)

Pass functions to <form action>, React 19 style. useActionState receives result, useFormStatus knows sending, useOptimistic shows without waiting — messages and chat.

🔒 Basic
45

Test Components (Vitest, Testing Library)

Component tests from user view. Vitest and Testing Library setup, render → find → act → assert, getBy, queryBy, findBy, swap APIs.

🔒 Basic

Chapter 7 — Polishing Your App (lessons 46–50)

Design a task app using all previous parts, implement add, edit, delete, save, and URL-based filtering. Measure and reduce re-renders with Profiler, build and publish.

46

Design Task Management App

Before code, table things: capabilities, component tree, which state, where to place. Static "no state" version perfects appearance.

🔒 Basic
47

Add, Edit, Delete Tasks and Save

Wire state to static version, add, complete, edit, delete, localStorage save. Verify shape on load, survive corruption, today's date.

🔒 Basic
48

Filter, Sort via URL

Filter by status, sort, search keywords in URL query. Filter computed each render separate from screen, unknown query values default, setSearchParams keeps prior.

🔒 Basic
49

Reduce Re-renders (Measure with Profiler)

Count redraws first, then reduce via state placement and memo. Slow version redraws all rows per keystroke, <Profiler> receives redraw time, placement caveats.

🔒 Basic
50

Build and Publish (Capstone)

Build task app for production, hashed files, base for subpaths, VITE_ env vars, SPA server config. Pre-launch checklist and full series review.

🔒 Basic

After you finish all 50 lessons, build complete apps including the server in Next.js. Membership unlocks all courses.