Course · Beginner · 12 lessons · ~2 hours

React for Beginners

You know HTML, CSS and enough JavaScript to be dangerous. Twelve lessons later you will have built a working app and understand why every piece of it is there.

Start lesson 1

What you'll learn

  • What React actually solves, and when reaching for it is the wrong call
  • Components, JSX and props - the whole composition model
  • State, events and forms: making a page respond to a person
  • Where state belongs, and why the answer is usually higher up
  • Effects and data fetching, without the mental model everyone gets wrong
  • Building a complete app from a mock-up, start to finish

Before you start

  • HTML and CSS
  • JavaScript basics: variables, functions, arrays, objects
  • Comfort running a command in a terminal

Beginner · 12 lessons · ~2 hours · Free · No sign-up

  1. 01
    10 min

    Why React exists

    The problem React actually solves - and the same small interface built twice, once by hand and once by describing the result.

  2. 02
    8 min

    Setting up a React project

    One command, and then a tour of every file it generated - what each one is for and which ones you will actually touch.

  3. 03
    14 min

    Components and JSX

    A component is a function that returns markup. JSX is how you write that markup, and it has about five rules worth learning up front.

  4. 04
    15 min

    Props: passing data down

    Components take arguments like any other function. Props are those arguments, they only travel one way, and the component cannot change them.

  5. 05
    10 min

    Rendering lists, and what keys are for

    Turning an array into markup with map, and the one prop React asks for in return - plus why reaching for the array index will eventually bite you.

  6. 06
    6 min

    Showing things conditionally

    Four ways to render something only sometimes, when to use each, and the one that quietly puts a zero on your page.

    Optional Checkpoint: the first half 10 questions · lessons 1–6 · no sign-up, nothing stored
  7. 07
    12 min

    Making it interactive: events and useState

    The pivot. Why changing a plain variable does nothing, what useState changes about that, and how to update state from its own previous value.

  8. 08
    9 min

    Forms and controlled inputs

    Letting React own what is in the box: one state object for a whole form, immutable updates, and submitting without reloading the page.

  9. 09
    10 min

    Sharing state between components

    Two components need the same value. The answer is almost never to give them one each - it is to move it up to the nearest thing they have in common.

  10. 10
    10 min

    Talking to the outside world: useEffect and fetching

    Effects are for synchronising with something outside React, not for running code on mount. Loading a list from an API, cleaning up after it, and the many cases where you do not need an effect at all.

  11. 11
    16 min

    Thinking in React: build the whole thing

    The capstone. Take a mock-up, break it into components, build it static, find the smallest possible state, decide where it lives, and wire it up.

  12. 12
    5 min

    Where to go from here

    An honest map of everything this course left out - what to learn next, what can wait, and what you can safely ignore for another year.

    Optional Checkpoint: the whole thing 10 questions · lessons 7–12 · no sign-up, nothing stored