React from the ground up

Learn React by building it: components and JSX, props that go down, state that remembers, events and controlled forms, lists with keys, conditional rendering, lifting state, effects and cleanup, context and custom hooks, and a todo app that uses the whole course at once.

What You'll Learn

• Mount a React root and render your first component
• Write JSX with the rules that actually matter, and know why they exist
• Split a page into components and compose them
• Pass data down with props, including children and defaults
• Keep state with useState, and know what belongs in it
• Handle events and build controlled inputs and forms
• Render lists with stable keys, and know what an index key breaks
• Show, hide and choose with the ordinary JavaScript operators
• Lift shared state to the closest common parent
• Synchronise with the outside using effects, dependencies and cleanup
• Pass values past the middle with context, and write hooks of your own
• Build a todo app with useReducer, derived state and an effect on the title

Prerequisites

• JavaScript basics: functions, arrays, objects, and the map and filter methods
• The JavaScript course covers all of it — this course starts at the first component

Course Content

1. 01
   Your first React page

   What React actually does — build the page from a function — and the three lines that put the first component on screen.

   Beginner · 13 min read

   Not started
2. 02
   JSX: the rules that matter

   Where JSX differs from HTML and why: braces for expressions, className instead of class, one root per return, and attributes that are JavaScript values.

   Beginner · 14 min read

   Not started
3. 03
   Components, composed

   Splitting a page into functions that each own a piece of it, calling one component from another, and the one rule that keeps render predictable.

   Beginner · 14 min read

   Not started
4. 04
   Props: data goes down

   Passing values into a component, destructuring them in the parameter, filling a hole with children, and the rule that props are read-only.

   Beginner · 14 min read

   Not started
5. 05
   State: data that remembers

   useState, the pair it hands back, why a plain variable cannot survive a render, and the rule about storing only what cannot be worked out.

   Beginner · 15 min read

   Not started
6. 06
   Events and forms

   Passing a function rather than calling it, reading what the user typed, and the controlled-input pattern that keeps the page and the state in step.

   Beginner · 15 min read

   Not started
7. 07
   Lists and keys

   Turning an array into elements, the key the transform asks for by name, and why the item's position is the one key you should not use.

   Beginner · 14 min read

   Not started
8. 08
   Conditional rendering

   Showing one thing or another with the ordinary JavaScript operators, returning nothing on purpose, and the zero that renders when you least expect it.

   Beginner · 13 min read

   Not started
9. 09
   Lifting state up

   Two components that need the same value: where the state should live, how a child asks for a change, and why the parent is usually the right owner.

   Intermediate · 15 min read

   Not started
10. 10
    Effects: talking to the outside

    useEffect and the one job it does — synchronising with things outside React — with the dependency array, the cleanup, and the mistakes the two prevent.

    Intermediate · 17 min read

    Not started
11. 11
    Context, and hooks of your own

    Passing a value past the components in the middle, wrapping your own logic in a hook, and the two rules every hook obeys.

    Advanced · 16 min read

    Not started
12. 12
    Putting it together: a todo app

    A capstone that uses the whole course at once — components, props, a list with keys, controlled input, a reducer for the state, and an effect that keeps the tab title honest.

    Advanced · 20 min read

    Not started