Learning React from scratch in 2026: a practical guide

React is the most widely used library in the world for building web interfaces, and it is among the most in-demand skills for frontend jobs. The core idea is simple: you build the UI out of reusable components, and React updates the screen by itself when the data changes.

You need some JavaScript basics first (if you lack them, see the JavaScript guide). The examples below are real React components, runnable on this page: hit "Try it" and see them rendered.

Your first component

In React a component is a function that returns what should appear on screen, written in JSX (a syntax mixing HTML and JavaScript). The main component is called App:

function App() {
  return <h2>Hello, world!</h2>;
}

It looks like HTML, but it is JavaScript: that function is a piece of UI you can reuse.

Dynamic data: the curly braces

Inside JSX, curly braces { } let you insert JavaScript values:

function App() {
  const name = "Julia";
  const year = 2026;
  return <p>Welcome {name}, it is {year}!</p>;
}

Anything between braces is computed by JavaScript and inserted into the text. That is the heart of React: UI and data together.

Rendering a list

An everyday case: turning an array into a list of elements with .map:

function App() {
  const languages = ["Python", "JavaScript", "SQL"];
  return (
    <ul>
      {languages.map((l) => <li key={l}>{l}</li>)}
    </ul>
  );
}

.map creates one <li> per element; key helps React track the items. It is the pattern you will use for lists of products, messages, results.

State: interfaces that react

This is where React shines. State is data that, when it changes, makes the screen re-render by itself. You create it with useState:

function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click</button>
    </div>
  );
}

Press the button: each click updates count, and React redraws the changed part by itself. You never touch the DOM by hand — you declare how the UI should look based on the data, and React handles the rest.

A study plan

1. Week 1 — components, JSX, props (passing data to a component).
2. Week 2 — state with useState, event handling (clicks, inputs).
3. Week 3 — useEffect (loading data), lists and forms.
4. Then — a real project (a to-do list, a mini blog) and routing.

Where to go from here

The React path starts exactly here and goes up to hooks, forms, API calls and complex components, with React exercises you write and run in the browser like these. The first chapters are free. Just want to experiment? In the playground you can try React freely.