Station 11 · Components & props

The parts

You have seen the cards on every page of this boat — the Pokemon card, the UFC card, the Helldivers card. We did not write them three times. We wrote one Poster recipe and handed it different ingredients three times. The recipe is a component; the ingredients are props.

Below is the recipe, then three stampings. Change a title, pick a different accent — watch one card respond, the recipe stay still. That is the whole idea: many cards from one factory.

posters.tsx — one factory, three stampings

1function Poster({ title, accent, line }) {
2  return (
3    <article className="card" style={{ borderColor: accent }}>
4      <p style={{ color: accent }}>{line}</p>
5      <h3>{title}</h3>
6    </article>
7  );
8}
9
10<Poster
11  title="Pokemon"
12  accent="#C9A14E"
13  line="Specimen Cabinet"
14/>
15<Poster
16  title="UFC"
17  accent="#D26464"
18  line="Sporting Club"
19/>
20<Poster
21  title="Helldivers"
22  accent="#9CA994"
23  line="Munitions Deck"
24/>

Edit a prop on the right and watch only its card change. Same factory, different stampings.

Specimen Cabinet

Pokemon

titleline

accent

Sporting Club

UFC

titleline

accent

Munitions Deck

Helldivers

titleline

accent

Three cards, one component. The Poster function is the factory; the props are the slip of paper you hand it for each stamping. Every card, button, and badge on this site is built this way — one factory, dozens of stampings.

What you just learned

A component is a function that returns a piece of markup. You write the recipe once.
Props are the slip of paper you hand the recipe each time you stamp a copy. Same recipe, different ingredients, different stamping.
Every <Card />, <Button />, <Badge /> on this site is exactly this — defined once, used hundreds of times with different props.
When you find yourself copying markup three times to change one word, that is the signal to lift it into a component.

Next — Station 12: The signal

Right this way…