# Frontend vocabulary

> The words under the UI. Components, state, data, tooling.

UI vocabulary names what you see; frontend vocabulary names how it is wired. Components, state, data, routing, styling, tooling, quality. The terms that turn a feature request into buildable instructions.

Source: https://www.juanmnl.com/notes/frontend-vocabulary.html

## Building Blocks

The atoms of a modern frontend. Everything you see is made of these.

### Component

A self-contained, reusable piece of UI with its own logic and markup. The core unit of React, Vue, Svelte.

Say: "Build this as a reusable Button component."

### Props

Inputs passed into a component to configure it, like function arguments for UI.

Say: "Add a 'variant' prop for primary/secondary."

### State

Data a component owns that can change over time and triggers a re-render when it does.

Say: "Track the open/closed state locally."

### Children / slot

Content passed between a component's tags, rendered wherever it defines a slot.

Say: "Let the card accept arbitrary children."

### Render

The process of turning component code + data into actual on-screen elements.

Say: "Render the list from the items array."

### JSX / markup

The HTML-like syntax (JSX in React) used to describe what a component outputs.

Say: "Write the markup in JSX."

### Component tree

The nested hierarchy of components that makes up a screen.

Say: "Show me the component tree for this page."

### Conditional / list rendering

Showing elements based on a condition, or one per item in a collection.

Say: "Render a row for each item, hide when empty."


## State & Data Flow

Where data lives and how it moves. Naming this is how you spec interactive behavior.

### Local vs global state

Local = owned by one component; global = shared app-wide (cart, user, theme).

Say: "Keep this local, but put the user in global state."

### Lifting state up

Moving shared state to the closest common parent so siblings can both use it.

Say: "Lift the selected state up to the parent."

### Prop drilling

Passing data through many layers of components, a smell that often calls for context/store.

Say: "This is prop-drilling, use context instead."

### Context / provider

A way to share values with a subtree without passing props at every level.

Say: "Provide the theme via context."

### Store / state management

A central place for app-wide state (Redux, Zustand, Pinia) with predictable updates.

Say: "Manage cart state in a global store."

### Derived / computed state

Values calculated from existing state rather than stored separately (avoids drift).

Say: "Compute the total, don't store it in state."

### Side effect

Work outside rendering, fetching, subscriptions, timers, that runs after render.

Say: "Fetch data in an effect when the id changes."

### Hook

Reusable functions that add state/lifecycle/logic to components (React), start with use.

Say: "Extract this into a custom useFetch hook."

### Controlled vs uncontrolled

Controlled inputs are driven by state; uncontrolled keep their own internal value.

Say: "Make the form inputs controlled."


## Data & Networking

Getting data in and out, and handling the inevitable waiting and failing.

### API call / fetch

Requesting data from a server over the network.

Say: "Fetch the users from /api/users on load."

### REST vs GraphQL

REST = endpoints per resource; GraphQL = one endpoint, you ask for exactly the fields you need.

Say: "Is the API REST or GraphQL?"

### async / await

Syntax for handling operations that take time (network, files) without blocking.

Say: "Make the loader async/await."

### Loading / error / success

The three states every async UI needs. Always design all three, not just the happy path.

Say: "Handle loading, error, and empty states."

### Caching / revalidation

Reusing fetched data instead of re-requesting; revalidating when it goes stale (React Query, SWR).

Say: "Cache the results with React Query."

### Optimistic update

Showing the change instantly and rolling back if the server rejects it, feels fast.

Say: "Make the like button optimistic."

### CSR / SSR / SSG

Where pages render: in the browser (CSR), on the server per request (SSR), or prebuilt (SSG).

Say: "Server-render this page for SEO."

### Hydration

Attaching JavaScript to server-rendered HTML so it becomes interactive.

Say: "Watch for hydration mismatches."


## Routing & Navigation

How URLs map to screens in a frontend app.

### Route

A URL pattern mapped to a specific page/component.

