PHASE 0Beginner ~21 min· topic 1 of 4

Topic 0.1

What React Is and Why It Exists

In one line

React is a JavaScript library for building user interfaces: you describe what the screen should look like for the current data, and React updates the real page for you whenever that data changes.

Think of it like this

A scoreboard at a cricket match. Nobody climbs up and repaints single digits by hand every ball. The operator only types the new score, and the board shows it. React is the scoreboard machinery: you give it the new data (the score), it works out what on the screen must change and changes exactly that.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

React: A JavaScript library that builds user interfaces from components and keeps the page updated when data changes.
User interface (UI): Everything you see and use in an app: text, buttons, lists, forms.
DOM: The browser's live tree of the page's elements. JavaScript can read and change it.
Imperative code: Step-by-step instructions saying exactly how to change the page: find this, change that.
Declarative code: Code that describes what the result should look like and lets a tool work out the steps.
State: Data in your app that can change over time, like a count, the text in a box or a list of items.
Library: A ready-made set of code you call to do one job. React's job is the UI.
Framework: A bigger toolkit that shapes the whole app (routing, data loading, building). Next.js is a React framework.

Step by step

01The job: a counter with a message

Imagine a tiny app: a button that counts clicks, and a message that says Keep going! until you reach 3 clicks, then You did it!. Two things on screen depend on one piece of data: the count.

02The plain JavaScript way: instructions for every change

With the DOM you keep a variable, and on every click you must remember to update each place that shows it. Add a third place later (say, a progress bar) and you must find every click handler and add one more instruction.

counter.jswhole filejavascript

let count = 0;
button.addEventListener("click", () => {
  count = count + 1;
  countText.textContent = count;            // instruction 1
  message.textContent = count >= 3          // instruction 2
    ? "You did it!"
    : "Keep going!";
});

03The React way: describe the screen once

In React you write one function that returns what the screen should look like for a given count. You never write "change the text". You change the state, and React calls your function again.

Counter.jsxwhole filejsx

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Clicks: {count}</button>
      <p>{count >= 3 ? "You did it!" : "Keep going!"}</p>
    </div>
  );
}

04React compares and updates only what changed

When the count changes, React runs Counter again and gets a new description of the screen. It compares the new description with the previous one and changes only the parts of the real page that differ: here, two pieces of text. This comparing step is called reconciliation.

React compares and updates only what changeddiagram

Rendering diagram…

05Why this scales

In a real app there are hundreds of pieces of state and thousands of elements. Writing an instruction for every possible change grows out of control. Describing the screen for the current state stays the same size no matter how many ways the state can change. That is the whole reason React exists.

Try it yourself

1
Add a third place that shows the count
In the React example, add <p>Twice the clicks: {count * 2}</p> under the message. Predict: do you need to change the click handler? Click and check.
Now try the same in the plain JavaScript example. You need a new element and a new line inside the click handler.
2
Change the rule
Make the React message say You did it! at 5 clicks instead of 3. One number changes and the whole screen follows.
3
Feed the function different data
In the battery example, add <Battery level={0} /> and <Battery level={100} />. Which colour does each get, and why?

Code & diagrams

Plain JavaScript: you write every update yourself New tab

Two places show the count, so every click needs two update instructions. Forget one and the page lies.

Preview

Press Run to see the page.

Console

Nothing logged yet.

React: describe the screen, React keeps it updated New tab

The same app in React. There is no "change the text" code anywhere: the screen is worked out from `count` every time.

Preview

Press Run to see the page.

Console

Nothing logged yet.

UI = f(state): the same function, different data New tab

`Battery` is a function from a number to a picture. Change a `level` and only that battery changes.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Imperative versus declarativediagram

Rendering diagram…

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Forget one update in the plain JavaScript version

In the plain JavaScript example, delete the line msg.textContent = ... and click the button five times.

terminal

$ Preview

── what you'll see ──

Clicks: 5

Keep going!

Myth vs fact

Myth

React is a programming language.

Fact

