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 1What 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
- 0110 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.
- 028 min
Setting up a React project
One command to create a React project with Vite, then a tour of every file it generated: what each one is for and which ones you will actually touch.
- 0314 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.
- 0415 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.
- 0510 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.
- Optional Checkpoint: the first half066 min
Showing things conditionally
Four ways to render something in React only some of the time, when to reach for each, and the tidy one that quietly puts a stray zero on your page.
- 0712 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.
- 089 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.
- 0910 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.
- 1010 min
Talking to the outside world: useEffect and fetching
Effects are for synchronising with something outside React, not for running code on mount. Fetching a list, cleaning up after it, and when not to use one.
- 1116 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.
- Optional Checkpoint: the whole thing125 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.
Common questions
-
Is React for Beginners free?
- Yes. All twelve lessons are free to read, with no sign-up, no account and no email address to hand over. The whole course sits on the open web.
-
What do I need to know before starting?
- HTML and CSS, JavaScript basics - variables, functions, arrays and objects - and enough comfort with a terminal to run a command. No React at all.
-
How long does the course take?
- About two hours of reading across twelve lessons, plus the time you spend in the editor. Every lesson ends with something you build yourself.
-
Which version of React does it teach?
- React 19, with hooks and function components only. No class components and no framework on top - a plain Vite project you create in lesson two.