React Recipes

View Commands

React and Next.js CLI tools for creating, building, and deploying modern web applications and components.

8 recipes

Accessibility Testing with axe-core

Beginner

Audit React components for WCAG accessibility violations using axe-core in tests, CI, and browser DevTools.

4 steps|10 min|accessibility, a11y, axe-core

$ pnpm add -D axe-core vitest-axe

View Recipe

Analyze and Reduce Bundle Size

Intermediate

Visualize your JavaScript bundle, identify bloated dependencies, and apply tree-shaking and code-splitting to reduce load times.

5 steps|12 min|bundle, webpack, tree-shaking

$ pnpm add -D @next/bundle-analyzer

View Recipe

Test React Components with Vitest and Testing Library

Intermediate

Set up and write component tests using Vitest and React Testing Library with user-centric queries and assertions.

5 steps|15 min|testing, vitest, testing-library

$ pnpm add -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom @vitejs/plugin-react

View Recipe

Dockerize and Deploy a React/Next.js App

Advanced

Create a production-optimized Docker image for a Next.js application with multi-stage builds and minimal image size.

5 steps|20 min|docker, deployment, nextjs

$ cat > Dockerfile << 'EOF'

View Recipe

Environment Variable Management Across Environments

Beginner

Configure and validate environment variables for development, staging, and production in React and Next.js projects.

5 steps|8 min|environment, configuration, env

$ echo 'NEXT_PUBLIC_API_URL=http://localhost:3001/api' > .env.local && echo 'NEXT_PUBLIC_API_URL=https://api.staging.example.com' > .env.staging && echo 'NEXT_PUBLIC_API_URL=https://api.example.com' > .env.production

View Recipe

Create a Next.js App Router Project from Scratch

Beginner

Scaffold a new Next.js project with App Router, TypeScript, Tailwind CSS, and ESLint fully configured and ready for development.

5 steps|10 min|nextjs, app-router, scaffold

$ npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --use-pnpm

View Recipe

Profile and Audit React Performance

Intermediate

Use Lighthouse, React DevTools Profiler, and Chrome Performance tab to identify and fix rendering bottlenecks.

5 steps|15 min|performance, lighthouse, profiling

$ npx lighthouse http://localhost:3000 --output=html --output-path=./lighthouse-report.html --chrome-flags='--headless=new'

View Recipe

Set Up Storybook for Component-Driven Development

Intermediate

Install and configure Storybook to develop, document, and visually test React components in isolation.

4 steps|12 min|storybook, components, documentation

$ npx storybook@latest init

View Recipe