One card. Built once. Then a timer, a checklist, a habit tracker — all the same shape. That's React.
01 · the scene
"Just copy the card and change the text."
my-day needed cards — a timer card, a checklist card, a habit-tracker card. My instinct was: build one screen, then copy-paste it and tweak. By card four, every fix had to be made in four places. One slipped, one didn't.
my-day — the card system — early build
// what I asked for, first try: "copy the timer card, paste it, make it a checklist" result: 4 near-identical blocks. fix the padding once → 3 cards still wrong. each copy drifted on its own.
Neill51% · the terrain
"I thought of a screen as one big drawing. So 'make another card' meant 'draw it again.' It felt right — and it was a trap I'd repeat every single card."
Claude49% · the execution
"I let you copy-paste when I should've said: write the card once as a component, then use it many times with different data. I cleaned up four drifting copies instead of preventing them."
02 · the why
A screen isn't a drawing. It's a list of pieces.
React builds an interface out of components — self-contained chunks like a button, a chat bubble, a card. You write the piece once, then reuse it with different data. When the data changes, React re-draws just the part that changed, not the whole page. That's the entire idea, and it happens to match how you already think about a screen: "a list of cards," not "one giant picture."
▢
A component
written once
One self-contained piece — a card, a button. Define it a single time; the definition is the source of truth.
⊞
Props
the data you pass in
The same card, fed different values — title, time, items. One shape, many instances. No copy-paste.
↻
Re-render
only what changed
Change the data and React redraws just that piece — you never manually hunt the page to update it.
The model: a component is a cookie cutter, props are the dough. One cutter, a tray of cookies — each the same shape, each its own. Fix the cutter and every cookie after it comes out right. That's why my-day's timer, checklist, and habit cards are one card component used three ways, not three screens to keep in sync.
03 · predict it
Four copied cards. Fix the padding once. What happens?
You built four cards by copy-pasting the first. Now you tighten the padding on card one. What's the real problem with this setup?
Not it. This isn't a speed or browser limit — it's about whether your four cards share one definition or are four separate copies that drift.
Exactly. Copies have no shared source — a fix to one doesn't reach the others, so they drift and the work multiplies. The React answer: one card component, used four times with different props. Fix the component once → all four are correct. That's reuse instead of copy-paste.
04 · the walkthrough
One card, three uses, in four frames.
Card.jsx — define once
step 1Write the card a single time as a component. This file is now the one source of truth for "what a card looks like."
<Card title=… />
step 2Use it many times, passing different props — a timer, a checklist, a habit tracker — all the same component.
state changes → re-render
step 3When data changes (timer ticks, item checked), React redraws just that card — you don't touch the DOM by hand.
fix the component once
step 4Tighten the padding in Card.jsx and every instance updates together. No four-place chore, no drift.
05 · prove it · gate
Teach it back to unlock the payoff.
Same rule as always: answer it right, or the module isn't done.
Why is one reusable Card component better than four copy-pasted cards?
// one correct answer unlocks Module 07
Not the load-bearing reason. Think about where the "what a card is" definition lives — in one place, or scattered across four copies.
That's it. The win isn't speed or rules — it's one definition, many uses. Same principle you met with npm: keep the source of truth, derive the rest. A component is that source for a piece of UI. Module unlocked. ↓
the durable idea
A screen is a list of pieces, not one drawing. Write the piece once, use it many times with different data — and you only ever fix it in one place.
06 · factory payoff
⊘ locked — pass the teach-back to claim this piece of the factory
The reusable card that saved my-day from drift.
A real, working Card.jsx React component — written once, taking props for title, body, and an optional footer — plus the exact snippet that uses it three different ways (timer / checklist / habit). Drop it in any React project and you've got the reuse pattern, not a copy-paste pile.