React#

React is a JavaScript library for building user interfaces. It solves one specific problem: how do you keep a complex UI in sync with changing data without manually managing every DOM update?

React is not a framework for the whole application. It does not handle routing, data fetching, or styling. It focuses entirely on the view layer — rendering UI and reacting to state changes.

The Problem React Solves#

Without React, updating the UI means manually reaching into the DOM:

document.getElementById("count").innerHTML = newCount
document.getElementById("status").className = isActive ? "on" : "off"
document.getElementById("button").disabled = !canSubmit
// × 50 more elements that all depend on the same state...

This is manageable for simple pages. For complex dashboards with dozens of components that all depend on shared data, manually tracking what needs updating when data changes becomes unmaintainable.

The React Model#

React flips the model. Instead of you manipulating the DOM, you describe what the UI should look like for a given state, and React handles the DOM updates:

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  )
}

When count changes, React re-renders only what needs to change. You declare the outcome; React figures out the DOM manipulation.

JSX#

The HTML-like syntax in React components is JSX — it is not HTML, and it is not valid JavaScript. It is a syntax extension that Vite (via Babel/esbuild) transforms into actual JS function calls during the build:

// What you write (JSX):
const el = <button onClick={handleClick}>Click me</button>

// What it compiles to (actual JS):
const el = React.createElement('button', { onClick: handleClick }, 'Click me')

JSX is another example of code that never reaches the browser as written — it is consumed by the build tool and replaced. Files containing JSX use the .tsx extension (TypeScript + JSX) or .jsx (plain JS + JSX).

The Virtual DOM#

React maintains a virtual DOM — a lightweight in-memory representation of the actual DOM. When state changes, React:

Builds a new virtual DOM tree representing the updated UI
Diffs it against the previous virtual DOM (the “reconciliation” step)
Applies only the minimal set of actual DOM changes required

This is React’s core performance optimization. Without it, any state change would require re-rendering the entire page.

React Runs in the Browser#

React is just a JS library — a set of functions bundled into your application by Vite. When the browser downloads and executes your bundle.js, React’s engine is in there alongside your component code. The browser sees no distinction between “React code” and “your code” — it’s all just JS running in V8.

There is no separate React process or runtime. npm install react downloads React’s source files into node_modules/. Vite bundles them with your code. The browser executes the result.

Styling#

React has no opinion on styling. Common approaches:

Plain CSS — import a .css file, classes apply globally
CSS Modules — scoped per component, Vite handles the transformation
Tailwind CSS — utility classes in the JSX markup
styled-components / Emotion — CSS-in-JS libraries

None of these are React features. They are ecosystem conventions that work alongside React because Vite can transform them.

Where React Fits in the Stack#

Source code (.tsx files with JSX + TypeScript)
      ↓ Vite compiles + bundles (on your machine, via Node)
dist/bundle.js (contains React engine + your components as plain JS)
      ↓ Netlify serves
User's browser downloads bundle.js
      ↓ V8 executes it
React engine starts, mounts your app, manages DOM updates