Lesson 2 — Reusable UI

Props: inputs for components

A component can take props (short for properties) — values passed in like HTML attributes. <Card title="One" /> calls the Card function with { title: "One" }, and Card shows it with {title}. Curly braces in JSX mean "put this JavaScript value here".

function Card({ title }) { return <div>{title}</div>; }
<Card title="One" />

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: one component with props replaces many copies of nearly the same HTML.