Lesson 6 — Component composition

Components inside components

Composition means building UI from small pieces placed inside each other. A component can receive whatever you put between its tags as the special prop children. A Card can then wrap any content — text, headings, even other components.

function Card({ children }) { return <div className="card">{children}</div>; }
<Card><h2>Hi</h2></Card>

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: layouts, modals and cards in every Next.js app are built this way.