What React actually is — the component model

React isn't a templating language or a framework that owns your whole page — it's a JavaScript library for describing what the UI should look like, given the current data, and letting React figure out how to make the real DOM match.

Beginner

3 min read

The problem React actually solves

// Manually keeping the DOM in sync with data — the pre-React way
let count = 0;
const button = document.getElementById("counter");
function increment() {
  count++;
  button.textContent = `Clicked ${count} times`; // you, personally, updating the DOM
}

Without React, keeping what's on screen in sync with your data is a manual job — every time a value changes, you write the code that finds the right DOM node and updates it. This is fine for one button; it becomes genuinely unmanageable once a page has dozens of interdependent pieces of state, each needing to update several different parts of the DOM in response to the same change. React's entire premise: describe what the UI should look like for a given piece of data, and let React handle the actual DOM updates itself.

A component: a function that returns a description of UI

function Counter() {
  return <button>Clicked 0 times</button>;
}

A React component is just a JavaScript function that returns a description of what should be on screen — the <button>...</button> syntax is JSX, covered in its own lesson, but for now: this function, when called, produces a description of one button. Nothing here touches the real DOM directly. Counter doesn't know or care how its returned description ends up as pixels on screen — that's entirely React's job, not the component's.

Declarative, not imperative — the actual mental shift

// Imperative: describing HOW to change things, step by step
if (isLoggedIn) {
  loginButton.style.display = "none";
  logoutButton.style.display = "block";
} else {
  loginButton.style.display = "block";
  logoutButton.style.display = "none";
}

// Declarative: describing WHAT should be true, given the current data
function AuthButton({ isLoggedIn }) {
  return isLoggedIn ? <LogoutButton /> : <LoginButton />;
}

The imperative version describes a sequence of steps to transform the current DOM state into the new one — and that sequence has to account for every possible starting state. The declarative version just states the end result directly, given isLoggedIn: "if logged in, show this; otherwise, show that." React re-runs AuthButton whenever isLoggedIn changes and figures out the DOM diff itself — the component never has to reason about transitions between states, only about what's true right now.

Composition: building complex UI out of small, focused functions

function Avatar({ src }) {
  return <img src={src} className="avatar" />;
}
 
function UserCard({ user }) {
  return (
    <div className="card">
      <Avatar src={user.avatarUrl} />
      <span>{user.name}</span>
    </div>
  );
}
 
function UserList({ users }) {
  return users.map((user) => <UserCard key={user.id} user={user} />);
}

A component can render other components inside it, exactly the way an ordinary function can call other functions — UserList renders many UserCards, each of which renders an Avatar. This is composition: complex UI is built by combining small, focused, independently-understandable pieces, not by writing one enormous function that handles every case. Nearly every real React application is, structurally, just this pattern nested many layers deep.

Components are just functions — React's contribution is what happens around them

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

Greeting is genuinely, literally a plain JavaScript function — it takes an input (its props, covered next) and returns a value (a JSX description). What makes it React isn't anything special about the function itself; it's that React's rendering engine knows how to call this function, take its return value, compare it against what's currently on screen, and update only the parts of the real DOM that actually need to change. That comparison-and-selective-update process — reconciliation — is the part of React actually worth learning as a mechanism, not just "how to write JSX," and it's what the render-cycle lesson later in this domain covers directly.