Why React?

A cart count that has to keep up

Almost every shop page shows how many items are in your cart, and somewhere below, the items themselves. The two must always agree. Here is a small cart that keeps them in sync the way you would with plain JavaScript: by changing the page yourself, with the DOM methods the browser gives you. The result is live: click its buttons.

1const items = [];2 3function addItem(name) {4  items.push(name);5  const li = document.createElement("li");6  li.textContent = name;7  document.querySelector("#list").append(li);8  document.querySelector("#count").textContent = items.length;9}10 11function removeLast() {12  if (items.length === 0) return;13  items.pop();14  document.querySelector("#list").lastElementChild.remove();15}16 17document.querySelector("#add-tea").addEventListener("click", () => addItem("Tea"));18document.querySelector("#add-cake").addEventListener("click", () => addItem("Cake"));19document.querySelector("#remove").addEventListener("click", removeLast);

Line 1 keeps the items in an array. addItem (lines 3 to 9) changes two places on the page: line 7 adds a new <li> to the list, and line 8 writes the number of items into the count. removeLast (lines 11 to 15) takes the last item out of the array and removes the last <li> on line 14. Lines 17 to 19 connect the three buttons to these functions (the Introduction to events lesson covers addEventListener).

Now press Add tea, Add cake, and Remove last. The list shows only Tea, but the count still says 2. Nothing is broken in JavaScript's eyes: removeLast simply never sets the count. That's the bug, on purpose here, and it's the most common bug in hand-written page updates: a change to the data that reaches some places on the page and not others.

React takes a different route. You don't change the page; you change the data, and you describe what the page should show for any data. Here is the same cart in React:

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState([]);5 6  return (7    <>8      <p>Items in cart: <strong>{items.length}</strong></p>9      <button onClick={() => setItems([...items, "Tea"])}>Add tea</button>10      <button onClick={() => setItems([...items, "Cake"])}>Add cake</button>11      <button onClick={() => setItems(items.slice(0, -1))}>Remove last</button>12      <ul>13        {items.map((name, index) => (14          <li key={index}>{name}</li>15        ))}16      </ul>17    </>18  );19}

