Course description

If you know some JavaScript and want to build pages that respond as people use them, this course teaches React from the very beginning, one clear step at a time, until you can plan and build a complete app of your own.

You start by installing Node.js and creating a React project with Vite, then learn the building blocks: JSX, components and props, lists, conditions, events and state. From Section 6 you build forms and share data between components, load data with effects, write a custom hook, and style your app. Then you make it work for keyboard and screen reader users, read error messages with confidence, use the browser's developer tools, build the finished app and learn how to put it online.

There are 10 sections and 50 written lessons, each with real code and its real output, a worked example, common slips, questions people often ask and a short exercise to try, and each section ends with a short quiz. You follow Bethwyn, a dental receptionist learning React, as she builds an order page for a fictional café. Every section has a practice pack with a ready-made practice project, worked answers, expected output, a worksheet with an answer key and a cheat sheet. Pack 2 and pack 10 add a JSX and hooks cheat sheet, pack 9 adds a guide to error messages, and pack 10 holds the final project in five step folders.

What you'll learn

• Getting started with React: what React is and why components help, installing Node.js and npm, creating a project with Vite, and finding your way around it.
• JSX: how JSX becomes JavaScript, its rules, curly braces for values, fragments and comments, and attributes, images and style objects.
• Components and props: writing components, passing data with props, default values, the children prop, and splitting components into files.
• Lists and conditional rendering: rendering lists with map, keys and why React needs them, filtering and sorting, showing things only when they apply, and empty lists.
• State and events: handling clicks, remembering values with useState, updating from the previous value, objects and arrays in state, and how React renders.
• Forms and sharing data: controlled inputs, selects, checkboxes and text areas, submitting and checking a form, and lifting state up to share it.
• Effects, data and custom hooks: what useEffect is for, dependencies and cleaning up, loading data from a JSON file, loading and error messages, and custom hooks in outline.
• Styling, context, routing and accessibility: plain CSS, CSS modules and inline styles, useContext and routing in outline, and making pages work with the keyboard and screen readers.
• Debugging, building and good habits: reading error messages, the browser's developer tools, building with Vite, putting a static site online in general terms, and how professional code is checked.
• Final project: the Gorsebrook Café order page: a complete order page for a made-up café, planned and built in five working steps, with the full code at every step.

Who it's for

Learners who already know basic JavaScript, HTML and CSS and want to take the next step to building interactive web apps. If you are new to JavaScript, start with JavaScript for Beginners: Make Your Web Pages Interactive, then come back to this course. You need a computer where you can install free software, a code editor and an up-to-date web browser.

What this course is, and isn't

This is a practical introduction to React, using a plain Vite project so you understand every step. It was written with React 19.3, Vite 8.3 and Node.js 22, and every example was run with those versions; tools change often, so the course shows where to check the official pages if something looks different. It isn't a course on frameworks, back ends, payments or mobile apps, and it doesn't recommend any editor, browser or hosting company. Bethwyn and every other person and business in the course are fictional.

What will I learn?

• Set up Node.js and npm, create a React project with Vite and run it in the development server
• Write JSX and build pages from components that take data as props
• Render lists with keys, and show or hide parts of the page with conditions
• Handle events and remember values with useState, updating objects and arrays the right way
• Build forms with controlled inputs, check what people type and show clear messages
• Share data between components by lifting state up and passing props down
• Load data from a JSON file with useEffect and fetch, with loading and error messages, and write a custom hook
• Style components with plain CSS, CSS modules and inline styles, and outline context and routing
• Make React pages work with the keyboard and screen readers, read error messages and debug with the browser's tools
• Build an app with Vite, understand how a static site goes online, and plan and build a complete small app

Frequently asked questions