What is React — Component Model, Virtual DOM and Declarative UI

React is a JavaScript library for building user interfaces, developed by Meta and released in 2013. Its core insight is simple but transformative: instead of imperatively manipulating the DOM when data changes (“find this element, change its text, add this class”), you declare what the UI should look like for a given state (“when loading is true, show a spinner; otherwise show the posts”). React figures out the minimal DOM updates needed. This declarative model — combined with the component abstraction — makes complex UIs manageable, predictable, and reusable.

React’s Core Concepts #

// ── Imperative (vanilla JS) — describing HOW to update ────────────────────────
function updatePostCount(count) {
    const el = document.getElementById("post-count");
    el.textContent = count + " posts";
    if (count === 0) {
        el.style.color = "gray";
    } else {
        el.style.color = "black";
    }
}

// ── Declarative (React) — describing WHAT to show ─────────────────────────────
function PostCount({ count }) {
    return (
        <span style={{ color: count === 0 ? "gray" : "black" }}>
            {count} posts
        </span>
    );
}
// React figures out the DOM updates automatically when count changes
// You only describe the desired output for each possible value of count

React vs the Alternatives #

How React Renders #

// React rendering pipeline:
// 1. You write components (JSX)
// 2. Babel/SWC compiles JSX to React.createElement() calls
// 3. React builds a virtual DOM tree (plain JS objects)
// 4. ReactDOM renders the virtual DOM to the real DOM (initial render)
// 5. On state changes: React re-renders, diffs, and patches the real DOM

// JSX:
const element = <h1 className="title">Hello, {name}!</h1>;

// Compiled to:
const element = React.createElement(
    "h1",
    { className: "title" },
    "Hello, ", name, "!"
);

// Virtual DOM node (just a JS object):
// { type: "h1", props: { className: "title", children: ["Hello, ", name, "!"] } }

// React compares this object to the previous render and updates only
// the text node in the real DOM if 'name' changed — not the whole h1

Common Mistakes #

Mistake 1 — Treating React as a full framework #

❌ Wrong — expecting built-in routing, HTTP client, or server-side rendering:

React is a view library. You need React Router for navigation, fetch/axios for HTTP, and Next.js for SSR. Plan your library stack before starting a new project.

✅ Correct — understand what React does (UI components) and what it does not do, then choose the right additional libraries.

Mistake 2 — Directly mutating the DOM alongside React #

❌ Wrong — mixing jQuery or document.getElementById with React components:

// React manages the DOM. Manually mutating it bypasses React's virtual DOM
document.getElementById("my-react-div").innerHTML = "changed";
// React's next re-render overwrites this change → unpredictable!

✅ Correct — always use React’s state and refs to interact with the DOM inside React components.

Quick Reference #