Line 4 asks React to keep a list for this component: items, starting as an empty array [], and setItems, the function that replaces it. React remembers it between clicks. (This is called state, and it gets a lesson of its own: State: a component's memory.)

Lines 6 to 18 return what the screen should look like. The part that looks like HTML is JSX: markup written inside JavaScript. Curly braces put a JavaScript value into it, so line 8 shows items.length. Lines 13 to 15 use map to make one <li> per name. The buttons on lines 9 to 11 don't touch the page at all: each gives React a new list, made with spread ([...items, "Tea"]) or slice. After each click, React calls App again, gets the new description, and updates the page to match it.

Press the same three buttons. The count says 1, next to one item. It can't fall behind, because the count and the list are both worked out from the same items every time.

The screen as a function of your data

People sum up React's idea as "the UI is a function of the data". UI means user interface: what the screen shows. A function takes something in and gives something back, and a component does the same: data goes in, and a description of the screen comes out. Here the data is written right in the code, on line 1:

1const items = ["Tea", "Cake"];2 3export default function App() {4  return (5    <>6      <p>Items in cart: <strong>{items.length}</strong></p>7      <ul>8        {items.map((name, index) => (9          <li key={index}>{name}</li>10        ))}11      </ul>12    </>13  );14}

Line 1 is the data: an array with two names. Line 6 shows how many there are, and lines 8 to 10 make one list item per name. The result shows Items in cart: 2, Tea, and Cake. Now press Edit & run and add "Lemonade" to the array on line 1. As you type, the result updates: the count becomes 3 and a third item appears. You changed the data, and only the data.

The key on line 9 tells React which list item is which, so it can add or remove the right one later. The position, index, works here because these lists only change at the end; the Rendering lists lesson explains when you need a real id.

A component really is a function, so you can call it with different data and get a different result:

1function CartSummary({ items }) {2  return <p>Items in cart: <strong>{items.length}</strong></p>;3}4 5export default function App() {6  return (7    <>8      <CartSummary items={["Tea"]} />9      <CartSummary items={["Tea", "Cake", "Tea"]} />10    </>11  );12}

Lines 1 to 3 define CartSummary. It takes items and returns one paragraph with the count. Its name starts with a capital letter, which is how React tells your components apart from HTML tags like <p>. Lines 8 and 9 use it twice, written like a tag, each time with a different list. The values written on a tag are its props; React passes them to the function as one object, and the braces on line 1 take items out of it with destructuring. The result: Items in cart: 1, then Items in cart: 3.

For the same data, a component should always describe the same screen, like a pure function. That's what lets React call it again whenever it needs a fresh description. JSX itself is covered in Writing markup with JSX; for now, read <p>…</p> in a component as "this is what to show".

Steps by hand, or a description of the result

The two carts in the overview show two ways to write a user interface. The by-hand cart is imperative: it gives the page orders, one step at a time. "Find the list. Make an <li>. Put it at the end. Find the count. Set its text." The React cart is declarative: it describes the result. "The count is items.length. The list has one <li> per item."

Imperative code gets harder with every place the data shows. Here is a fuller checkout cart: a count, an empty-cart message, the list, a total, and a Checkout button that only works when there is something to buy. By hand, every click must update all five:

const list = document.querySelector("#cart-list");
const count = document.querySelector("#cart-count");
const total = document.querySelector("#cart-total");
const empty = document.querySelector("#cart-empty");
const checkout = document.querySelector("#cart-checkout");
const items = [];

function sum() {
  return items.reduce((all, item) => all + item.price, 0);
}

function addItem(item) {
  items.push(item);
  const li = document.createElement("li");
  li.textContent = `${item.name} $${item.price}`;
  list.append(li);
  count.textContent = items.length;
  total.textContent = sum();
  empty.hidden = true;
  checkout.disabled = false;
}

function removeLast() {
  if (items.length === 0) return;
  items.pop();
  list.lastElementChild.remove();
  count.textContent = items.length;
  total.textContent = sum();
  empty.hidden = items.length > 0;
  checkout.disabled = items.length === 0;
}

Lines 1 to 5 find the five elements. addItem (lines 12 to 21) adds an <li>, sets the count and the total, hides the empty-cart message on line 19, and turns on the Checkout button on line 20. removeLast (lines 23 to 31) does the same five jobs in a different way, plus a check on line 24 for an empty cart. A third button, like "Empty the cart", would need a third function that gets all five right again.

Here is the same cart as a React component. It describes all five places once, for any list of items:

function Cart({ items }) {
  const total = items.reduce((all, item) => all + item.price, 0);

  return (
    <div className="checkout-cart">
      <p>Items in cart: <strong>{items.length}</strong></p>
      {items.length === 0 && <p>Your cart is empty.</p>}
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item.name} ${item.price}</li>
        ))}
      </ul>
      <p>Total: ${total}</p>
      <button disabled={items.length === 0}>Checkout</button>
    </div>
  );
}

Line 2 adds up the prices with reduce. Line 6 is the count. Line 7 shows the message only when the cart is empty: when the left side of && is false, React shows nothing there. Lines 9 to 11 are the list, line 13 the total, and line 14 turns the button off while the cart is empty. There are no steps and no functions per button: the buttons only give Cart a new items. (The playground below supplies items, so this block has no result of its own.)

Both carts end up changing the page with the same DOM methods; React calls them for you. The difference is who works out the steps. Try it: each button below clicks both carts at once, and each side lists every change it made to its page, recorded by a MutationObserver, the browser's tool for watching part of a page.

On the first Add tea, both sides make 5 changes: everything really did change. Press Add cake next. By hand, the code makes 4 changes, and one of them is set hidden on <p> again: line 19 hides a message that is already hidden, because the code can't tell what's already right. React makes 3: it compares the new description with the old one and changes only what differs. Press Remove last until the cart is empty and once more: by hand, nothing runs past the check on line 24, which you had to remember to write, and React finds nothing to change.

Each row asks the same question of both ways of writing a page:

Components you can reuse