React is a JavaScript library. You write JavaScript (plus JSX, a small syntax extension you'll meet in Phase 1); React is code you import and call.

Myth

React makes every website faster.

Fact

React makes complex interactive UIs easier to build correctly. A plain HTML page with no JavaScript is usually faster to load than the same page built with React.

Myth

React redraws the whole page on every change.

Fact

React re-runs your component functions, but it changes only the DOM elements whose output actually differs.

Myth

You must learn a framework like Next.js before React.

Fact

Learn React first. Frameworks add routing, data loading and server rendering on top of the same React ideas.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
The declarative model is what makes React portable: the same component model drives the DOM (react-dom), phone apps (React Native), PDFs, terminals and 3D scenes. Each target is a different renderer; the core react package knows nothing about the DOM.
▸
"React only updates what changed" is a guarantee about the DOM, not about your code: your component functions do re-run. Keeping them cheap and pure is what lets React re-run them freely (Phase 2.6 and Phase 16).
▸
Since React 18 rendering can be interruptible (concurrent rendering): React may start rendering an update, pause for something more urgent such as typing, and continue later. This is only safe because components describe UI instead of mutating it.

Remember this

1
A user interface (UI) is everything a person sees and touches in an app: text, buttons, lists, forms. In a web app the UI is made of DOM elements. The DOM (Document Object Model) is the browser's live tree of the page's elements, which JavaScript can read and change.
2
The hard part of a UI is not drawing it once. It is keeping it in sync as things change: a new message arrives, an item is deleted, a form field becomes invalid. With plain JavaScript you write imperative code: step-by-step instructions such as "find this element, change its text, add this class, remove that row". Every change needs its own instructions, and it is easy to forget one, so the page and the data drift apart.
3
React lets you write declarative code instead. Declarative means you describe *what* the result should be, not *how* to get there. You write a function that says "for this data, the screen looks like this". When the data changes, React calls your function again and updates the page to match. People summarise this as UI = f(state): the interface is a function of the state (the data that can change).
4
React is a library, not a framework. A library is a tool you call for one job; React's job is turning data into UI and keeping it updated. A framework decides more of the app for you: routing, data loading, the build. Frameworks built on React, such as Next.js and React Router, add those parts. You'll meet them in Phases 13 and 20.
5
React was created at Facebook (now Meta) and released as open source in 2013. Today it powers Facebook, Instagram, WhatsApp Web, Netflix, Airbnb, Discord and countless smaller sites. It also runs outside the browser: React Native uses the same ideas to build phone apps.
6
React is not magic and not always needed. A mostly static page (a blog post, a landing page) works perfectly with HTML and CSS. React shines when a page has lots of interactive state: dashboards, editors, chat apps, shops with filters and carts.

Explain it without notes

What problem does React solve that plain DOM code makes hard?

Explain the difference between imperative and declarative UI code with an example.

What does "UI = f(state)" mean?

Is React a library or a framework? What's the difference?

Practice

Add a Reset button to the React counter that sets the count back to 0.

Write a Battery usage that shows a battery at 25%. What colour is it?

Trade-offs

↔
React adds a JavaScript download (about 60 KB gzipped for react + react-dom in production) and a build step. For mostly static pages, plain HTML and CSS is lighter.
↔
Declarative code is easier to keep correct, but you give up direct control over each DOM operation. For the rare cases that need it, React has escape hatches (refs, Phase 8).

Done when you can

I can explain what problem React solves.
I can tell imperative code from declarative code.
I can explain UI = f(state) in my own words.
I know React is a library and that frameworks like Next.js build on it.
I can name the kinds of apps where React helps most.

Command Palette

Words you'll meet

Step by step

01The job: a counter with a message

02The plain JavaScript way: instructions for every change

03The React way: describe the screen once

04React compares and updates only what changed

05Why this scales

Try it yourself

Add a third place that shows the count

Change the rule

Feed the function different data

Code & diagrams

Break it on purpose

Forget one update in the plain JavaScript version

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can