React Introduction

React is a JavaScript library for building user interfaces out of reusable pieces called components. It's the most widely used way to build interactive web UIs.

Declarative UI

Instead of manually updating the DOM step by step, you describe what the UI should look like for a given state. When the state changes, React figures out the minimal DOM updates and applies them.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;   // describe the UI for this data
}

The core ideas

• Components — self-contained, reusable pieces of UI.
• Props — data passed into a component from its parent.
• State — data a component owns that can change over time.
• One-way data flow — data flows down; events flow up.

How React updates the page

React keeps a lightweight virtual representation of the UI. On a state change it re-renders, compares (“reconciles”) the new tree with the old, and updates only what actually changed — which is why it's fast.

Library, not framework

React handles the view layer; you add libraries for routing, data fetching, and state as needed (covered later). Full frameworks like Next.js build on React with more built in.