A real page has many parts: a header, product cards, a cart. In React each part is a component, and you build the page by putting components together. A component is a JavaScript function that returns markup, with a name that starts with a capital letter. Write it once, and use it as many times as you like.

This example has three files, in tabs: App.jsx, ProductCard.jsx, and styles.css, which the page loads for the layout. Click the tabs to read each one, and click Add to cart on any card.

1import { useState } from "react";2import ProductCard from "./ProductCard.jsx";3 4export default function App() {5  const [count, setCount] = useState(0);6 7  return (8    <>9      <p>Items in cart: <strong>{count}</strong></p>10      <div className="shelf">11        <ProductCard name="Tea" price={3} onAdd={() => setCount(count + 1)} />12        <ProductCard name="Cake" price={4} onAdd={() => setCount(count + 1)} />13        <ProductCard name="Lemonade" price={2} onAdd={() => setCount(count + 1)} />14      </div>15    </>16  );17}

In ProductCard.jsx, line 1 defines the component and takes three props: name, price, and onAdd, the function to call when its button is clicked. It returns a card with a heading, a price, and a button (line 6). export default lets other files import it.

In App.jsx, line 2 imports ProductCard, and lines 11 to 13 use it three times, each with its own name, price, and onAdd. Every card's button calls setCount(count + 1), so the count on line 9 goes up whichever card you click. className on line 10 is JSX's name for HTML's class attribute.

Press Edit & run, open the ProductCard.jsx tab, and change line 6 to read Add {name} to cart. All three buttons change at once: one function draws all three cards.

Components are what make a big interface manageable. Each one is a small function you can read on its own, give different data, and reuse on another page. The components on a page form a tree: App at the top, the parts it uses below it.

What React is, and what it isn't

React calls itself "the library for web and native user interfaces". A library is code you call from your own code, for one job. React's job is the user interface: showing your components, and keeping the page matching your data. Every React app has one file that connects React to the page. Every live example on this page has one too, kept out of the tabs to keep them short (Pop out shows it). Here it is, with the App it shows:

1import { StrictMode } from "react";2import { createRoot } from "react-dom/client";3import App from "./App.jsx";4 5const root = createRoot(document.getElementById("root"));6root.render(7  <StrictMode>8    <App />9  </StrictMode>,10);

Line 1 imports from react, the package every React app shares: components, useState, and what JSX turns into. Line 2 imports from react-dom, React's renderer for web pages: the part that turns components into real DOM elements. Line 5 hands React the page's empty <div id="root"> with createRoot; from then on React manages everything inside it. Line 6 shows App there. StrictMode (lines 7 to 9) adds extra checks while you develop, such as calling your components twice to catch mistakes, and changes nothing you see.

Because the renderer is a separate package, React isn't only for web pages. React Native is a renderer for phone apps: you write components the same way, with react, but with building blocks like <View> and <Text> that become real app screens instead of web page elements.

React is also not a framework. A framework decides how a whole app is built. React doesn't handle page addresses (which page shows for /cart), loading data from a server, or building your files for the browser. Frameworks built around React add those: for a whole new app, React's documentation recommends starting with one, such as Next.js, React Router, or Expo for phone apps. To learn React, or to add it to part of an existing page, React with a build tool like Vite is enough; Setting up a React project shows both. This course teaches React 19, and its live examples run React 19.3.1.

How to read the table: each row is a question people ask about React, with a short answer and the reason.

React code is JavaScript code, so everything you know about JavaScript carries over, and the course leans on it from here on:

One piece of data, three places on a page

Real shop pages are full of data that shows in several places at once. Here is a "Save for later" feature: the header counts the saved products, each button says whether its product is saved, and a sentence at the bottom lists them. Click a few buttons, then click one again.

1import { useState } from "react";2 3const products = ["Tea", "Cake", "Lemonade"];4 5export default function App() {6  const [saved, setSaved] = useState([]);7 8  function toggle(name) {9    setSaved(saved.includes(name) ? saved.filter((item) => item !== name) : [...saved, name]);10  }11 12  return (13    <>14      <header>Saved ({saved.length})</header>15      <ul>16        {products.map((name) => (17          <li key={name}>18            {name}{" "}19            <button onClick={() => toggle(name)}>{saved.includes(name) ? "Saved" : "Save"}</button>20          </li>21        ))}22      </ul>23      <p>Saved for later: {saved.length === 0 ? "nothing yet" : saved.join(", ")}</p>24    </>25  );26}

