What React is and why people use it

The problem React solves

A web page that never changes is easy: you write HTML and the browser shows it. The trouble starts when the page must change as the user interacts: a counter goes up, a cart updates, a list filters while you type, a message appears when a request fails. With plain JavaScript, you write instructions to change the page by hand: find this element, set its text, add that class, remove this row. For a small widget that is fine. For a whole application, keeping the screen in step with the data becomes the hardest part, and bugs appear when one place forgets to update another.

React flips the approach. You describe what the screen should look like for the current data, and React works out what has to change in the page. When the data changes, you describe the screen again and React makes the page match. This style is called declarative, in contrast with the step-by-step imperative style of hand-written DOM updates.

What React is, and is not

React is a JavaScript library for building user interfaces, released by Facebook (now Meta) in 2013 and used today by a large share of websites and apps. A few points to place it correctly:

• It is a library, not a full framework. It focuses on the view: turning data into what people see, and handling interaction. For routing, data fetching, forms and building, you choose and add other tools. Frameworks such as Next.js are built on top of React and add those pieces for you.
• It runs in the browser (and can also render HTML on a server).
• You write components and JSX, an HTML-like syntax inside JavaScript, which a build tool turns into ordinary JavaScript.
• The same ideas also power React Native for mobile apps, although this course covers React for the web.

This course teaches React 19 with function components and hooks, which is the current way to write React. Older tutorials with class components still work, but you will not need them to start.

Components: the building blocks

A component is a JavaScript function that returns a description of some UI. You build a page from components, the way you build with Lego bricks: a Button, a ProductCard, a Header, each reusable, and larger pieces made from smaller ones. A component is also a boundary: it owns the markup and behaviour of its own piece of the page.

The next lesson shows how to set up a project. For now, here is the idea in a live editor. This is a complete React component, a counter. Press Try it to run it, press the button and then change the code:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default App;

You clicked 2 times.
Click me

(The result above is the page after the button was clicked twice.) Read it piece by piece, without worrying about the details yet:

• function App() is a component. Its name starts with a capital letter.
• useState(0) gives the component a piece of state: a remembered value (count, starting at 0) and a function to change it (setCount).
• The return holds JSX. The curly braces {count} put the value into the page.
• onClick={() => setCount(count + 1)} says what to do when the button is clicked. Notice that the code never touches the <p> element. It only changes the data, and React updates the text.

That last point is the whole idea: you change the data; React updates the page.

The same counter in plain JavaScript

For comparison, here is the counter written the imperative way:

<p id="message">You clicked 0 times.</p>
<button id="btn">Click me</button>

<script>
  let count = 0;
  const message = document.getElementById("message");
  document.getElementById("btn").addEventListener("click", () => {
    count = count + 1;
    message.textContent = "You clicked " + count + " times.";
  });
</script>

This is shorter for one counter. The difference appears as the app grows: if five different places show the count, the plain version needs five lines that update them every time, and forgetting one leaves the page out of date. In React, each place simply says "show count", and they all stay correct automatically.

How React updates the page

When state changes, React calls your component function again to get the new description of the UI, compares it with the previous description, and changes only the parts of the real page that differ. You never write the update code. (The old description is often called the virtual DOM, but you do not need to think about it while learning: the model "state changes, component runs again, page matches" is what matters.)

Two consequences are worth remembering from day one. First, your component function can run many times, so it should only calculate what to show from its inputs, a rule explored in the lesson on pure components. Second, you never edit the page directly (no document.getElementById in React components); you change state, or use a few special tools that this course will introduce.

Why people choose React

• Reusable components keep large apps organised and consistent.
• One-way data flow (data goes down from parents to children) makes it easier to see where a value comes from.
• A huge ecosystem of libraries, tutorials and tools, and a large job market.
• It scales from one interactive widget on an otherwise ordinary page to a complete application.
• Skills transfer: the ideas behind components and state appear in other tools too (Vue, Svelte and Angular have their own versions), and React Native reuses them for phones.

React is not always the right choice. A mostly static content site, such as a blog, often works better with plain HTML or a static site generator. Small interactions, like a dropdown menu, may not justify a framework. React earns its place when the interface has a lot of changing state.

What you need to know first

This course assumes you know basic HTML and CSS, and a little JavaScript: variables, functions, if statements and arrays. The next lesson, The JavaScript you need for React, covers the modern JavaScript React code leans on (arrow functions, destructuring, map, modules), so you can start without being an expert. If HTML is new to you, begin with the HTML course and the CSS course.

How this course works

Every lesson is short and has code you can edit in the page. Code marked with Try it runs in a live editor, and the results shown were produced by running the code in a real browser with React 19. Each lesson ends with a quiz, and the final exam gives you a certificate. In the middle of the course you will set up a real project with a build tool; the editor examples use the same component code that goes into such a project.

Common mistakes

• Thinking React is a framework that includes everything. It does not include routing or data fetching; you add them.
• Trying to learn React before basic JavaScript. Spend an afternoon on functions, arrays and objects first.
• Updating the page with document.getElementById inside components. Change state instead.
• Starting with a huge project. Build tiny components first.
• Following tutorials that use class components or very old patterns. Prefer function components and hooks.

Exercise

1. Press Try it on the React counter and change the button text and the message.
2. Add a second button labelled "Reset" that sets the count back to 0 (setCount(0)).
3. Display a second paragraph that shows count * 2. Notice that you did not write any code to update it.
4. In your own words, write two sentences explaining the difference between telling the browser how to update the page and describing what the page should show.