Components and Props
5 lessonsAbout 30 minutesBeginner
This part of the React Tutorial runs from Composing Components through to Spreading and Forwarding Props. There are 5 lessons here, and working through them takes about 30 minutes at a steady pace.
It follows on from JSX, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1Composing ComponentsBuild interfaces by nesting small React components. Learn when to split a component, when not to, and how composition keeps a tree readable.
- 2What a Component Can ReturnComponents can return elements, strings, numbers, arrays, fragments and null. Learn what each renders and how to hide a component entirely.
- 3Passing PropsProps pass data from a parent to a child in React. Learn the syntax, destructuring, default values and why props are read-only.
- 4Children and CompositionThe children prop lets a component wrap arbitrary content. Learn how children works, when to use it instead of props, and the slot pattern.
- 5Spreading and Forwarding PropsUse the spread operator to forward props in React, build wrapper components around HTML elements, and understand when spreading hurts.