Line 3 lists the products, and line 6 keeps the names that are saved, starting with none. toggle on lines 8 to 10 makes a new list: without the name if it was saved (filter), with it added if not. Line 14 counts the saved names, line 19 picks each button's label with saved.includes(name), and line 23 lists them, or says nothing yet. Three places, one list, and no code that keeps them in step: they can't disagree.

By hand, toggle would have to update the header, the right button, and the sentence, and remove a name from the sentence correctly too. This is where React earns its place. On a page where little changes, like an article with one menu button, plain JavaScript is simpler and the page loads less code.

Common mix-ups

• "React is a framework." No. It's a library for user interfaces. Frameworks like Next.js are built around it and add page addresses, data loading, and the build.
• "React rebuilds the whole page on every change." No. It calls your components again for a new description, then changes only what differs. In the playground, Add cake made React change three things.
• "React is faster than DOM code by hand." Not by itself. It makes the same kinds of DOM changes you would. Careful hand-written code can be just as fast; React saves you from writing, and forgetting, each change.
• "With React you never touch the DOM." Almost never. For a few jobs, like moving the keyboard focus into a text box, React gives you a way to reach the real element; Manipulating the DOM with refs covers it.
• "JSX is HTML." No. It turns into JavaScript function calls before the code runs, which is why it uses className instead of class.
• "React is only for websites." No. react-dom is one renderer; React Native uses the same React for phone apps.

Practice exercises

Each exercise shows its code's result under it, or when you press Edit & run. Change the code, and the result updates as you type. Try a guess first, then use the hints.

const items = ["Tea", "Cake", "Tea"];

export default function App() {
  return <p>Items in cart: <strong>{items.length}</strong></p>;
}

1const items = ["Tea", "Cake", "Tea"];2 3export default function App() {4  return <p>Items in cart: <strong>{items.length}</strong></p>;5}

1const items = [];2 3function addItem(name) {4  items.push(name);5  const li = document.createElement("li");6  li.textContent = name;7  document.querySelector("#list").append(li);8  document.querySelector("#count").textContent = items.length;9}10 11function removeLast() {12  if (items.length === 0) return;13  items.pop();14  document.querySelector("#list").lastElementChild.remove();15}16 17document.querySelector("#add-tea").addEventListener("click", () => addItem("Tea"));18document.querySelector("#add-cake").addEventListener("click", () => addItem("Cake"));19document.querySelector("#remove").addEventListener("click", removeLast);

1const items = [];2 3function addItem(name) {4  items.push(name);5  const li = document.createElement("li");6  li.textContent = name;7  document.querySelector("#list").append(li);8  document.querySelector("#count").textContent = items.length;9}10 11function removeLast() {12  if (items.length === 0) return;13  items.pop();14  document.querySelector("#list").lastElementChild.remove();15}16 17document.querySelector("#add-tea").addEventListener("click", () => addItem("Tea"));18document.querySelector("#add-cake").addEventListener("click", () => addItem("Cake"));19document.querySelector("#remove").addEventListener("click", removeLast);

1const items = [];2 3function addItem(name) {4  items.push(name);5  const li = document.createElement("li");6  li.textContent = name;7  document.querySelector("#list").append(li);8  document.querySelector("#count").textContent = items.length;9}10 11function removeLast() {12  if (items.length === 0) return;13  items.pop();14  document.querySelector("#list").lastElementChild.remove();15}16 17document.querySelector("#add-tea").addEventListener("click", () => addItem("Tea"));18document.querySelector("#add-cake").addEventListener("click", () => addItem("Cake"));19document.querySelector("#remove").addEventListener("click", removeLast);

