02 — Components & Props

Components are the building blocks of React apps. A component is a function that returns JSX. Props (short for "properties") are how you pass data from parent to child.

Key Concepts

• Components are functions that return JSX (class components are legacy)
• Component names must start with a capital letter (<MyComponent />)
• Props are read-only — a component must never modify its own props
• Props flow one-way: parent → child (unidirectional data flow)
• Use TypeScript interfaces to type your props

Component Types

Type	Description
Presentational	Renders UI based on props (no state/side effects)
Container	Manages state, fetches data, passes down via props
Layout	Structural wrappers (Sidebar, Header, PageLayout)
Page	Top-level route components

Props Patterns

Pattern	Use Case
Destructuring	({ name, age }: Props) — cleaner than props.name
Default values	{ role = "user" } — fallback when prop not provided
Children	{ children }: PropsWithChildren — slot for nested content
Spread props	{...rest} — forward remaining props to native elements
Discriminated unions	Different prop shapes for different variants

Composition vs Inheritance

React strongly favors composition over inheritance:

• Use children prop for generic containers
• Use specific props for content slots
• Never extend a component class to customize behavior

File

• components-props.tsx — 12+ examples covering all component and prop patterns