React Introduction

What is React?#

React is a JavaScript library for building user interfaces — not a full framework. That distinction matters: React itself only handles one job, rendering components and keeping them in sync with your data. Routing, state management beyond a single component tree, and data fetching are all separate libraries you choose and wire in yourself (or get bundled for you by a meta-framework like Next.js).

React's core idea is composition: you build small, self-contained pieces called components, then assemble them into a full UI the same way you'd assemble a page out of HTML elements. A component describes what the UI should look like for a given set of inputs — React handles turning that description into actual DOM updates.

function Greeting() {
  return <h1>Hello, NOA Labs!</h1>;
}

That <h1>Hello, NOA Labs!</h1> inside a JavaScript function isn't a string and isn't HTML — it's JSX, a syntax extension that compiles to plain JavaScript function calls. The next page covers JSX in detail.

The virtual DOM, briefly#

Directly manipulating the real browser DOM is slow relative to plain JavaScript object operations. React's approach: it keeps an in-memory representation of the UI — the virtual DOM — and whenever your data changes, it builds a new version of that in-memory tree and diffs it against the previous one. Only the actual differences get applied to the real DOM.

You'll rarely think about the virtual DOM directly while writing React — it's an implementation detail, not an API you call. What matters practically is the mental model it enables: you describe what the UI should look like right now, given the current state, and React figures out how to get the real DOM there. You never manually write element.appendChild(...) or element.classList.add(...) in React code.

Installing React with Vite#

The modern, recommended way to start a new React project is Vite, a fast build tool that replaced the older Create React App:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

This scaffolds a project with a dev server that supports instant hot module reloading — save a file, see the change in the browser immediately without a full page reload. For a TypeScript project, use --template react-ts instead.

The generated project's key file is src/main.jsx, which mounts your root component into the page:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

createRoot attaches React to a single DOM node (usually a <div id="root"> in index.html), and from that point on, React owns everything rendered inside it. <StrictMode> is a development-only wrapper that helps surface bugs early (like impure rendering) by intentionally double-invoking certain functions — it has no effect in production builds.

A minimal component#

A React component is just a JavaScript function that returns JSX describing what should appear on screen:

function WelcomeCard() {
  const name = "Ada";

  return (
    <div className="card">
      <h2>Welcome, {name}!</h2>
      <p>You're now learning React.</p>
    </div>
  );
}

export default WelcomeCard;

A few things to notice already, each covered in depth on the next page: the function name is capitalized (WelcomeCard, not welcomeCard) — React uses that capitalization to distinguish your components from plain HTML tags. The className attribute is used instead of class. And {name} embeds a plain JavaScript value directly into the markup.

That's the entire mental model to start: components are functions, they return JSX, and React keeps the rendered output in sync with whatever data those functions use.

Common mistakes#

• Calling React "a framework" — it's a UI-rendering library. Routing (React Router), global state (Redux/Zustand), and data fetching are separate concerns you add yourself.
• Forgetting to capitalize a component's function name — welcomeCard renders as a literal, invalid <welcomeCard> HTML tag instead of being treated as a component.
• Expecting to manipulate the DOM directly (document.querySelector(...)) inside a component — in React, the DOM is a byproduct of your data, not something you touch directly.