Glossary

92 terms from React Basics, in plain words, each with the chapter that teaches it.

Search the glossary

A

AbortController: A browser object that can cancel a `fetch` request. In an effect's cleanup, the search aborts the old request when `query` changes, and the cancelled fetch throws an error named `AbortError`, which the code ignores.
ARIA attributes (Accessible Rich Internet Applications): Attributes starting with `aria-` that give screen readers extra information, such as a button's name, whether a panel is open, or which field has an error. In JSX they keep their hyphens.

B

Boolean attributes (disabled): Attributes like `disabled` can take a condition directly, such as `disabled={qty <= 1}`, and React adds or removes the attribute to match.

C

Children: A special prop holding whatever is written between a component's opening and closing tags. A `Section` component shows it with `{children}` under its heading.
className / htmlFor: The JSX spellings of the HTML attributes `class` and `for`, used because those two words are JavaScript keywords. Most other attributes are camelCase, such as `tabIndex`.
Cleanup function: The function an effect returns. React runs it before the effect runs again and when the component unmounts, for example to stop a timer or abort a request.
Component: A function that returns JSX describing part of the screen, such as `ProductCard`. Its name starts with a capital letter and you use it like a tag.
Component tree: The nesting of components inside components, such as `App` containing `ProductList`, which contains `ProductCard`. A component that renders another is its parent and the one it renders is its child.
Computed property name: Square brackets around an object key, as in `{ [name]: value }`, which use the variable's value as the key. This lets one `handleChange` update whichever form field changed.
Conditional rendering: Showing different JSX depending on a condition, such as "Sold out" for stock 0. React has no special syntax for it: you use `if`, the ternary `? :` or `&&`.
Controlled input: A form field whose value comes from state: `value={name}` shows it and `onChange` stores each change. The state is the single source of truth for the field.
CSS custom property: A CSS value whose name starts with `--`, read in CSS with `var(...)`. The product card sets `--accent` from a prop with an inline style, and the CSS falls back to dark brown if it isn't set.
CSS Module: A CSS file whose name ends in `.module.css`. Vite makes each class name unique to that file, so you use `className={styles.card}` and classes can't clash between components.

D

Declarative: Code that describes what the screen should look like for the current data, leaving React to update the page. This is the opposite of imperative code.
Default and named exports: A file's one default export is imported without braces (`import ProductCard from "./ProductCard.jsx"`), while named exports are imported with braces (`import { money } from "./money.js"`). A common pattern is to give each component its own file with a default export.
Default value (props): A value a prop gets when the parent doesn't pass one, written in destructuring as `size = "small"`.
Dependency array: The array passed as `useEffect`'s second argument. It lists the values the effect uses, and the effect runs again only when one of them changes. `[]` means run once after the first render.
Derived value: A value worked out from props or state during rendering instead of being stored in its own state, such as the cart count or the filtered product list. It can never be out of date.
Destructuring props: Unpacking the props object right in the parameter list, as in `function ProductCard({ name, priceCents })`. It shows exactly which props the component expects.
dist: The folder `npm run build` creates, holding the finished site (HTML, CSS and JavaScript) that any browser can run. You upload it to a host.

E

Early return: Using `if` with `return` at the start of a component to output something different, such as "Your cart is empty.", so the rest of the function doesn't run. Hooks must still be called before any early return.
Element (React element): The small object JSX produces to describe what to show. React turns these descriptions into real DOM elements.
Event handler prop: A prop such as `onClick` that takes a function React calls when the event happens. You pass the function itself, not a call like `handleAdd()`.
Expo: A framework built on React for making phone apps. It lets you build mobile apps with React components instead of web page elements.
Expression / statement: An expression is code that produces a value (a variable, sum, function call or ternary) and can go inside JSX braces. A statement such as `if` or `for` produces no value and can't.

F

Fast Refresh: The name for Vite's hot module replacement in React files: it swaps in your edited component without reloading the page, keeping what the component remembers, such as a count.
fetch: The browser function that makes HTTP requests. In React it's called inside an effect or event handler, and the code checks `response.ok` and throws on failure.
FormData: A browser object that reads every field of a form at once, as in `new FormData(e.target)`. It's used with uncontrolled inputs.
Fragment: An empty tag `<>...</>` that groups several elements into one parent without adding an extra element to the page. The long form `<Fragment key={...}>` can take a key.
Framework vs library: A library is code you call when you need it, and a framework calls your code and decides how the whole app is organized. React is a library, and Next.js is a framework built on it.

