What React is
React is a JavaScript library for building user interfaces. A page is assembled from components — small independent pieces: a button, a card, a form. You describe what the interface should look like for the current data, and React updates the page itself when the data changes. The course is written for React 19.
Why you need it
In the DOM lessons you changed the page by hand: found an element with document.querySelector, changed its text, added and removed nodes. With one button on the page that is fine. When there are hundreds of elements depending on each other, it is easy to forget to update one of them.
React changes the approach:
| Changing the DOM by hand | React |
|---|---|
| You say what to change on the page | You describe what the page should look like |
| Markup and update code live apart | Markup and logic live in one component |
| Every data change needs its own update code | Change the data and React redraws what is needed |
What a component looks like
A component is an ordinary JavaScript function that returns markup:
// src/App.jsx
export default function App() {
return <h1>My tasks</h1>;
}Markup inside JavaScript is called JSX. React calls the App function and shows the heading "My tasks" on the page.
The declarative approach
The main idea: the interface is a function of data. Below, a component receives the number of tasks and shows matching text:
// src/components/TodoCounter.jsx
export default function TodoCounter({ count }) {
return <p>Tasks in the list: {count}</p>;
}You do not write "find the paragraph and replace the number in it". When count changes, React calls the function again and updates only the text that changed.
What you need
- JavaScript knowledge: functions, arrow functions, destructuring, the array methods
mapandfilter,importandexportmodules,fetch. All of this was in the tutorial. - Node.js 20 or newer — the build tools need it.
- A code editor, for example VS Code.
What the course covers
First you build a to-do list: components, props, state, forms. Then a small blog that reads posts from an API, with several pages, data loading and error handling. At the end — styles, tests and publishing to a host.
Common mistake
React is a library for the interface, not a full framework. It has no built-in routing, database access or server. Pages are handled by React Router, data by plain fetch or dedicated libraries. Do not look in React itself for what it does not have: the course has a separate lesson for each such task.