Components

A component = a function (or class) returning a vnode.

Two component types:

1. Function components: just a function. Modern default.
2. Class components (React legacy): class with render method + lifecycle methods.

Function components only need props as input.

Composition:

• Components nest like HTML elements.
• Each component is reusable.
• Pass data via props (top-down).

Props:

• Read-only data passed from parent to child.
• Can include functions (callbacks).

Children prop:

• Special prop: nested vnodes.
• <Card>{children}</Card> → children passed as props.children.

Render flow:

1. Root vnode tree.
2. For each function-typed vnode: call function with props, get inner vnode.
3. Recursively expand until all are HTML elements + text.
4. Convert to real DOM.

Component model is the central abstraction in React/Vue/Svelte. Used for:

• Reusability.
• Encapsulation (each component manages its own state).
• Composition (build big from small).

Single-file components (Vue, Svelte): HTML + CSS + JS in one file. React keeps separate (CSS-in-JS or external).

Class vs function: React deprecated classes for new code. Hooks (next lesson) made functions powerful.