Frontend Master

JavaScript Curriculum

Chapter 3›What is React· Lesson 1

+50 XP

What is React

easy

~25 min·50 XP·Virtual DOM, JSX, component model, declarative UI

The coffee shop menu works with vanilla DOM manipulation, but every feature adds more querySelector calls and manual DOM updates. React solves this — describe the UI as a function of state, and React handles all the DOM work.

What is React

React is a JavaScript library for building user interfaces. Released by Facebook in 2013, it introduced a new way of thinking about UI — instead of manually updating the DOM, you describe what the UI should look like and React figures out how to get there efficiently.

The Virtual DOM — Why React Exists

Vanilla DOM manipulation works, but it gets messy fast. Every feature means more querySelector calls, more manual state tracking, more subtle bugs. React solves this with the Virtual DOM:

virtual-dom.jsx

👤

User clicks "Add to Cart"

React synthetic event fires

⚡

setCartCount(count + 1)

State update queued

🌳

React builds new Virtual DOM

Lightweight JS object tree — fast

🔄

Diff: old tree vs new tree

Only find what actually changed

🎯

Apply minimal DOM patches

Touch only the 2 changed nodes

🎨

Single browser repaint

One optimised layout pass

You describe what the UI should look like. React figures out the minimum DOM changes needed.

ℹ️Virtual DOM is an implementation detail

You do not interact with the Virtual DOM directly. It is React's internal optimisation — a lightweight JavaScript object tree that React diffs against the previous version to find the minimum set of real DOM changes needed. You just write components and update state.

JSX — HTML in Your JavaScript

React introduces JSX — a syntax extension that lets you write HTML-like markup directly in JavaScript. Babel compiles it to React.createElement() calls before the browser sees it:

jsx-transpiler.jsx

<h1 className="title">Hello React</h1>

💡 Every JSX element becomes a React.createElement() call. JSX is just syntax sugar.

💡JSX is not HTML

JSX looks like HTML but has important differences: `className` instead of `class`, `htmlFor` instead of `for`, all tags must be closed (including `<br />`), and you can embed any JavaScript expression inside `{}`. It compiles to function calls — not strings.

The React Mental Model

Four core ideas that underpin everything in React:

react-mental-model.jsx

𝑓UI = f(state)

A React component is a pure function. Give it the same props and state — it always returns the same UI. React calls your function whenever state changes and updates the screen.

Analogy: Like a spreadsheet formula: =SUM(A1:A10). Change A3, the cell updates automatically. You describe the formula, not the update steps.

// React calls this whenever state changes:
function CartButton({ count }) {
  return (
    <button>
      Cart ({count})
    </button>
  )
}

// You never touch the DOM.
// React handles re-rendering.

⚠️Shift your thinking

The hardest part of learning React is not the API — it is the mental model shift. Stop thinking "find this element and change it". Start thinking "what should the UI look like given this state?" React handles the how. You own the what.

Your Challenge

Write a JSX snippet for a menu card: a div.card containing an h3 with the item name and a p.price with the price. Then rewrite the same thing as nested React.createElement() calls to understand what JSX compiles to.

Challenge

In your own words: what is the Virtual DOM and why does it exist? What does 'declarative UI' mean compared to imperative DOM manipulation? Write a JSX expression that renders a div with a class of 'card' containing an h3 and a p element.

reactvirtual-domjsxdeclarativecomponentsbabelcreateElementone-way-data-flowui-as-function

javascript

Loading editor…

Hit ⌘↵ or click Run to see output here.

What is React

easy

~25 min·50 XP·Virtual DOM, JSX, component model, declarative UI

What is React

The Virtual DOM — Why React Exists

Vanilla DOM manipulation works, but it gets messy fast. Every feature means more querySelector calls, more manual state tracking, more subtle bugs. React solves this with the Virtual DOM:

virtual-dom.jsx

👤

User clicks "Add to Cart"

React synthetic event fires

⚡

setCartCount(count + 1)

State update queued

🌳

React builds new Virtual DOM

Lightweight JS object tree — fast

🔄

Diff: old tree vs new tree

Only find what actually changed

🎯

Apply minimal DOM patches

Touch only the 2 changed nodes

🎨

Single browser repaint

One optimised layout pass

You describe what the UI should look like. React figures out the minimum DOM changes needed.

ℹ️Virtual DOM is an implementation detail

JSX — HTML in Your JavaScript

React introduces JSX — a syntax extension that lets you write HTML-like markup directly in JavaScript. Babel compiles it to React.createElement() calls before the browser sees it:

jsx-transpiler.jsx

<h1 className="title">Hello React</h1>

💡 Every JSX element becomes a React.createElement() call. JSX is just syntax sugar.

💡JSX is not HTML

The React Mental Model

Four core ideas that underpin everything in React:

react-mental-model.jsx

𝑓UI = f(state)

A React component is a pure function. Give it the same props and state — it always returns the same UI. React calls your function whenever state changes and updates the screen.

Analogy: Like a spreadsheet formula: =SUM(A1:A10). Change A3, the cell updates automatically. You describe the formula, not the update steps.

// React calls this whenever state changes:
function CartButton({ count }) {
  return (
    <button>
      Cart ({count})
    </button>
  )
}

// You never touch the DOM.
// React handles re-rendering.

⚠️Shift your thinking

Your Challenge

Challenge

reactvirtual-domjsxdeclarativecomponentsbabelcreateElementone-way-data-flowui-as-function