React.js
Developer Roadmap

HTML Semantics

Semantic tags (article, section, nav, main), forms, accessibility (ARIA roles, alt text, label). DOM structure.

CSS Fundamentals

Box model, specificity, cascade, positioning (relative/absolute/fixed/sticky), display types, units (rem, em, vh/vw).

Flexbox & Grid

flex-direction, justify-content, align-items, grid-template-columns, gap, auto-fill, named areas. Both systems are mandatory.

Responsive Design

Media queries, mobile-first approach, fluid typography, responsive images, container queries.

JavaScript Core

var/let/const, data types, type coercion, scope, closures, hoisting, the event loop, call stack, microtask queue.

JS Functions & OOP

Arrow functions, this binding, prototypes, classes, inheritance, getters/setters, static methods.

ES6+ Features

Destructuring, spread/rest, template literals, optional chaining (?.), nullish coalescing (??), modules (import/export).

Async JavaScript

Callbacks, Promises (.then/.catch/.finally), async/await, Promise.all/allSettled/race, error handling in async code.

DOM Manipulation & Events

querySelector, addEventListener, event bubbling/capturing, delegation, preventDefault, custom events.

Fetch API & HTTP

fetch(), Request/Response objects, HTTP methods & status codes, headers, JSON parsing, CORS basics.

JSX & Virtual DOM

JSX transpilation, expressions in JSX, className/htmlFor, fragments, how reconciliation and the diffing algorithm work.

Components

Functional components, component composition, props (passing, destructuring, default values), children prop, prop types.

useState

State initialization, updater function form, batching, immutable state updates (objects/arrays), controlled vs uncontrolled.

useEffect

Side effects, dependency array rules, cleanup functions, fetch-on-mount pattern, avoiding infinite loops, StrictMode double-invoke.

useRef & useCallback & useMemo

DOM refs, persisting values across renders, memoizing expensive computations, stable function references, when NOT to use them.

useReducer

Reducer function, dispatch, action objects, when to prefer over useState, combining with useContext.

useContext

createContext, Provider, consumer components, context performance pitfalls, avoiding prop drilling.

Custom Hooks

Extracting stateful logic, naming rules (use prefix), composing hooks, useFetch, useLocalStorage, useDebounce patterns.

Lists & Keys

Rendering arrays with .map(), stable unique keys, key reconciliation behavior, avoiding index as key.

Forms & Controlled Components

Controlled inputs, form submission, validation, React Hook Form library, field arrays, Zod schema integration.

Error Boundaries

Class-based error boundaries, componentDidCatch, getDerivedStateFromError, react-error-boundary library.

Portals & Suspense

ReactDOM.createPortal for modals/tooltips, Suspense with lazy(), React.lazy code splitting, fallback UI.

CSS Modules

Scoped class names, composes, :local/:global, combining with SASS. Zero runtime overhead.

Tailwind CSS

Utility-first approach, JIT, responsive variants, dark mode, @apply, extracting components, tailwind.config.

Styled Components / Emotion

CSS-in-JS, dynamic styles via props, theming with ThemeProvider, global styles, keyframes, SSR considerations.

Component Libraries

shadcn/ui (headless), Radix UI primitives, MUI, Ant Design. Know when to build vs consume.

TanStack Query (React Query)

useQuery, useMutation, QueryClient, caching, stale time, background refetching, optimistic updates, infinite queries.

Zustand

Store creation, selectors, devtools, persist middleware, slice pattern for large stores. Minimal, no boilerplate.

Redux Toolkit

configureStore, createSlice, createAsyncThunk, RTK Query, selectors with createSelector, entity adapters.

Jotai / Recoil (Atomic State)

Atom-based state, derived atoms, async atoms, atom families. Understand the atomic model vs flux.

SWR

useSWR, revalidation strategies, mutation, bound mutate, global config, focus/interval revalidation.

Axios & API Integration

Axios instances, interceptors, request/response transformation, cancellation with AbortController, base URL config.

React Router v6

BrowserRouter, Routes/Route, nested routes, outlet, useNavigate, useParams, useSearchParams, loader/action.

TypeScript with React

FC type, typing props/state/hooks, generics in components, discriminated unions, utility types (Partial, Pick, Omit, Record).

TypeScript Advanced Patterns

Type narrowing, mapped types, conditional types, template literal types, infer, satisfies keyword.

Vite

Dev server, HMR, build pipeline, vite.config, plugins (svgr, env), proxy config, environment variables.

Module Bundling Concepts

Tree shaking, code splitting, dynamic imports, bundle analysis (rollup-visualizer), lazy routes.

Environment & Deployment

.env files, VITE_ prefix, Vercel/Netlify deployment, preview deployments, build optimization flags.

App Router Architecture

file-system routing, layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, route groups, parallel routes.

Server vs Client Components

'use client' directive, RSC model, serialization boundary, what can't be in server components, composing both.

Data Fetching in Next.js

fetch() with cache/revalidate options, generateStaticParams, ISR, streaming with Suspense, server actions.

Server Actions

'use server', form actions, progressive enhancement, useFormState/useFormStatus, optimistic updates with useOptimistic.

Next.js API Routes

route.ts handlers, NextRequest/NextResponse, middleware.ts, edge runtime, cookies/headers in handlers.

Authentication

NextAuth.js / Auth.js v5, providers (OAuth, credentials), session strategy (JWT vs DB), protected routes, middleware guard.

Performance in Next.js

Image optimization (next/image), font optimization (next/font), metadata API, static export, partial prerendering (PPR).

Vitest & React Testing Library

render, screen queries (getBy/findBy/queryBy), userEvent, fireEvent, waitFor, mocking modules, testing async components.

End-to-End with Playwright

page.goto, locators, assertions, fixtures, test.beforeEach, network mocking, visual comparisons, CI integration.

React Performance

React DevTools Profiler, React.memo, useMemo/useCallback strategy, virtualization (TanStack Virtual), avoiding re-renders.

Accessibility (a11y)

WCAG standards, keyboard navigation, focus management, axe-core, eslint-plugin-jsx-a11y, screen reader testing.

Animations

Tailwind CSS animation utilities, CSS keyframes, transition orchestration, and performance-friendly motion patterns.

Storybook

Component-driven development, stories, args, decorators, addons (a11y, viewport), chromatic visual testing.

Monorepos & Design Systems

Turborepo, shared UI packages, shared config packages, workspace protocols, publishing to private registries.

AI Integration (your domain)

Vercel AI SDK, useChat/useCompletion hooks, streaming UI, tool calls in frontend, building RAG chat UIs in Next.js.