React SME Cookbook

React SME Cookbook

Cookbook-style documentation and cheatsheet for React 19, Next.js, TypeScript, and the modern frontend stack. Each topic includes a recipe, working example, deep dive, gotchas, and alternatives.

React Fundamentals

7 pages

JSX and TSX, Components, Conditional Rendering, Lists and Keys, Event Handling, Forms, Refs

14 pages

useState Hook, useEffect Hook, useContext Hook, useReducer Hook, useMemo Hook, useCallback Hook, useRef Hook, useId Hook, useTransition Hook, ...

11 pages

Composition Over Inheritance, Render Props, Higher-Order Components, Compound Components, Controlled vs Uncontrolled Components, State Machines for UI Logic, ...

10 pages

What's New in React 19, Server Components, Server Actions, Form Actions, use() Hook, useOptimistic, Ref as Prop, Document Metadata, Asset Loading, ...

6 pages

50 React & Next.js Rules, 40 Next.js Rules, 30 API Rules for Next.js, 30 React UX Rules, Problem/Solution, React & Next.js Architecture Decisions

React Components

28 pages

Button, Modal, Card, Accordion, Tabs, Toast, Dropdown, Tooltip, Input, Avatar, Badge, Skeleton, Sidebar, Breadcrumb, Pagination, Textarea, Select, Checkbox, ...

10 pages

Mouse Events, Keyboard Events, Form Events, Focus Events, Clipboard Events, Drag & Drop Events, Touch Events, Scroll Events, Pointer Events, ...

14 pages

Preventing Unnecessary Re-renders, useMemo, useCallback & React.memo, React Compiler (React Forget), React DevTools Profiler, Detecting & Fixing Memory Leaks, ...

10 pages

Basic Next.js Setup, Next.js + Tailwind v4 + shadcn/ui, create-next-app CLI Flags, Next.js + Prisma + PostgreSQL, Next.js + Auth.js v5, ...

Next.js Routing

9 pages

App Router Basics, Layouts, Dynamic Routes, Route Groups, Loading & Error Handling, Middleware, Intercepting Routes, Parallel Routes, Navigation

9 pages

Data Fetching in Server Components, Server Actions, Revalidation, Streaming & Suspense, Caching, Search Params, Cookies & Headers, ...

Next.js Rendering

7 pages

Server Components, Client Components, Composition Patterns, Static vs Dynamic Rendering, Partial Prerendering (PPR), Image Optimization, Font Optimization

Next.js Patterns

8 pages

Authentication Patterns, API Route Handlers, Environment Variables, Error Handling, Testing Next.js Apps, Deployment, SEO and Metadata, ...

TypeScript + React

15 pages

TypeScript Basics for React, Typing Props, Typing State, Typing Events, Typing Refs, Typing Context, Generics in React, Discriminated Unions, ...

12 pages

SWR Setup and Configuration, Basic Data Fetching with SWR, Conditional and Dependent Fetching, Mutations and Optimistic Updates, Pagination with SWR, ...

Forms & Validation

15 pages

Zod Basics, Zod Types, Zod Transforms, Zod Infer, React Hook Form, RHF + Zod, Server Action Forms, Form Patterns Basic, Form Patterns Complex, ...

13 pages

Zustand Setup and Basic Usage, Store Design Patterns, Selectors and Performance, Async Actions, Slice Pattern, Zustand Middleware, Persist Middleware, ...

15 pages

useDebounce, useThrottle, useScrollToTop, useLocalStorage, useMediaQuery, useClickOutside, useCopyToClipboard, useIntersectionObserver, useWindowSize, ...

React Libraries

10 pages

Vercel AI SDK, Prisma ORM, dnd-kit Drag and Drop, AWS SDK S3, AWS SDK Lambda, AWS SDK Polly, Lodash Utilities, date-fns Date Manipulation, ...

4 pages

postMessage Fundamentals, Intermediate postMessage Patterns, Advanced postMessage Patterns, postMessage Security

Stripe Payments

12 pages

Getting Started with Stripe, Stripe Checkout Sessions, Payment Intents (Custom Payment Flow), Payment Element & Card Element, Subscriptions, Stripe Webhooks, ...

10 pages

Lucide React Icons, React Icons, Heroicons, Next.js Image Optimization, Unsplash API, Pixabay API, Pexels API, Custom SVG Icons in React, ...

14 pages

Vitest Setup with Next.js, Jest Setup with Next.js, React Testing Library Fundamentals, Testing React Components, Testing Custom Hooks, Mocking in Tests, ...

Linting & Formatting

10 pages

ESLint Setup for Next.js, Essential ESLint Rules, ESLint Plugins, Prettier Setup, ESLint + Prettier Integration, Biome (ESLint + Prettier Alternative), ...

Tailwind CSS v4

7 pages

Tailwind CSS v4 Setup, Tailwind Utilities, Responsive Design, Dark Mode, Animations, Custom Utilities, Tailwind Colors

8 pages

shadcn/ui Setup, Button, Dialog, Form, Data Table, Command, Toast, Sidebar

Node.js Scripts

7 pages

Running Node.js Scripts in JavaScript, Running TypeScript Scripts, ESM vs CommonJS Modules, ESLint for Node.js Scripts, Utility Script Patterns, ...

10 pages

React 19 Mastery Skill, Next.js Routing Deep Dive Skill, Next.js Data Fetching Skill, Next.js Rendering Strategies Skill, TypeScript React Patterns Skill, ...

5 pages

Essential Git Commands, Merging & Rebasing, GitHub CLI, Git Utilities, Git Configuration

4 pages

Sysadmin Essentials, Search & Regex, Node.js Developer Commands, Shell Productivity