1const items = [];2 3function addItem(name) {4  items.push(name);5  const li = document.createElement("li");6  li.textContent = name;7  document.querySelector("#list").append(li);8  document.querySelector("#count").textContent = items.length;9}10 11function removeLast() {12  if (items.length === 0) return;13  items.pop();14  document.querySelector("#list").lastElementChild.remove();15  document.querySelector("#count").textContent = items.length;16}17 18document.querySelector("#add-tea").addEventListener("click", () => addItem("Tea"));19document.querySelector("#add-cake").addEventListener("click", () => addItem("Cake"));20document.querySelector("#remove").addEventListener("click", removeLast);

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState([]);5 6  return (7    <>8      <p>Items in cart: <strong>{items.length}</strong></p>9      <button onClick={() => setItems([...items, "Tea"])}>Add tea</button>10      <button onClick={() => setItems([...items, "Cake"])}>Add cake</button>11      <button onClick={() => setItems(items.slice(0, -1))}>Remove last</button>12      <ul>13        {items.map((name, index) => (14          <li key={index}>{name}</li>15        ))}16      </ul>17    </>18  );19}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState([]);5 6  return (7    <>8      <p>Items in cart: <strong>{items.length}</strong></p>9      {items.length === 0 && <p>Your cart is empty.</p>}10      <button onClick={() => setItems([...items, "Tea"])}>Add tea</button>11      <button onClick={() => setItems([...items, "Cake"])}>Add cake</button>12      <button onClick={() => setItems(items.slice(0, -1))}>Remove last</button>13      <ul>14        {items.map((name, index) => (15          <li key={index}>{name}</li>16        ))}17      </ul>18    </>19  );20}

1export default function App() {2  return (3    <ul>4      <li>Tea × 2: $6</li>5      <li>Cake × 1: $4</li>6      <li>Lemonade × 3: $6</li>7    </ul>8  );9}

1function CartLine({ name, quantity, price }) {2  return (3    <li>4      {name} × {quantity}: ${quantity * price}5    </li>6  );7}8 9export default function App() {10  return (11    <ul>12      <CartLine name="Tea" quantity={2} price={3} />13      <CartLine name="Cake" quantity={1} price={4} />14      <CartLine name="Lemonade" quantity={3} price={2} />15    </ul>16  );17}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState([]);5 6  return (7    <>8      <p>Items in cart: <strong>{items.length}</strong></p>9      <button onClick={() => setItems([...items, "Tea"])}>Add tea</button>10      <button onClick={() => setItems([...items, "Cake"])}>Add cake</button>11      <button onClick={() => setItems(items.slice(0, -1))}>Remove last</button>12      <ul>13        {items.map((name, index) => (14          <li key={index}>{name}</li>15        ))}16      </ul>17    </>18  );19}

1import { useState } from "react";2 3export default function App() {4  const [items, setItems] = useState([]);5 6  return (7    <>8      <p>Items in cart: <strong>{items.length}</strong></p>9      <button onClick={() => setItems([...items, "Tea"])}>Add tea</button>10      <button onClick={() => setItems([...items, "Cake"])}>Add cake</button>11      <button onClick={() => setItems(items.slice(0, -1))}>Remove last</button>12      <button onClick={() => setItems([])}>Empty the cart</button>13      <ul>14        {items.map((name, index) => (15          <li key={index}>{name}</li>16        ))}17      </ul>18    </>19  );20}

Check your understanding

For each code question, find the data first, then read what the code shows for it. Press Edit & run on a question's code to check your answer.

Key takeaways

• Keeping a page in sync with its data by hand means updating every place the data shows, on every change. Miss one and the page shows old data.
• React components describe the screen for the current data: the UI is a function of the data. You change the data, and React updates the page to match.
• By-hand code is imperative: it lists steps. React code is declarative: it describes the result, and React works out the steps, changing only what differs.
• Components are functions whose names start with a capital letter. You reuse them with different props, and they form a tree.
• React is a library for user interfaces, not a framework. react-dom renders to web pages, React Native to phone apps, and frameworks like Next.js are built around it.

Coming next: The JavaScript you need for React. It gathers the JavaScript that React code uses every day, like functions, destructuring, spread, map, and modules.