UI Frameworks & Components
Building interfaces from components with React, Vue, Svelte and friends.
Frontend Engineer track
Junior
Build UI that works, ship small changes safely, ask good questions.
Core: start here
- Client-Side RoutingChanging pages without full reloads.
- ComponentA reusable, self-contained piece of UI.
- Component StateData a component owns that changes over time.
- Controlled vs Uncontrolled InputsWhether the framework or the DOM owns an input's value.
- HooksReact functions like useState and useEffect for state and side effects.
- Keys in ListsStable identifiers so the framework can track list items.
- Lifting State UpMoving state to a common parent so siblings can share it.
- PropsInputs passed from a parent component to a child.
- UI FrameworkLibraries like React, Vue, Svelte and Angular for building interfaces.
- useEffect and Side EffectsRunning code after render, and the bugs that come from misusing it.
8 more junior concepts
- Component LibraryReady-made components like MUI, shadcn/ui or Radix.
- Component LifecycleMounting, updating and unmounting.
- Dependency ArrayThe list that decides when an effect or memo reruns.
- File-Based RoutingRoutes defined by the folder structure.
- JSXHTML-like syntax inside JavaScript.
- Prop DrillingPassing props through many layers that don't use them.
- Re-renderingA component running again because its state or props changed.
- RefsDirect references to DOM nodes or values that persist across renders.
Mid-level
Own a feature end to end without hand-holding.
Core: start here
- ContextSharing values across a component tree without prop drilling.
- Custom HookExtracting reusable stateful logic into a hook.
- HydrationAttaching interactivity to server-rendered HTML.
- memo, useMemo and useCallbackSkipping work when inputs haven't changed.
- Meta-FrameworkFrameworks like Next.js, Nuxt, SvelteKit and Remix that add routing and rendering.
- Unnecessary Re-rendersRenders that change nothing, and how to avoid them.
11 more mid-level concepts
- Component CompositionBuilding UIs from children and slots instead of configuration flags.
- Headless ComponentsComponents that provide behavior and accessibility without styles.
- Higher-Order ComponentA function that wraps a component to add behavior.
- Hydration MismatchServer and client HTML differing, causing errors or flicker.
- PortalsRendering a child into a different part of the DOM, e.g. for modals.
- ReactivityAutomatically updating the UI when data changes.
- ReconciliationHow a framework works out what changed between renders.
- Render Props / SlotsPassing render functions or content into components.
- SignalsFine-grained reactive values that update only what depends on them.
- StorybookDeveloping and documenting components in isolation.
- Virtual DOMAn in-memory UI tree diffed to find the minimal real DOM updates.
Senior
Own an app's architecture, performance, and failure modes.
Core: start here
- Choosing a FrameworkChoosing between React, Vue, Svelte and Angular based on team and product needs.
- Islands ArchitectureStatic pages with small interactive islands.
- Server ComponentsComponents that render on the server and ship no JavaScript.
2 more senior concepts
- Concurrent RenderingInterruptible rendering that keeps the UI responsive.
- SuspenseDeclaratively showing fallbacks while data or code loads.
Staff
Shape how many teams build, across apps.
Nothing here yet.
Principal
Set technical direction for the organization.
Nothing here yet.