Click any module to expand. This module uses TypeScript throughout — not as an add-on in the last week but as the default from the first component. Every tool is current: Vite (not CRA), Tailwind (not Bootstrap), Zustand (not Redux boilerplate), React Query (not manual useEffect API calls).
Environment setup, JSX, components, props, and TypeScript typing from the first line
npm create vite@latest -- --template react-ts. Why Vite replaced CRA: 10x faster dev server, native ESM, better build optimisation (Rollup), instant HMR. Project structure: src/components, pages, hooks, services, types, lib. tsconfig.json and path aliases (@/components/Button). ESLint + Prettier setup. React DevTools installation.
JSX: HTML-in-JavaScript (actually JavaScript-in-JavaScript). Virtual DOM: React computes minimal DOM updates (diffing algorithm). Reconciliation: why keys matter for list performance. React's unidirectional data flow: props down, events up. Why React re-renders and when it doesn't. The mental model every React developer must internalise.
Functional components (class components are legacy — don't teach them). TypeScript props: interface Props { name: string; age?: number; children: React.ReactNode }. Default props with destructuring. Component composition: building complex UIs from simple pieces. When to split into smaller components. React.FC vs function declaration — why function declaration is preferred.
Conditional rendering: ternary operator, && short-circuit, early return. Rendering lists: array.map() with unique key prop. Why index-as-key is wrong for dynamic lists (breaks reconciliation). Rendering nothing: return null. Fragments: <>...</> to avoid wrapper divs. TypeScript: typing array items and map callbacks.
onClick, onChange, onSubmit — React's synthetic event system. TypeScript event types: React.MouseEvent, React.ChangeEvent<HTMLInputElement>, React.FormEvent. Passing event handlers as props: onDelete: (id: string) => void. Preventing default, stopping propagation. Inline handlers vs extracted handlers — readability vs performance.
Tailwind CSS: utility-first classes (px-4 py-2 bg-blue-500 text-white rounded-lg). Responsive: sm:, md:, lg: modifiers. Dark mode: dark: modifier. Hover/focus states. Custom theme in tailwind.config.ts. shadcn/ui: accessible, customisable component primitives (Button, Input, Dialog, Toast, Table, Sheet). Lucide icons. Why Tailwind + shadcn/ui is the modern React styling stack.
React's core API — managing state, side effects, refs, and building reusable logic
useState<string>(""), useState<User | null>(null), useState<Item[]>([]). Updating state: setter function, functional update for state-that-depends-on-previous. State is immutable — never mutate directly. Multiple state variables vs single object state. Lazy initialisation: useState(() => expensiveCompute()). The foundation of every interactive React component.
useEffect(() => { ... }, [deps]). Dependency array: [] (mount only), [dep] (when dep changes), none (every render — almost never correct). Cleanup function: return () => { ... } for subscriptions, timers, event listeners. Common pitfalls: infinite loops (missing deps), stale closures, fetching data in useEffect (use React Query instead). "Explain useEffect dependency array" — the most asked React hook question.
useRef: DOM access (inputRef.current.focus()), mutable values that persist across renders without triggering re-render. useMemo: memoize expensive computations — recalculate only when deps change. useCallback: memoize functions — prevent unnecessary child re-renders. When to use: useMemo for expensive values, useCallback for functions passed as props to memoized children. Don't premature-optimize — profile first.
useReducer(reducer, initialState): dispatch actions, reducer updates state. When to use: complex state with multiple sub-values, state transitions depend on previous state, next-state logic is complex. TypeScript: typed actions (type Action = { type: 'ADD'; payload: Item } | { type: 'DELETE'; id: string }). Reducer pattern: the precursor to understanding Redux/Zustand.
Custom hooks: functions starting with "use" that compose other hooks. useLocalStorage: persist state in localStorage. useDebounce: delay value updates for search input. useFetch: (deprecated by React Query but teaches the pattern). useMediaQuery: responsive logic in JS. useOnClickOutside: close dropdowns when clicking outside. Custom hooks are THE measure of React expertise — every senior dev writes them.
Rules: only call hooks at the top level (no conditionals/loops), only in components/custom hooks. Stale closure problem: useEffect captures old state values. Infinite re-render loops: state update in effect without proper deps. Memory leaks: unsubscribed listeners, cancelled requests. React Strict Mode: double-invocation in development (not a bug). The debugging skills that save hours of frustration.
Multi-page navigation, global state, and data sharing across components
BrowserRouter, Routes, Route, Link, NavLink (active styling). Dynamic routes: /users/:id with useParams(). Nested routes with Outlet for shared layouts (sidebar + content). Index routes. Programmatic navigation: useNavigate(). Search params: useSearchParams() for URL-based filters. Catch-all 404: path="*". Location state: passing data between routes.
ProtectedRoute component: check isAuthenticated → render children or navigate to /login. Role-based routes: admin-only pages. Redirect after login: save intended URL, redirect after successful auth. Layout routes: AuthLayout (no sidebar) vs DashboardLayout (with sidebar). The complete auth routing architecture that every production app uses.
createContext, Provider, useContext. AuthContext: isAuthenticated, user, login(), logout(). ThemeContext: dark/light mode toggle. When Context is right: auth state, theme, locale — infrequently changing global data. Context limitation: every consumer re-renders on ANY context value change (no selective subscriptions). Why Context is insufficient for complex state.
create(set => ({ count: 0, increment: () => set(s => ({ count: s.count + 1 })) })). Selectors: const count = useStore(s => s.count) — only re-render when selected value changes. Middleware: persist (localStorage), devtools. Async actions: set state after API call. Zustand vs Redux: zero boilerplate, no Provider wrapper, TypeScript-native, 1KB. Why Zustand is replacing Redux for most apps in 2025–26.
createSlice, configureStore, useSelector, useDispatch. RTK Query for API caching (alternative to React Query). Why Redux still matters: enterprise apps, large teams, complex state flows, time-travel debugging. When Redux is overkill: most apps with < 10 engineers. Students learn Zustand deeply and understand Redux conceptually — ready for either in a job.
The modern way to fetch, cache, and synchronise server data in React
The problem: useEffect + useState + loading + error + cache invalidation = 50 lines of boilerplate per API call. React Query: useQuery({ queryKey, queryFn }) → { data, isLoading, error } — 3 lines. Auto-caching, background refetching, stale-while-revalidate, retry on failure, window focus refetching. React Query eliminates 80% of useEffect API calls. The single biggest productivity improvement in modern React.
useQuery({ queryKey: ['users'], queryFn: fetchUsers }). queryKey for cache identity: ['users'] (all), ['user', userId] (specific). staleTime: how long data is "fresh." gcTime: how long inactive data stays in cache. Enabled: conditionally fetch (enabled: !!userId). Select: transform data before returning. Placeholder data for instant UI. Infinite queries for infinite scroll: useInfiniteQuery.
useMutation({ mutationFn: createUser }). onSuccess: invalidate queries (refresh list after creating item). Optimistic updates: update UI immediately, rollback on error. onError: show toast notification. Mutation state: isPending, isError, isSuccess. The create → invalidate → refetch pattern that every CRUD app uses.
Axios instance: baseURL, timeout, default headers. Request interceptor: auto-attach JWT Authorization header. Response interceptor: handle 401 (redirect to login), handle 500 (toast error). Typed responses: axios.get<User[]>('/api/users'). Axios vs fetch: interceptors, automatic JSON parsing, request cancellation, better error handling.
Form handling, authentication lifecycle, and the patterns every production app uses
React Hook Form: register, handleSubmit, formState (errors, isSubmitting, isDirty). Minimal re-renders (uncontrolled under the hood). Zod resolver: validate forms with type-safe schemas — infer TypeScript types from Zod schemas. Multi-step forms. Dynamic fields (useFieldArray). File upload forms. Error messages: inline, per-field. Why RHF + Zod is the modern form stack: performant, type-safe, minimal boilerplate.
Login form → POST /api/auth/login → receive tokens → store (httpOnly cookie or localStorage). AuthContext/Zustand: isAuthenticated, user, login(), logout(). Axios interceptor: attach Authorization: Bearer
Server-side pagination: page/limit params → API → React page controls. URL-based pagination: useSearchParams for page/filter/sort in URL (shareable, back-button friendly). Debounced search: useDebounce hook → API call on stop typing. Multi-filter: category, price range, date → query parameters. Infinite scroll with useInfiniteQuery. The patterns every e-commerce site and admin dashboard uses.
Error boundaries: catch rendering errors, show fallback UI (not blank screen). class component (ErrorBoundary) wrapping functional components. Suspense for loading states: <Suspense fallback={<Spinner />}>. Toast notifications for API errors (react-hot-toast or Sonner). Loading skeletons vs spinners: skeletons feel faster. Global error handling: Axios interceptor → toast. Empty states: "No results found" with helpful suggestions.
Optimisation, a11y, code splitting, and the patterns production apps need
React.memo: skip re-renders when props haven't changed. useMemo + useCallback: memoize values and functions. Code splitting: React.lazy + Suspense for route-based splitting — load only what's needed. Dynamic imports for heavy components (charts, editors). React Profiler: identify slow components. Bundle analysis: vite-bundle-visualizer. The rule: measure first, optimise second — don't premature-optimize.
Core Web Vitals: LCP (Largest Contentful Paint — perceived load speed), INP (Interaction to Next Paint — responsiveness), CLS (Cumulative Layout Shift — visual stability). Lighthouse audit: performance score, accessibility score, SEO score. Optimising images: lazy loading, WebP, srcSet. Font loading: font-display: swap. Why performance matters for SEO and user retention.
Semantic HTML: button vs div, form labels, heading hierarchy. ARIA attributes: aria-label, aria-describedby, aria-hidden, role. Focus management: keyboard navigation, focus trapping in modals. Screen reader testing. Color contrast ratios (WCAG AA: 4.5:1). Skip links for keyboard users. Why a11y matters: legal requirements, better UX for everyone, and increasingly tested in interviews at companies like Google and Microsoft.
Compound components: <Tabs><Tab>...</Tab></Tabs> — related components sharing implicit state. Render props (legacy but in interviews). Higher-order components (legacy but in interviews). Controlled vs uncontrolled components. Portals: render outside the DOM tree (modals, tooltips). forwardRef: pass refs to child components. Polymorphic components: <Button as="a" href="...">.
React Testing Library, Vitest, MSW, and the meta-framework landscape
Testing philosophy: test behavior, not implementation. render(), screen.getByText(), screen.getByRole(), screen.queryByText() (null if not found). User events: userEvent.click(), userEvent.type(). Async: findByText() for elements that appear after async operations. waitFor() for assertions on changing state. Vitest: fast, TypeScript-native, Vite-integrated test runner.
Mock Service Worker: intercept network requests at the service worker level. http.get('/api/users', () => HttpResponse.json(mockUsers)). Test components that fetch data without a real backend. Test error states: return 500 responses. Test loading states. MSW works in browser (development) AND Node (testing). Why MSW is better than mocking Axios directly.
Test: user interactions (click button → see result), form submissions, conditional rendering, error states. Don't test: implementation details (state values, hook internals), styling. Testing pyramid: many unit tests, fewer integration tests, few E2E. Testing custom hooks with renderHook(). Coverage reports: vitest --coverage. "Do you write tests?" — having tests in your portfolio project is a differentiator.
Next.js: the production React framework. App Router (Next.js 14+): Server Components (render on server, zero client JS), file-based routing, layouts, loading states, error handling. Server Actions: form handling on server (no API routes needed). SSR, SSG, ISR — when each rendering strategy applies. When to use Next.js (SEO, marketing, full-stack-in-one) vs React SPA (dashboard, admin, separate backend). An OVERVIEW — understanding the landscape without deep diving.
Production builds, Vercel deployment, and building a portfolio that gets interviews
npm run build: Vite production build (minification, tree shaking, code splitting, asset hashing). Build output analysis: vite-bundle-visualizer. Environment variables: VITE_API_URL for different environments. Preview: npm run preview to test production build locally. Image optimization: lazy loading, WebP format, responsive images. Why production build differs from development server.
Vercel: connect GitHub repo → automatic deploys on push. Preview deployments per PR. Custom domain + HTTPS (automatic). Environment variables in Vercel dashboard. Netlify as alternative: similar flow, different features. SPA routing: _redirects file for Netlify, vercel.json rewrites. CI: Vercel runs build and serves — zero DevOps knowledge needed. "Here's my deployed project" — the strongest interview statement.
Feature branch workflow: main → feature/add-search → PR → review → merge. Conventional commits: "feat: add user search", "fix: pagination offset bug." .gitignore: node_modules, dist, .env. Husky + lint-staged: auto-lint and format on commit. GitHub Actions: on push → lint → typecheck → test → build. Making GitHub profile interview-ready: pinned repos, clean README with screenshots, live demo link.
Portfolio structure: 3 projects showing progression (simple → complex → full-featured). Each project: live demo (Vercel URL) + GitHub repo + README with screenshots/architecture. README template: what it does, tech stack, key features, setup instructions, what you learned. Pin best repos on GitHub profile. LinkedIn project section with live links. The portfolio IS the resume for frontend developers — interviewers look at code, not certificates.
Admin dashboard: charts (Recharts), data tables with sort/filter/pagination, dark mode, responsive layout, React Query for API caching, protected routes, Zustand for UI state.
Product catalog with search/filter/sort, shopping cart (Zustand), wishlist, product detail with image gallery, responsive mobile-first UI, infinite scroll, checkout form (React Hook Form + Zod).
User auth (login/register/protected routes), content CRUD, rich text editing, comments, user profiles, image upload, infinite scroll feed, toast notifications, error boundaries, tests.
Trainers build React features live — components, hooks, API integration, routing. Students code alongside. Every session adds a working feature to the project.
Between sessions, students build components and features on their project. Git-based: push to GitHub, deployed to Vercel automatically.
Trainers review: TypeScript types, component structure, hook usage, performance, accessibility. The feedback loop that builds professional React habits.
Projects deploy to Vercel from the first session. Students see their code live on the internet — motivation and accountability built into the process.
Flipkart, Swiggy, Zomato, CRED, Razorpay, Paytm — the Indian product ecosystem runs on React. Meta, Netflix, Airbnb, Uber — the global tech ecosystem uses React. More frontend job postings mention React than any other framework. Learning React is the single highest-ROI investment.
Spring Boot, Django, Express, ASP.NET Core, FastAPI — React connects to all of them via REST APIs. Learning React once makes students employable across Java, Python, Node.js, and .NET full-stack roles. The frontend skill is the same regardless of backend stack. One framework, every job description.
A deployed React project with TypeScript, React Query, and a live Vercel URL is worth more than any certification. Frontend interviews are practical: "Build this component" "Add this feature." Students who've built 3 projects can implement features under pressure. Students who've only watched tutorials cannot.
ChatGPT, Claude, Gemini — every AI product's frontend is React. Streaming responses, chat interfaces, real-time AI output rendering — all built with React. Students learning React now are building the interfaces for the AI products that define 2025–26 tech. React + AI integration is the next wave of frontend development.
E-305, Industrial Area, Sahibzada Ajit Singh Nagar, Punjab 160055, IN
