What React Adds to a Page

A browser can display an application without React. It can parse HTML, apply CSS, run JavaScript, receive input, submit forms, follow links, and update the document through DOM APIs. React does not replace any of that browser behavior.

React adds a way to describe an interface as components and calculate the next interface when application data changes. React DOM connects those calculations to browser DOM nodes.

A React project also contains HTML, CSS, JavaScript modules, a development server, build tools, and browser APIs. Treating the browser, React, and React DOM as separate systems makes both the code and its failures easier to understand.

Start with the Browser Platform

Open a plain HTML file and the browser builds a document from it.

<main>
  <h1>ReactBook</h1>
  <p>0 lessons complete</p>
  <button type="button">Complete one lesson</button>
</main>

The browser creates objects for main, h1, p, and button. Together, those objects form the Document Object Model, usually shortened to DOM.

The DOM is the live document held by the browser. It is not the same thing as the text in the HTML file. The HTML file is input. The browser parses that input and creates nodes that JavaScript can inspect and change.

const output = document.querySelector("p");
output.textContent = "1 lesson complete";

document.querySelector searches the current DOM. The assignment changes the text node displayed by the browser. React is not involved.

CSS is part of the browser platform.

button {
  background: #61dafb;
  color: #06141b;
}

The browser matches the selector and computes presentation for the button. React can later supply a class name or style value, but the browser still performs the CSS work.

Add Interaction Without React

A counter needs data, an event listener, and a DOM update.

let completed = 0;

button.addEventListener("click", () => {
  completed += 1;
  output.textContent = `${completed} lessons complete`;
});

The variable holds application data. The browser calls the listener after a click. The listener changes the data and then changes the DOM so the page represents the new number.

This code is valid. Direct DOM code is part of the web platform and remains useful in many applications. The amount of coordination grows when one value affects several regions.

Suppose the same count controls a status line, a progress element, and the button's disabled state.

output.textContent = `${completed} lessons complete`;
progress.value = completed;
button.disabled = completed >= total;

Every update site needs to apply every related DOM operation. If one line is omitted, the page can display two different accounts of the same data. The text could say all lessons are complete while the button remains enabled.

React changes how that coordination is expressed. The component code describes what all three pieces should display for the current value. React handles the DOM work required to reach that result.

Describe the Result from Current Data

Read the component as a description before concentrating on its punctuation.

function Progress({ completed, total }) {
  return (
    <section>
      <p>{completed} lessons complete</p>
      <progress value={completed} max={total} />
      <button disabled={completed >= total}>Complete one lesson</button>
    </section>
  );
}

The three UI decisions sit beside the values that control them.

• The paragraph displays completed.
• The progress element receives completed and total.
• The button is disabled after the completed count reaches the total.

The component does not search for an existing paragraph or progress element. It returns a description for the current inputs.

The component is not running continuously. React calls it when a render is required. The returned description is a snapshot from that render.

React and React DOM Have Different Jobs

A browser project installs two runtime packages.

{
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  }
}

The react package supplies the component model, React elements, state Hooks, context, transitions, and other React APIs. It defines the work used to calculate a React tree.

The react-dom package connects React to the web. Its client entry can create a root inside a browser container. Its server entries can produce HTML for server rendering and prerendering.

import { createRoot } from "react-dom/client";

The /client entry supplies the APIs that connect React to a browser DOM container.

React can also be paired with another renderer. React Native connects component output to native platform views instead of browser DOM nodes. The React component model and the host renderer remain separate pieces.

One Update Has Two Main Phases

React uses a render phase and a commit phase when applying an update to the page.

During rendering, React calls the needed components and calculates their next output. No completed browser update should be assumed while that calculation is in progress.

During commit, React DOM applies the required host changes. Those changes can include inserting nodes, removing nodes, changing text, and updating properties.

update requested
  -> React calculates component output
  -> React DOM applies required DOM changes
  -> browser paints the result

The browser paint appears after DOM and style work. React does not draw pixels itself.

