Props (short for "properties") are how data gets passed into a component — the mechanism that turns one component definition into something reusable with different data each time.
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return (
<div>
<Welcome name="Priya" />
<Welcome name="Amit" />
</div>
);
}
// Renders: Hello, Priya! and Hello, Amit! — same component, different dataProps arrive as a single object — {name: "Priya"} for the first call above — with one key per attribute you passed on the JSX tag.
Real React code almost always destructures props directly in the function signature, using the destructuring you already know from JavaScript:
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}A component must never modify the props it receives — they belong to whichever component passed them in. This isn't just a style rule; React relies on props being unchanged to know when a re-render is actually needed:
function Welcome({ name }) {
// name = "Someone else"; // Never do this — props are read-only
return <h1>Hello, {name}!</h1>;
}Whatever's placed between a component's opening and closing tags is automatically passed in as a special prop called children:
function Card({ children }) {
return <div className="card">{children}</div>;
}
function App() {
return (
<Card>
<p>This paragraph becomes the Card's children.</p>
</Card>
);
}The Component Composition lesson later in this section builds on children a lot further — it's one of the most useful patterns in the whole language.