Thinking in React: UI = f(state)

The big idea

In the DOM lessons you updated the page by hand: find an element, change its text, add a class. In a big app, keeping hundreds of elements in sync with your data that way becomes a nightmare.

React flips it around:

The UI is a function of the state. Describe what the screen should look like for any data, and let the framework update the page.

function Greeting({ name, unread }) {
  return `<h1>Hi ${name}!</h1>` + (unread > 0 ? `<p>You have ${unread} new messages</p>` : "");
}

console.log(Greeting({ name: "Ada", unread: 3 }));
console.log(Greeting({ name: "Ada", unread: 0 }));

Same function, different data, different UI. That's all a component is.

What real React looks like

React uses JSX, HTML-like syntax inside JavaScript:

function ProductCard({ name, price, inStock }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{inStock ? `$${price}` : "Sold out"}</p>
    </div>
  );
}

function ProductList({ products }) {
  if (products.length === 0) return <p>No products yet</p>;
  return products.map((p) => <ProductCard key={p.name} {...p} />);
}

Compare it to your string version in the practice below. It's the same thinking: props in, UI out, small components combined into bigger ones.

Why this matters

React is the most-requested front-end skill in junior job posts. Once "UI = f(state)" clicks, the syntax is the easy part. You'll set up a real React project on your own computer in the capstone.