H

Hook: A React function whose name starts with `use`, such as `useState`, that lets a component use a React feature. React tracks hooks by call order, so they follow the rules of hooks.
HTTP status codes: Three-digit numbers a server sends back with its response to say how the request went. Examples are 201 (order created), 400 (the request has problems) and 500 (server failure); `response.ok` in `fetch` is true only for codes 200 to 299.

I

Immutable update: Making a new object or array with the change instead of editing the old one, for example `setCart([...cart, item])`. React re-renders only when state is a different value.
Imperative: Code that gives the browser each step, such as `querySelector` then `textContent`. If you forget the step that updates the page, it shows old data.
Initial value: The value passed to `useState`, used only on the first render. Later changes to what you passed in don't reset the state.
Inline style: The `style` prop, which takes an object with camelCase properties, as in `style={{ marginTop: 8 }}`. A plain number means pixels, and inline styles suit values worked out at run time.

J

JSON: A text format for data. The code turns objects into JSON text to send an order or save the cart, and `response.json()` or `JSON.parse` turn JSON text back into data.
JSX: The HTML-like syntax inside components. It's really JavaScript: Vite turns each tag into a function call that makes a React element.

K

key: A special prop that names each item in a list so React can match old and new items. It should be unique among siblings and stable, such as the SKU, not the array index. Changing a component's key resets its state.

L

Lazy initial state: Passing a function to `useState`, as in `useState(() => loadCart())`, so React calls it only on the first render rather than on every render.
Lifting state up: Moving shared state to the closest common parent and passing it down as props, with handler functions for children to report changes. Kettle & Crane's cart lives in `App` so several components can use it.
Linting (oxlint): A tool that checks your code for likely mistakes without running it. `npm run lint` uses oxlint, included in the Vite template, and catches things like a hook inside an `if`.
Live region: An element with `role="status"` whose text changes are announced by screen readers, such as "Added Speckled blue mug" or "Loading products...".
localStorage: A browser feature that saves text under a name so it survives page reloads. The shop saves its cart there with `setItem` and reads it back with `getItem`.

M

Mount / unmount: A component mounts when React first adds it to the page and unmounts when React removes it. Effects start on mount and their cleanup runs on unmount.

N

Next.js: A framework built on React that adds pages, server rendering and deployment. It has its own book, *Next.js Basics in 50 Pages*.
Node.js: A program that runs JavaScript outside the browser. It is needed to run tools such as Vite and npm, and the LTS (long-term support) version is the one recommended for most users.
noValidate: React's spelling of the form attribute `novalidate`. It turns off the browser's own validation bubbles so the component can show its own error messages.
npm: Node's package manager and script runner. `npm install` downloads the project's packages and `npm run dev` starts the dev server.
npm run build: Vite commands: `npm run build` makes the finished site in `dist` and `npm run preview` serves it locally at port 4173 so you can try it.

O

One-way data flow: Data moves down from parents to children as props, and children report back by calling handler functions passed as props. This keeps each piece of state owned by one component.
Other styling approaches (Tailwind CSS, CSS-in-JS): Alternatives to plain CSS files and CSS Modules for styling React components. Tailwind CSS styles with small ready-made utility classes such as `className="p-3 rounded-lg"`, while CSS-in-JS libraries let you write styles inside JavaScript.

P

PascalCase: A naming style with a capital letter at the start of each word, like `ProductCard`. React components must be written this way.
Plugin: An add-on that teaches a tool something new. Vite's React plugin lets it understand JSX.
POST: An HTTP method for sending data to a server rather than reading it. The shop posts an order with a JSON body and a `Content-Type: application/json` header telling the server how to read it.
preventDefault: An event method that stops the browser's own action, such as reloading the page on form submit or following a link.
Prop drilling: Passing props through several components that don't use them just to reach a deep one. A couple of layers is fine, and React's context lets a deep component read a value directly when there are more.
Propagation: Events bubble up from an element to its parents. `e.stopPropagation()` stops that, so clicking Add doesn't also trigger the card's own click handler.
Props: A component's read-only inputs, passed like HTML attributes. `ProductCard` receives a `product` prop and must never change it.
Proxy (Vite dev server): A Vite setting that forwards requests starting with `/api` from the dev server to the practice server on port 8080, so `fetch("/api/...")` works.
Pure component: A component that returns the same JSX for the same props and changes nothing outside itself while rendering. Work outside React goes in handlers or effects.

R

