Props & Composition
Passing props, default props via destructuring, composition vs inheritance, children/slots patterns, and simple presentational components.
Props & Composition is a free React Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Overview
Goal: Pass data with props, set defaults, and build UIs by composing small components.
- Props carry data into components.
- Defaults via simple destructuring.
- Composition & children slots.
Passing props
Props are read-only inputs. A parent renders a child and supplies values; the child reads them from its parameters.
- Do not mutate props.
- Re-render happens when parents change state/props.
Default props (simple)
Give props defaults by destructuring in the parameter list: function Card({ title = "Untitled" }).
- Keeps components robust.
- Avoids undefined checks in markup.
Composition, not inheritance
Composition means building bigger UIs from smaller pieces (children/slots). Prefer it over inheritance for flexibility and clear data flow.
Demo: props + children
Example: Pass props, set defaults, and compose children inside a simple card layout.
<div id="root"></div>
Reusable presentation
Presentational components focus on layout and visuals; keep them prop-driven and stateless when possible for easy reuse.
- Small API surface (props only).
- Style via classes; avoid hidden side effects.
Composition vs inheritance
Recap
Recap: Pass data with props, set safe defaults, and compose children to build flexible, reusable UIs; avoid inheritance-based hierarchies.
Frequently asked questions
Is the “Props & Composition” lesson free?
Yes — the full text of “Props & Composition” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Props & Composition”?
Passing props, default props via destructuring, composition vs inheritance, children/slots patterns, and simple presentational components. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Props & Composition” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Passing Props & Composition Patterns
- Props & Composition
- Reusable Presentational Components