Command Palette

Search for a command to run...

Hectal
Phase 0Beginner1 of 28 in React

Start Here: Why React

What React is, the problem it solves, how it thinks about a page, the JavaScript you need first, and your very first React app.

This phase assumes you know a little HTML, CSS and JavaScript and nothing about React. You'll see the problem React was built to solve: keeping a page in step with changing data. You'll compare the same small app written in plain JavaScript and in React, and learn the one idea the whole library rests on: the screen is a function of your data.

Then you'll check the JavaScript you need, meet your tools, and build your first React app twice: once right here in the live editor, and once as a real project on your own computer with Vite.

Every React example on these pages is real React 19 running in your browser. Change the code and the preview updates beside it.

0/4 · 0%
4 topics ~78 min 13 code blocks & diagrams
Start with the first topic
1
0.1

What React Is and Why It Exists

React is a JavaScript library for building user interfaces: you describe what the screen should look like for the current data, and React updates the real page for you whenever that data changes.

21 min 1 diagram 3 code practice

2
0.2

The React Mental Model

A React app is a tree of components; each one turns data into a description of the screen, state changes make React re-render, and React then updates only the parts of the real page that changed.

20 min 1 diagram 2 code practice

3
0.3

What You Need First and Your Tools

React is plain modern JavaScript plus JSX, so you need a handful of JavaScript features (arrow functions, destructuring, spread, map and filter, modules, ternaries, promises), Node.js with npm, an editor and React DevTools.

18 min 3 code practice

4
0.4

Your First React App

A React app starts by creating a root on one HTML element with createRoot and rendering your top component into it; a real project gets the same setup from Vite in one command.

19 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Hello, React!

Change the App component so the page shows a main heading (<h1>) that says exactly Hello, React! and, under it, a paragraph (<p>) with one sentence about you.

Beginner
2

One component, used three times

Write a component named Tip that returns a <div className="tip"> containing an <h2> with the text Tip and a <p> with the text Practise a little every day.

Beginner
3

Fix the counter that never changes

This counter uses a normal variable, so clicking does nothing on screen. Make it work: the button (it has id="add") must show Clicks: 0 at the start and go up by one on every click.

Beginner
4

A like button

Build a button with id="like". It starts with the text Like. Clicking it switches it to Liked and gives it the class liked. Clicking again switches back to Like with no liked class.

Beginner
5

Mini build: a mood picker

Build a mood picker with three buttons labelled Happy, Calm and Sad, and a paragraph with id="mood".

Beginner