This separation explains why code inside a component must calculate rather than perform unrelated external work. React can call rendering code when it needs to prepare an update. A component body that writes directly to the document would mix calculation with host mutation.

A Render Does Not Promise a DOM Change

A component can run and return the same host result it returned before.

function Status({ online }) {
  return <p>{online ? "Online" : "Offline"}</p>;
}

If online remains true, the component still returns a paragraph containing Online. React DOM can retain the existing paragraph and text because the required DOM already exists.

Render therefore means React calculated output. Commit means React applied completed work. DOM mutation means a particular browser node was changed. Those statements describe different events.

An update can cause a render without causing a DOM mutation. React may calculate the same host output and have nothing to change during commit.

Components Do Not Appear as DOM Tags

A component can return browser elements.

function SaveButton() {
  return <button type="button">Save</button>;
}

React DevTools can show a component named SaveButton. The browser Elements panel shows a button. The final DOM does not contain a SaveButton element.

The uppercase name tells JSX to use the JavaScript binding named SaveButton. The lowercase name tells React DOM to use the browser element name button.

The component tree is a React structure used to calculate UI. The DOM tree is a browser structure used to display and operate the document.

React Manages a Chosen Region

A client React application needs a browser container.

<div id="root"></div>

React DOM receives that existing DOM node and creates a React root for it.

const container = document.getElementById("root");
const root = createRoot(container);

React manages descendants inside the container after the application is rendered there.

Content outside the container can remain under the control of the server, a static document, or another script.

<header>Server-rendered site header</header>
<div id="lesson-planner"></div>
<footer>Server-rendered site footer</footer>

React can manage only the lesson planner region. A site does not have to surrender its whole document to one React root.

Several independent React roots are possible. Components in separate roots do not automatically share React context or one component tree.

React Keeps Data Relationships in Returned UI

Return to the progress example. The value completed appears in all places that depend on it.

<p>{completed} lessons complete</p>
<progress value={completed} max={total} />
<button disabled={completed >= total}>Complete one lesson</button>

The relationship is visible without searching for event handlers that edit three nodes. When the current data changes and React renders again, the same expressions calculate the next UI.

This programming model is often called declarative. The code declares the required result for current inputs. Direct DOM code commonly expresses the individual operations used to reach a result.

Both descriptions refer to real work. React DOM still performs operations. React determines them from the previous and next React output instead of requiring application code to issue each DOM instruction.

React Does Not Make Every Application Decision

Installing React does not select these features.

• URL routing
• server rendering policy
• production build tool
• data cache policy
• authentication
• database access
• deployment platform

Frameworks and libraries can provide coordinated answers. The opening project uses Vite so the client document, module entry, React root, and build output stay visible.

React also does not replace HTML knowledge. A returned button carries button behavior because the browser implements a button. A div with a click handler does not gain the same keyboard and form behavior.

<button type="button">Save</button>

The web platform defines the element's behavior. React passes the result to React DOM, and React DOM creates or updates the corresponding browser element.

Inspect the Responsible System

Use the visible symptom to begin an investigation.

The table gives a starting point rather than an automatic verdict. A CSS class can be absent because component logic omitted it. A browser error can begin with an unresolved module. The first system narrows the files and tools to inspect.

Trace the First Screen in Plain Language

The first screen follows one sequence.

1. The browser requests index.html.
2. The document provides a container and a module script.
3. The module creates a React root through React DOM.
4. React calls the application component during rendering.
5. The component returns React element descriptions.
6. React DOM commits the required DOM nodes.
7. The browser lays out and paints those nodes.

The sequence places the visible work without relying on unexamined internal details.

Lesson Check

Read each statement and identify the system that performs it.

Parses the initial HTML document
Calculates component output
Creates or updates browser DOM nodes for React
Applies CSS and paints pixels

The browser parses HTML, applies CSS, and paints. React calculates component output. React DOM performs the web host updates requested by React.

Source Notes

• React documentation, React calls Components and Hooks
• React documentation, Render and Commit
• React DOM reference, createRoot
• MDN, Introduction to the DOM