What is a Component?
A React component is a JavaScript function that returns JSX. Component names always start with a capital letter, which is how React tells them apart from regular HTML tags.
A Basic Component
function Welcome() {
return <h1>Welcome to DevAcademy!</h1>;
}
function App() {
return (
<div>
<Welcome />
</div>
);
}What Are Props?
Props (short for "properties") are how data flows from a parent component into a child component — passed the same way HTML attributes are written, and received as a single object argument.
Passing and Receiving Props
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Greeting name="Alice" />;
}Destructuring Props
Since props is just an object, it’s common to destructure the values you need directly in the function parameter for cleaner code.
Destructured Props
function Greeting({ name, role }) {
return (
<h1>
Hello, {name}! You are logged in as {role}.
</h1>
);
}
<Greeting name="Alice" role="Admin" />;Props Are Read-Only
A component must never modify the props it receives. React data flows in one direction — from parent to child — so a child that needs to change something should ask its parent to do so (typically via a callback prop), not mutate props directly.
Default Prop Values
function Button({ label, variant = "primary" }) {
return <button className={variant}>{label}</button>;
}
<Button label="Save" />; // uses default variant: "primary"
<Button label="Delete" variant="danger" />;The children Prop
Any JSX nested between a component’s opening and closing tags is automatically passed to it as a special prop called children.
Using children
function Card({ children }) {
return <div className="card">{children}</div>;
}
<Card>
<h2>Title</h2>
<p>Some card content.</p>
</Card>;One-Way Data Flow
This top-down flow of props — parent to child, never the reverse — is what makes React apps predictable: at any point, you can trace exactly where a piece of data came from by following props upward through the tree.
Best Practice
Keep components small and focused on one responsibility, and pass only the specific props a component actually needs — resist the urge to pass an entire large object "just in case."