Say: "Add a route for /settings."

### SPA / client-side routing

A single-page app swaps views in the browser instead of loading new HTML pages.

Say: "Make it an SPA with client-side routing."

### Dynamic route / param

A route with a variable segment, so one page serves many items.

Say: "Use a dynamic route for each product id."

### Query params

Key-value pairs after ? in the URL, filters, sorts, page numbers.

Say: "Keep the filters in query params."

### Redirect / guard

Sending users elsewhere (e.g. to login if not authenticated) before a route loads.

Say: "Redirect to /login if not authenticated."

### Code splitting / lazy route

Loading a route's code only when visited, shrinking the initial bundle.

Say: "Code-split the admin routes."


## Styling Approaches

The many ways to apply CSS in a frontend. Name the one your project uses.

### Utility classes / Tailwind

Composing styles from tiny single-purpose classes right in the markup.

Say: "Style it with Tailwind utility classes."

### CSS-in-JS

Writing scoped CSS inside JS, co-located with the component (styled-components, Emotion).

Say: "Use CSS-in-JS for the component styles."

### CSS Modules

Locally-scoped CSS files so class names never collide across components.

Say: "Scope styles with CSS Modules."

### Design tokens / CSS variables

Named, reusable values for color/spacing/type that drive consistent, themeable styling.

Say: "Drive colors from CSS variable tokens."

### Theme / dark mode

Swapping a token set to restyle the whole app (light/dark, brands).

Say: "Add a dark theme driven by tokens."

### Specificity / cascade

The rules deciding which CSS wins when several target the same element.

Say: "This is a specificity conflict, refactor it."


## Frameworks & Tooling

The ecosystem that turns your code into a running app.

### Framework

The library that structures your UI (React, Vue, Svelte, Angular). Name yours so output fits.

Say: "Build it in React 19 with TypeScript."

### Meta-framework

A framework on top of React/Vue adding routing, SSR, and build conventions.

Say: "Use Next.js with the app router."

### Bundler / build

Tools (Vite, webpack, esbuild) that compile and package your code for the browser.

Say: "Set it up with Vite."

### Transpile

Converting newer or non-browser syntax (TS, JSX) into JS browsers understand.

Say: "Transpile the TypeScript to ES2020."

### Package / npm

Reusable third-party code installed from a registry and tracked in package.json.

Say: "Don't add new packages for this."

### Dev server / hot reload

A local server that refreshes the browser instantly as you edit (HMR).

Say: "Run the dev server with hot reload."

### TypeScript / types

A typed layer over JS that catches errors before runtime and documents shapes.

Say: "Type the props, no any."

### Linter / formatter

Tools that catch bad patterns (lint) and auto-format code consistently.

Say: "Make it pass ESLint and Prettier."


## Quality & Performance

What separates a frontend that works from one that's fast and accessible.

### Re-render

When a component runs again because its state/props changed. Too many = jank.

Say: "This re-renders too often, investigate why."

### Memoization

Caching a computed value or component so it only recomputes when inputs change.

Say: "Memoize the expensive list calculation."

### Virtual DOM

An in-memory representation the framework diffs to update only what changed.

Say: "It's the virtual DOM reconciling the change."

### Bundle size / tree-shaking

Total JS shipped; tree-shaking removes unused code to shrink it.

Say: "Check the bundle size, tree-shake unused imports."

### Debounce / throttle

Limiting how often a function fires, debounce waits for a pause; throttle caps the rate.

Say: "Debounce the search input by 300ms."

### Accessibility / ARIA

Roles, labels, and keyboard support so assistive tech can use the app.

Say: "Add ARIA labels and keyboard navigation."

### Semantic markup

Using meaningful HTML elements over generic divs, better a11y and SEO.

Say: "Use semantic elements, not div soup."

### Error boundary

A wrapper that catches render crashes and shows a fallback instead of a blank page.

Say: "Wrap routes in an error boundary."