What is React?

The problem React solves, the declarative mindset, and why half the web runs on it.

You already know how to change a webpage with JavaScript — you did it in JavaScript Fundamentals: grab an element with document.getElementById, set its textContent, maybe toggle a class.

That works great for one like button. Now picture a Twitter-style feed: fifty posts, each with a like count, a comment count, a follow button, and a dark-mode toggle that restyles everything. Every piece of data is shown in several places, and every click has to update all of them by hand. Miss one textContent update and your page quietly shows wrong numbers.

Facebook's engineers hit exactly this wall in 2011. Their answer became React — today the most-used tool for building web interfaces, and the reason this course exists.

Multiple choice

Quick warm-up from JavaScript Fundamentals: in plain JavaScript, how do you update what a page shows after data changes?

AYou manually find the element and change it, e.g. element.textContent = newValue
BThe page re-reads your variables automatically
CYou edit the HTML file and the browser picks it up
DYou call refresh() on the variable

React's big idea: **stop telling the browser how to update — describe what the page should look like** for the current data, and let React do the updating.

// Plain JS (imperative — you list the steps)
const btn = document.getElementById('like-btn');
btn.textContent = 'Liked (' + count + ')';
btn.style.color = 'red';

// React (declarative — you describe the result)
function LikeButton() {
  return <button style={{ color: 'red' }}>Liked ({count})</button>;
}

That HTML-looking thing inside JavaScript is called JSX — you'll learn it properly two lessons from now, so don't worry about its rules yet. The style with steps is called imperative ("do this, then this"); React's style is declarative ("this is what I want — you figure out the steps"). When count changes, React redraws the button for you. No getElementById, ever.

Multiple choice

Which best describes React's programming model?

ADeclarative — you describe what the UI should look like; React handles the updates
BImperative — you tell React each DOM step to perform
CReactive — React polls the server for changes
DCompiled — React converts JavaScript to CSS

The second big idea: components. A React app is built like a LEGO castle 🧱 — out of small, self-contained bricks:

a LikeButton brick
a Post brick (which uses LikeButton inside)
a Feed brick (which stacks many Post bricks)

Each component is one reusable piece of UI. Define the brick once, use it a hundred times. Fix a bug in the brick, and every copy is fixed. This LEGO-brick picture is the single most important mental model in React — we'll come back to it for the whole course.

React itself is a library (a toolbox you call from your code — not a framework that calls you). It's also just the beginning of an ecosystem you'll meet later: Next.js builds full websites on top of React, and React Native builds iPhone/Android apps with the exact same component skills you're learning here.

Library vs framework: you call a library; a framework calls you

One more piece of the puzzle: how does React update the page fast? Touching the real browser DOM is slow, so React keeps a lightweight copy of it in memory — the Virtual DOM.

When your data changes, React:

1. Builds a fresh Virtual DOM tree describing the new UI
2. Diffs it against the previous tree (compares the two to find what changed)
3. Applies only those minimal changes to the real page

So if one like count changed from 5 to 6, React updates exactly one text node — not the whole feed. You never see this machinery, but knowing it exists explains a lot of React's rules later.

How can diffing be fast? Type assumptions plus a key hint

Fill in the blank

React keeps an in-memory copy of the page called the _____ DOM, so it can update only what actually changed.

Recap 🧠

Plain JavaScript makes you update the page by hand — at fifty interactive pieces, that bookkeeping collapses.
React is declarative: you describe what the UI should look like for the current data; React performs the DOM updates.
Apps are built from components — reusable LEGO bricks 🧱 of UI, defined once and used everywhere.
The Virtual DOM is React's in-memory copy of the page; React diffs it to patch only what changed.
React is a library focused on UI; Next.js and React Native build on the same skills.

Next lesson: enough theory — you'll create and run a real React app on your machine.

// Plain JS (imperative — you list the steps) const btn = document.getElementById('like-btn'); btn.textContent = 'Liked (' + count + ')'; btn.style.color = 'red'; // React (declarative — you describe the result) function LikeButton() { return <button style={{ color: 'red' }}>Liked ({count})</button>; }

The second big idea: components. A React app is built like a LEGO castle 🧱 — out of small, self-contained bricks:

a LikeButton brick
a Post brick (which uses LikeButton inside)
a Feed brick (which stacks many Post bricks)

Library vs framework: you call a library; a framework calls you