Module 02 Recap
Module 02 covered how data enters components and how components compose into larger UIs. Here is a summary.
What you learned
Section titled “What you learned”Components have one responsibility. A component that does one thing clearly is easy to read, test, and change. When a component grows too large, split it.
Props are inputs. Data flows down from parent to child through props. The child reads them; it cannot modify them. To send data back up, a parent passes a callback function as a prop.
Composition builds complexity from simplicity. The children prop lets components wrap arbitrary JSX. Spread ...rest to pass through unknown props. Prefer composition over inheritance.
Conditional rendering uses plain JavaScript. Ternaries choose between two elements. && renders optionally. Early returns handle complex logic. No special directives needed.
Lists need stable, unique keys. Array.prototype.map transforms data into JSX. Each root element from map needs a key — an ID from the data, not the array index.
Key terms
Section titled “Key terms”| Term | Meaning |
|---|---|
| Props | Named inputs passed to a component as JSX attributes |
| One-way data flow | Data moves from parent to child only — never upward |
children | Special prop holding JSX passed between component tags |
key | Metadata prop React uses to match list elements across re-renders |
| Composition | Building complex UIs by combining smaller, focused components |
What is next
Section titled “What is next”Module 03 — State and Events — introduces the useState hook, the mechanism that makes UIs interactive. You will learn how to store data inside a component, update it in response to user actions, handle form inputs, and lift state up when multiple components need to share it.