React: A free, open-source JavaScript library made by Meta for building user interfaces from components. You describe the screen for the current data and React updates the page.
react and react-dom packages: React comes as two packages: `react` holds the parts for writing components, such as `useState`, and `react-dom` puts components on a web page.
React Developer Tools: A browser extension that adds a Components tab to DevTools. It shows the component tree and each component's props and state.
React Server Components and TanStack Query: Alternatives to fetching data inside an effect. React Server Components fetch data on the server, while TanStack Query is a library that handles fetching and caching on the client.
reduce / some: Array methods used on the cart. `reduce` combines all items into one value, such as a total, and `some` returns true if any item passes a test.
Render / re-render: A render is React calling your component to find out what to show, and a re-render is calling it again after data changes. React then updates only the parts of the page that differ.
Rendering lists with map: Turning an array into elements by calling `map` inside JSX braces, with a `key` on each item. Use `filter` first to show only some items, and sort a copy rather than the original.
Root (createRoot): `createRoot(element)` makes the root: the place on the page where React takes charge. Everything inside `<div id="root">` belongs to React.
Rules of hooks: Call hooks only at the top level of a component, before any `return`, never inside an `if`, loop or nested function. That way every render calls the same hooks in the same order.

S

Self-closing tag: A tag with no content that closes itself with `/>`. In JSX every tag must be closed, so `<img>` becomes `<img />`.
Setter function: The second item `useState` returns, such as `setCount`. Calling it with a new value stores it and asks React to render again.
Short-circuit && in JSX: Writing `condition && <p>...</p>` to show something or nothing. Make the left side a real comparison like `count > 0`, because React displays a `0`.
Side effect: Work outside React's rendering, such as fetching data, timers, writing to `localStorage` or changing `document.title`. Reactions to clicks go in handlers, and effects are for things that happen because the component is on screen.
Single source of truth: Keeping each piece of data in exactly one place, such as the cart in `App`, so every part of the page that reads it agrees.
SKU (stock keeping unit): A short code that identifies a product, such as "ESP-12" at Kettle & Crane. It works well as the unique key for list items and for finding a product in the cart.
Snapshot (state): During one render, a state variable has a fixed value, like a photo. Calling the setter asks for a new render rather than changing the variable in the running code, so three `setBags(bags + 1)` calls all set the same value.
Spread-based update patterns: Copying an object or array with `...` and then changing one part, such as `{ ...options, giftWrap: true }` or `[...cart, item]`. Combined with `filter` and `map`, this is how you update state without editing the old value.
State: Data a component remembers between renders. When state changes, React renders the component again.
Static host: A hosting service that serves a built site's files as they are. You upload `dist` there, though the `/api` calls then need a real server.
Status state (loading / ready / error): A state variable holding `"loading"`, `"ready"` or `"error"` while data is fetched, so the component can show a loading message, the list, or an error with a Try again button.
StrictMode: A React wrapper that runs extra checks in development only, such as mounting each component, unmounting it and mounting it again, to catch missing cleanup. It does nothing in the built site.
Synthetic event: React's wrapper around the browser event, passed to handlers as `e`. It works the same in every browser and has `e.target`, `e.key` and `e.preventDefault()`.

T

Ternary operator: The expression `condition ? a : b`, which picks one of two values. It can go inside JSX braces to choose text or elements.
Timers (setInterval / setTimeout): Browser functions that run code repeatedly (`setInterval`) or once after a delay (`setTimeout`). Each returns an id that `clearInterval` or `clearTimeout` uses to stop it, which is why effects clean them up.

U

Uncontrolled input: A form field that keeps its own value in the DOM, given a starting value with `defaultValue`. You read the values on submit, for example with `FormData`.
Updater function: A function passed to a state setter, such as `setBags((b) => b + 1)`. React calls it with the latest value, so several updates in a row or timer updates add up correctly.
URLSearchParams: A browser helper that builds a URL query string such as `q=mug` from an object, used to add the search text to the request address.
useEffect: The hook that runs a function after React updates the page, used for side effects like loading products. A dependency array controls when it re-runs, and a returned cleanup function undoes it.
useState: The hook that gives a component state. `useState(0)` returns the current value and a setter function, and calling the setter makes React render again.

V

Vite: The build tool that creates the React project, runs the dev server with Fast Refresh and turns JSX into plain JavaScript. Its settings, including the plugin and proxy, live in `vite.config.js`.

X

XSS (cross-site scripting): An attack that injects HTML or script into a page. JSX escapes text values, so a customer's note shows as plain text instead of becoming markup.