💡THE BIG IDEA
Object-oriented instinct says extend: JobCard extends Card extends Panel. React took the other road — one special prop, children, that turns every component into a box with a hole. Fill the hole with text, with a button, with another box: the same Card serves them all, and nesting the holes builds exactly the element trees you met in the JSX lesson. We run all three fillings and print the trees.
1function Card({ title, children }) {
2 return "[" + title + " | " + children + "]";
3}
4function Button({ label }) {
5 return "(" + label + ")";
6}
7console.log(Card({ title: "Jobs", children: "10,000 rows" }));
8const follow = Button({ label: "Follow" });
9const badge = Card({ title: "Badge", children: follow });
10console.log(Card({ title: "Profile", children: badge }));
11console.log(Card({ title: "A", children: Button({ label: "x" }) }),
12 Card({ title: "B", children: "plain text" }));
●Coming from Java or C++, the first React instinct is inheritance: JobCard extends Card extends Panel extends… Stop. React apps are built the other way — boxes placed INSIDE boxes.
The mechanism is one special prop: children. This lesson runs it — one Card, three completely different fillings, zero class hierarchies.
📦 Memory boxes
what the program is remembering right now
nothing remembered yet🖥️ What the computer shows
the answers the program prints out
nothing yet ▌