The Problem React Solves

What this is. React is a library for building user interfaces out of small, reusable pieces called components.

That description is accurate and almost useless on its own, because it does not say what was wrong with the previous way. So start there.

The problem. In plain JavaScript you change the page by reaching into it: find an element, then modify it.

That works until the same piece of information appears in three places. Now a single change means three updates, and the moment you forget one, the screen is showing two different answers to the same question. Every interface that has ever displayed a stale number got there this way.

Updating a count

Plain JavaScript

// find it, then change it
const el =
  document.querySelector('#count');
el.textContent = count;

// and the badge
badge.textContent = count;

// and the title
document.title = count + ' items';

React

// describe it once, from the data
function Cart({ count }) {
  return (
    <>
      <span id="count">{count}</span>
      <span id="badge">{count}</span>
    </>
  );
}
Compare → On the left, three places to remember. On the right, one value used three times. The two can never disagree, because there is only one of them.

✦ The trade you are making

You give up changing the page directly. In exchange, the screen is always a description of your data, so it cannot fall out of step with it. Almost every rule in React follows from that one trade, which is why the rules stop feeling arbitrary once you can see it.

Seeing it. Below is a working React component. The value appears in three places and there is only one of it, so the three can never disagree. Change the starting number and watch all three follow.

Try it

Click the button down to zero. Three separate pieces of the screen update together, and none of them was updated by hand.

loading editor…

loading React…

You are not expected to understand the syntax yet. Notice only that nothing here finds an element and changes it.

When you would reach for React. When the interface has state that changes over time and appears in more than one place. A page of static content does not need it, and using it there is a cost with no return.

When you would not. A brochure site, a blog, a landing page. HTML and CSS are the right tools and they are faster.

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Your First Component →
← Back