Props Basics

Props (short for "properties") are how you pass data from a parent component to a child component. They make components reusable and dynamic.

What are Props?

Props are arguments passed to React components. They're like function parameters:

Passing Props

In real React JSX, props look like HTML attributes:

Destructuring Props

A cleaner way to access props is through destructuring:

Default Props

You can provide default values for props:

Exercise: Basic Props

Exercise: Destructured Props with Defaults

Props are Read-Only

Key Takeaways

1. Props are function arguments - Passed as an object to components
2. Any value type - Strings, numbers, booleans, arrays, objects, functions
3. Destructuring is cleaner - function Card({ name, age }) is preferred
4. Default values - Use = value in destructuring for defaults
5. Props are read-only - Never modify props directly