React Foundations

React is a UI library focused on component composition and predictable rendering from state.

What React solves

  • Complex interactive UIs
  • Reusable UI components
  • Clear one-way data flow

Mental model

UI is a function of state. When state changes, React re-renders affected components.

JSX principle

function Welcome() {
  return <h1>Hello React</h1>;
}

Virtual DOM and diffing

React computes changes and updates only necessary DOM nodes for efficiency.

Professional tips

  1. Think in components first.
  2. Avoid premature optimization.
  3. Keep data flow explicit.

Practice

Sketch a component tree for a dashboard page before writing code.