The platform
- DOM
- Document Object Model — the browser's live, in-memory tree of objects
representing the page. Not your HTML file; what the browser built from it.
the live database tables, where your HTML is the .sql dump
- Render
- React calling your component function to produce a description of the UI.
Distinct from the browser painting pixels. A render that produces the
same description causes no DOM change at all.
- Re-render
- React calling a component function again because its state or props
changed. Frequent and normal — not inherently a performance problem.
- Reconciliation
- React comparing the new description against the previous one and issuing
the minimum set of real DOM operations to close the gap.
a migration diff: desired state vs. current state → the ALTERs needed
- Hydration
- Server-rendered HTML arrives already painted; React then attaches event
handlers and state to that existing markup rather than rebuilding it. Only
relevant with SSR (Lesson 6).
The build
- Bundler
- Tool that compiles and packs many source files into few optimised output
files. Vite 8 bundles with Rolldown.
- Vite
- The build tool. Two modes: dev server (
npm run dev, on-demand
compilation + HMR) and production build (npm run build → dist/).
uvicorn --reload, and a packaging step, in one tool
- HMR
- Hot Module Replacement — swapping a changed module into the already-running
page without a full reload, preserving state.
- Transpile
- Translating source into equivalent source in another language — TSX to JS.
Distinct from compiling to machine code, though the boundary is blurry and
people use the words loosely.
- JSX / TSX
- The HTML-looking syntax inside JavaScript. Not a template language: it
compiles to plain function calls.
.tsx is JSX in a TypeScript file.
- SPA
- Single-Page Application. The server sends a near-empty HTML shell; JavaScript
builds everything and handles navigation without full page loads.
- SSR
- Server-Side Rendering. HTML for the first request is generated on the
server, then hydrated in the browser.
node_modules- Installed dependencies. Never committed; regenerate with
npm install.
.venv/site-packages
package.json / lockfile- Declared dependencies and scripts / the exact resolved versions.
pyproject.toml and the lock file — commit both
React
- Component
- A capitalised function taking a props object and returning JSX. The unit of
reuse.
UI = f(state).
- Props
- The single object argument passed to a component. Read-only inside it —
a component never writes to its own props.
keyword arguments, as a frozen dataclass
- State
- A value a component owns that survives between renders and, when changed
through its setter, triggers a re-render. Created with
useState.
- Hook
- A function named
use* that hooks into React's machinery.
Callable only at the top level of a component or another hook — never inside a
condition, loop or nested function.
- Lifting state up
- Moving state to the closest common ancestor of every component that needs
it, then passing it back down. The default answer to "two components need the
same fact".
- Prop drilling
- Passing a prop through components that do not use it, only to relay it
further down. Mildly bad; frequently a symptom of a missing composition rather
than a missing tool.
- Composition /
children
- Passing JSX into a component via the special
children prop, so
the element is built where its data already lives. The first fix for drilling.
- Context
- A value provided by an ancestor and readable at any depth below without
props. For wide, rarely-changing data only.
a ContextVar — dynamic scoping, with the same trade-offs
- Controlled component
- A form input whose displayed value comes from React state, with an
onChange writing back to it. The state is the source of truth, not
the DOM node.
key- A stable identifier on each element of a rendered list, letting React match
items across renders. Use a real id. Array indices break on reorder.
- Pure component
- One whose output depends only on its props, with no side effects during
render. The easy kind to test, reuse and reason about. Aim for these.
Styling
- Utility class
- A class doing one thing —
p-4 is padding: 1rem.
Tailwind's atom.
- Variant
- A prefix scoping a utility to a state or breakpoint:
hover:, focus:, md:, dark:.
The capability inline styles lack.
@theme- The Tailwind v4 block, written in CSS, where you define design tokens.
Replaces the old
tailwind.config.js.
@apply- Bundles utilities into a named CSS class. Treat as a smell — usually a
component wanting to exist.
TanStack Start
- File-based routing
- Files under
src/routes/ define URLs. $param.tsx
marks a URL parameter; __root.tsx is the document shell.
- Loader
- A route's data-fetching function, run before its component renders.
Isomorphic — runs server-side on first load, client-side on
in-app navigation.
- Isomorphic
- The same code running on both server and client. The source of most
"why is this undefined" confusion in SSR frameworks.
- Server function
createServerFn — always executes on the server, callable from
anywhere with end-to-end types. Where secrets and DB access belong.
a FastAPI endpoint whose client is generated for you<Outlet />- The placeholder in a parent route where the matching child route renders.
routeTree.gen.ts- Generated from your file layout. Never edit; never hand-merge.