React Tutorial
Props and Component Composition
Pass data into components and combine small components into flexible interfaces.
Concept
Props are inputs supplied by a parent component. A child reads them without changing them, which keeps data flow predictable and makes one component reusable with different values.
Composition means building a larger interface from smaller components. The children prop is useful when a wrapper should accept nested JSX instead of knowing every detail in advance.
Example
function SkillCard({ name, level }) {
return <p>{name}: {level}</p>;
}
export default function App() {
return <SkillCard name="React" level="Beginner" />;
}
Type the example yourself and change at least one value. Small experiments reveal syntax and behavior faster than passive reading.
Practice Tasks
- Create a CourseCard with title and category props.
- Render three cards from different prop values.
- Create a Panel component that displays nested children.
Key Takeaways
- Props carry data from parent to child.
- Props should be treated as read-only.
- Composition keeps components focused.
Previous
← Components and JSX
← Components and JSX