JSX, Virtual DOM & Component Composition
Build your first functional component, understand JSX compilation, and master Virtual DOM reconciliation diffing algorithms.
Learning Objectives & Declarative Rendering
### Learning Objectives
- Differentiate between imperative DOM manipulation and React's declarative state-driven model.
- Master JSX compilation mechanics into `React.createElement` function calls.
- Understand Virtual DOM diffing (reconciliation) and `key` prop heuristics.
- Pass immutable data downward using component `props`.
---
### The Declarative UI Paradigm
React introduces a declarative model where user interfaces are rendered as pure functions of application state ($UI = f(State)$). Instead of imperatively querying and updating DOM elements manually, developers define component hierarchies, allowing React to compute Virtual DOM diffs and perform minimal DOM updates.
