ToolPopToolPop
React · Lesson 1 of 8

Why React, in one chapter

9 min readUpdated 24 Jun 2026

In 2013, building a UI meant writing document.getElementById, then innerHTML, then forgetting to clear an event listener and leaking memory by Tuesday. React showed up and said, "describe what the screen should look like, I will figure out the DOM."

That single shift is why React is still the default in 2026. Most React jobs in Bengaluru still ask for it by name.

The one-paragraph case

  • Declarative UI. You write what the screen looks like for a given state. React diffs and updates the DOM. You stop babysitting appendChild.
  • Components. A button, a card, a whole page; all just functions that return JSX. You build big things by composing small things.
  • The ecosystem. Routing, forms, data fetching, animations, charts. Whatever you need, someone shipped a library and 4,000 people use it in production.

Vanilla DOM vs React

Same job, building a counter.

jsx
// Vanilla
const btn = document.querySelector('#btn');
let n = 0;
btn.addEventListener('click', () => {
  n++;
  btn.textContent = `Count: ${n}`;
});
jsx
// React
function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>Count: {n}</button>;
}

The vanilla version is fine for one button. Now imagine 40 buttons, a search bar, and a cart that updates when any of them change. That is where React stops being optional.

Why React actually won

  • Facebook backed it. Real money, real production load, real bug fixes.
  • JSX felt obvious. HTML in JS sounded heretical in 2013; today it is the norm.
  • Hooks (2019) killed the class-component complexity and pulled in everyone who had walked away.
  • Next.js gave React routing, SSR, and deployment in one box.

React is a library, not a framework. Next.js, Remix, and friends are the frameworks built on top.

When you do NOT need React

  • A landing page with three sections and a contact form. Use plain HTML, or Astro. React is overkill.
  • A blog or docs site. Astro or Hugo. Faster, simpler, better SEO out of the box.
  • A tiny interactive widget on an otherwise static page. Alpine.js or vanilla JS. Shipping 40 KB of React for a dropdown is rude to your users on 4G.

The rule of thumb: if the UI has many interactive pieces that share state, reach for React. If it is mostly content, do not.

What this track covers

Seven more short lessons. Components, state, effects, lists and forms, lifting state, fetching data, routing and deploy. By the end you will be able to read any React codebase without that "what is happening" feeling.

Open the playground on the right when each lesson has one. Type, run, break things. That is how it sticks.

Free tools you can use while you learn

Chai0/1 done

Watching quietly. Tap me if you want a tip.

React Playground
preview

Try this (0 of 1 done)

  1. 1

    Change the greeting to say "Hello, your name" (use your name).

    show answer
    function App() {
      return <h2>Hello, Shailesh!</h2>;
    }