react

React components are reusable, self-contained UI building blocks — functional components (plain functions returning JSX) have replaced class components for most use cases since hooks were introduced in React 16.8.

React enforces one-way data flow — data moves from parent to child via props, and children communicate upward through callback functions, making state changes predictable and traceable.

React is a UI library (not a framework) that uses a virtual DOM for efficient updates, component-based architecture for reusability, and unidirectional data flow for predictable state management.

JSX is a syntax extension that lets you write HTML-like markup in JavaScript — it compiles to function calls (React.createElement or the automatic jsx runtime) and provides XSS protection by escaping values by default.

When rendering lists with .map(), each item needs a unique key prop so React's reconciliation algorithm can efficiently track which items changed, were added, or removed between renders.

Props are read-only inputs passed from parent to child components — they enable one-way data flow, with callback props providing the mechanism for children to communicate back to parents.

State is internal, mutable data owned by a component — updates must be immutable (creating new objects, not mutating existing ones) and are batched asynchronously in React 18+ for performance.