What is React?

React is a JavaScript library for building user interfaces. Created at Facebook and now maintained by Meta and a large open-source community, it has become the default way most teams build interactive web applications. Rather than manipulating the DOM directly, you describe what the UI should look like for a given state, and React figures out how to make the screen match.

Declarative, not imperative

The central idea behind React is declarative rendering. In imperative code you give the browser step-by-step instructions: find this node, change its text, append that child, toggle a class. As an app grows, keeping every one of those mutations consistent becomes the source of most bugs.

React inverts this. You write a function of your state that returns the UI, and React keeps the DOM in sync for you.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

When name changes, you don’t touch the DOM—you re-render with the new value, and React applies the minimal set of changes. Your job is to describe the destination; React handles the journey.

The component model

React applications are trees of components: small, reusable, self-contained pieces of UI. A component is just a function that returns markup. Components compose—larger ones are built by combining smaller ones—which lets you break a complex interface into pieces you can reason about and reuse independently.

function App() {
  return (
    <main>
      <Greeting name="Ada" />
      <Greeting name="Grace" />
    </main>
  );
}

This model encourages a clean separation of concerns by feature rather than by technology. A SearchBar component owns its markup, behavior, and styling together, instead of being scattered across separate HTML, JS, and CSS files.

Historical note: React components used to be written as ES6 classes. Modern React uses function components with Hooks exclusively—you’ll rarely write a class outside of legacy codebases.

The virtual DOM

Updating the real DOM is comparatively expensive, and doing it inefficiently causes janky UIs. React maintains a lightweight in-memory representation of your UI called the virtual DOM.

When state changes, React builds a new virtual tree and diffs it against the previous one—a process called reconciliation. It then computes the minimal set of real DOM operations needed and applies only those. You get the developer ergonomics of “re-render everything” with performance close to hand-tuned updates.

state change → new virtual tree → diff vs. old tree → patch only what changed

One-way data flow

Data in React flows in a single direction: down, from parent to child, through props. A child cannot reach up and mutate its parent’s data; instead the parent passes callbacks down, and children invoke them to request changes.

This unidirectional flow makes applications predictable. When something on screen is wrong, the data that produced it came from exactly one place above it, so you always know where to look.

Where React fits

React deliberately does one thing well—rendering UI—and leaves routing, data fetching, and server rendering to the surrounding ecosystem. In practice you’ll usually reach for a framework built on top of it:

Tool	Use it for
Vite	Fast client-side single-page apps (great starting point)
Next.js	Full-stack apps with server rendering, routing, and APIs
Astro	Content-heavy sites that ship minimal JavaScript
React Native	Native iOS and Android apps from React code

In the next section you’ll scaffold a real project with Vite and render your first component.