← React.js learning pathReact.js · Module 3 of 10
Components and props
Pass data into components with props to make them reusable.
📖 Key ideas
- A component is a function that returns JSX: function Card(props) { ... }.
- Props are inputs from the parent: <Card title="Hi" />.
- Props are read-only inside the child.
- Destructure props: function Card({ title, price }).
- children holds whatever is placed between the tags.
💡 Real-life example: Props are like the details you write on a wedding invitation card: same card design, different names.
PropsInputs passed from parent to child
childrenContent between a component's tags
DestructuringTaking props out by name
Read-onlyChild must not change its props