Components: a function that returns a screen

Open any real application and count the small repeated pieces: a badge, a price, a row in a list, a card in a catalogue. Each of those is a component. Writing one is not a new skill so much as an old one wearing different clothes.

In the languages track a function was a named box: values go in, one value comes out, and the name is how you call it. A component is exactly that box with one change: what comes out is a piece of interface.

function totalPrice(price, count) {
  return price * count;
}

totalPrice(2.50, 4);

function Badge({ label }) {
  return <span className="badge">{label}</span>;
}

const view = <Badge label="New" />;The same shape twice: numbers in and a number out, props in and elements out.

That is the whole trick. A component is a named piece of the interface. You give it a name, you say what it needs, and from then on the rest of the program can ask for a badge or a price row without knowing how either one is drawn.

Here is a catalogue: three products, one shape of card. Written once, used three times.

function ProductCard({ title, price, inStock }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{price}</p>
      {inStock ? <button>Add</button> : <p>Sold out</p>}
    </article>
  );
}

function Catalogue() {
  return (
    <section>
      <ProductCard title="Bread" price="2.50" inStock={true} />
      <ProductCard title="Tea" price="3.20" inStock={false} />
      <ProductCard title="Apples" price="1.80" inStock={true} />
    </section>
  );
}One card, described once, used three times with different inputs.

The inputs are written as attributes and they arrive together in one object, called props. In this example the card receives title, price and inStock, and it does not care where they came from.

function Price({ amount }) {
  amount = amount + 1;
  return <p>{amount}</p>;
}

function Price({ amount }) {
  const [shown, setShown] = useState(amount);
  return <p>{shown}</p>;
}The second version is not better because it is longer. It is better because the number now belongs to the component that changes it.

The honest alternative to components is copy and paste, and for two cards it is fine. The bill arrives later. The designer asks for a rounded corner on every card: now you edit twelve files. A price rule changes to include tax: you fix nine of them and miss three, and the catalogue shows two different prices for the same product. A component turns each of those into one edit in one place, because there is only one place that knows how a card looks.