Why components

Why it matters

Almost every job ad for a front-end, UI or mobile developer mentions React. It is a JavaScript library for building user interfaces, created at Facebook (now Meta) and open source since 2013. React Native uses the same ideas to build iOS and Android apps, and frameworks such as Next.js are built on top of it. Learning React well means learning a way of thinking about interfaces that carries over to most modern UI tools.

The problem React solves

With plain JavaScript you change the page step by step. Suppose a shopping page shows a cart count and a list of items. When the user adds an item you must remember every place that depends on the cart:

// Imperative: describe HOW to change the page
cart.push(item);
document.querySelector("#cart-count").textContent = cart.length;
const li = document.createElement("li");
li.textContent = item.name;
document.querySelector("#cart-list").appendChild(li);
if (cart.length === 1) {
  document.querySelector("#empty-message").remove();
}

Each new feature adds more of these manual updates, and it is easy to forget one. The page and your data drift out of sync, and bugs appear such as a counter that says 3 while the list shows 2 items.

Declarative UI

React flips the approach. You describe what the screen should look like for a given piece of data, and React works out the DOM changes for you:

// Declarative: describe WHAT the page looks like for this data
function Cart({ items }) {
  if (items.length === 0) {
    return <p>Your cart is empty.</p>;
  }
  return (
    <section>
      <h2>Cart ({items.length})</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </section>
  );
}

When items changes, React calls Cart again, compares the new result with the previous one, and updates only the parts of the real page that differ. You never write "remove the empty message" by hand: an empty cart simply returns a different description.

A useful way to say this is UI = f(data): the interface is a function of your data. If the data is right, the screen is right.

Components

The second big idea is the component: a reusable piece of UI written as a JavaScript function that returns markup. A page is a tree of components:

App
├── Header
│   └── SearchBox
├── ProductList
│   ├── ProductCard
│   └── ProductCard
└── Cart

Each component owns one job, can be tested on its own, and can be reused. ProductCard might appear on the home page, in search results and in a "recently viewed" strip, written once. Components receive inputs called props (lesson 3) and can remember values over time with state (module 2).

What React is and is not

• React is a library for the view layer. It does not include routing, data fetching or a build tool. Those come from other packages or from a framework such as Next.js or React Router (module 4).
• The markup-like syntax is JSX. It compiles to plain JavaScript function calls (next lesson). Browsers do not understand JSX directly, so real projects use a build tool such as Vite to compile it.
• React updates the page through react-dom on the web and through react-native on phones. The component code looks almost the same in both.

How a React app starts

Every React web app has one entry point that connects React to a real DOM element:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

From then on React owns everything inside #root. You do not reach in with document.querySelector to change it. You change data, and React re-renders.

In this course the exercises run in your browser: each one loads React, ReactDOM and Babel (which compiles JSX on the fly) from a CDN. That is fine for learning but slow for production, where you compile ahead of time with a tool such as Vite or a framework such as Next.js.

Common misunderstandings

• "React makes pages fast automatically." React makes UI code easier to keep correct. Performance still depends on what you render and how much data you load.
• "I must use classes." Older code uses class components. Modern React uses function components with hooks such as useState, which is what this course teaches. You will still meet class components in older codebases.
• "I can mix React and direct DOM edits freely." Editing React-owned DOM by hand gets overwritten on the next render. Change the data instead.

Recap

• Imperative code says how to change the page; declarative React code says what the page should be for the current data.
• UI = f(data): React re-runs your components when data changes and applies the minimum DOM updates.
• Apps are trees of small, reusable components that take props and may hold state.
• React is a view library; routing, data fetching and builds come from tools around it.

Try it

Open the Do tab and answer the quiz to check you can tell declarative from imperative code.