React

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

69 commands

Browse by Topic

Getting Started

Quick setup and installation

3commands

Next.js

Next.js framework

15commands

Vite

Vite build tool

11commands

React Native

Mobile development

9commands

Storybook

Component development

7commands

Testing

Jest & Vitest

8commands

UI Libraries

shadcn/ui & Tailwind

4commands

Bundle

Bundle analysis

3commands

Server Components

Server Components & Actions

6commands

Debugging

DevTools & debugging

3commands

Create React app with Vite

$ npm create vite@latest my-app -- --template react-ts

Scaffold a new React + TypeScript project using Vite

Create React app with Next.js

$ npx create-next-app@latest

Scaffold a new Next.js project with interactive setup prompts

Check React version

$ npm list react

Display the installed React version in the current project

Create Next.js app

$ npx create-next-app@latest my-app --typescript --tailwind --app

Create Next.js project with TypeScript and Tailwind.

Start dev server

$ next dev

Start development server with Turbopack (default in v16+).

Dev with custom port

$ next dev -p 3001

Start dev server on custom port.

Build for production

$ next build

Create optimized production build.

Start production

$ next start

Start production server (after build).

Use Webpack (not Turbopack)

$ next dev --webpack

Use Webpack instead of Turbopack for dev.

System info

$ next info

Display system info for debugging.

Analyze bundle

$ next experimental-analyze

Analyze bundle sizes with Turbopack.

Create Next.js 15 with Turbopack

$ npx create-next-app@latest --app --turbo

Create Next.js 15 app with App Router and Turbopack enabled.

Dev with Turbopack (explicit)

$ next dev --turbo

Start dev server with Turbopack (50% faster builds).

HTTPS dev server

$ next dev --experimental-https

Start dev server with HTTPS enabled for local development.

Parallel build optimization

$ next build --experimental-build-worker

Build with experimental parallel build workers for faster builds.

Production with Turbopack

$ next start --turbo

Start production server with Turbopack optimizations.

Pre-compile pages

$ next experimental-compile

Pre-compile pages for faster development server startup.

Disable telemetry

$ next telemetry disable

Disable Next.js anonymous telemetry collection.

Create Vite React app

$ npm create vite@latest my-app -- --template react-ts

Create Vite project with React and TypeScript.

Create with SWC

$ npm create vite@latest my-app -- --template react-swc-ts

Create Vite project with SWC compiler (faster).

Start dev server

$ vite

Start Vite dev server with HMR.

Dev with custom port

$ vite --port 3000

Start dev server on custom port.

Build for production

$ vite build

Build production bundle with Rollup.

Preview production

$ vite preview

Preview production build locally.

Force re-optimize

$ vite --force

Force re-optimization of dependencies.

Open browser

$ vite --open

Auto-open browser on server start.

Create Vite + SWC (no TS)

$ npm create vite@latest my-app -- --template react-swc

Create Vite project with SWC compiler (JavaScript, no TypeScript).

Production build with sourcemaps

$ vite build --mode production --sourcemap

Build for production with source maps for debugging.

Preview on network

$ vite preview --host 0.0.0.0

Preview production build accessible on local network.

Create React Native app

$ npx @react-native-community/cli@latest init MyApp

Initialize new React Native project.

Start Metro bundler

$ npx react-native start

Start Metro bundler (default port 8081).

Reset Metro cache

$ npx react-native start --reset-cache

Start Metro with cache cleared.

Run on iOS

$ npx react-native run-ios

Build and run on iOS simulator.

Run on iOS device

$ npx react-native run-ios --device "iPhone"

Build and run on specific iOS device.

Run on Android

$ npx react-native run-android

Build and run on Android emulator/device.

Doctor check

$ npx react-native doctor

Diagnose and fix common issues.

View Android logs

$ npx react-native log-android

Stream Android device logs.

Clean build

$ npx react-native clean

Clean build artifacts.

Initialize Storybook

$ npx storybook@latest init

Add Storybook to existing project (auto-detects).

Start Storybook

$ npm run storybook

Start Storybook dev server (default: localhost:6006).

Storybook custom port

$ storybook dev --port 9009

Start Storybook on custom port.

Build Storybook

$ npm run build-storybook

Build static Storybook for deployment.

Add addon

$ npx storybook add @storybook/addon-a11y

Add Storybook addon.

Upgrade Storybook

$ npx storybook@latest upgrade

Upgrade to latest Storybook version.

Storybook doctor

$ npx storybook doctor

Check for known problems.

Run Jest tests

$ jest

Run all Jest tests once.

Jest watch mode

$ jest --watch

Run tests in watch mode.

Jest with coverage

$ jest --coverage

Run tests with coverage report.

Update snapshots

$ jest --updateSnapshot

Update Jest snapshots.

Run Vitest

$ vitest

Run Vitest in watch mode (Vite projects).

Vitest run once

$ vitest run

Run Vitest tests once.

Vitest with coverage

$ vitest run --coverage

Run Vitest with coverage.

Vitest UI

$ vitest --ui

Run Vitest with interactive UI.

Initialize shadcn/ui

$ npx shadcn@latest init

Set up shadcn/ui in your project.

Add shadcn component

$ npx shadcn@latest add button

Add a specific shadcn/ui component.

Add all shadcn components

$ npx shadcn@latest add --all

Add all available shadcn/ui components.

Install Tailwind

$ npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

Install and initialize Tailwind CSS.

Source map explorer

$ npx source-map-explorer 'build/static/js/*.js'

Analyze bundle with source maps.

CRA bundle analyzer

$ npx cra-bundle-analyzer

Analyze Create React App bundle.

Next.js bundle analyzer

$ ANALYZE=true npm run build

Analyze Next.js bundle (requires @next/bundle-analyzer).

Mark Server Action

$ 'use server'

Directive to mark async functions as Server Actions (top of file or function).

Mark Client Component

$ 'use client'

Directive to mark component as Client Component (required for hooks, events).

Force dynamic rendering

$ export const dynamic = 'force-dynamic'

Force page to render dynamically on every request (disable static optimization).

ISR revalidation interval

$ export const revalidate = 60

Set Incremental Static Regeneration interval in seconds (ISR).

Set cookies in Server Component

$ cookies().set('name', 'value')

Set HTTP cookies in Server Components or Server Actions.

Access headers in Server Component

$ headers().get('user-agent')

Read request headers in Server Components or Server Actions.

Enable Node.js inspector

$ npm run dev -- --inspect

Start Next.js dev server with Node.js debugging enabled (chrome://inspect).

Enable debug mode

$ NEXT_PUBLIC_DEBUG=true npm run dev

Start Next.js with debug logging enabled for troubleshooting.

Build with React profiling

$ npm run build -- --profile

Build Next.js with React profiling enabled for performance analysis.

Discussion

Loading comments...

React

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

69 commands

Browse by Topic

Getting Started

Quick setup and installation

3commands

Next.js

Next.js framework

15commands

Vite

Vite build tool

11commands

React Native

Mobile development

9commands

Storybook

Component development

7commands

Testing

Jest & Vitest

8commands

UI Libraries

shadcn/ui & Tailwind

4commands

Bundle

Bundle analysis

3commands

Server Components

Server Components & Actions

6commands

Debugging

DevTools & debugging

3commands

Create React app with Vite

$ npm create vite@latest my-app -- --template react-ts

Scaffold a new React + TypeScript project using Vite

Create React app with Next.js

$ npx create-next-app@latest

Scaffold a new Next.js project with interactive setup prompts

Check React version

$ npm list react

Display the installed React version in the current project

Create Next.js app

$ npx create-next-app@latest my-app --typescript --tailwind --app

Create Next.js project with TypeScript and Tailwind.

Start dev server

$ next dev

Start development server with Turbopack (default in v16+).

Dev with custom port

$ next dev -p 3001

Start dev server on custom port.

Build for production

$ next build

Create optimized production build.

Start production

$ next start

Start production server (after build).

Use Webpack (not Turbopack)

$ next dev --webpack

Use Webpack instead of Turbopack for dev.

System info

$ next info

Display system info for debugging.

Analyze bundle

$ next experimental-analyze

Analyze bundle sizes with Turbopack.

Create Next.js 15 with Turbopack

$ npx create-next-app@latest --app --turbo

Create Next.js 15 app with App Router and Turbopack enabled.

Dev with Turbopack (explicit)

$ next dev --turbo

Start dev server with Turbopack (50% faster builds).

HTTPS dev server

$ next dev --experimental-https

Start dev server with HTTPS enabled for local development.

Parallel build optimization

$ next build --experimental-build-worker

Build with experimental parallel build workers for faster builds.

Production with Turbopack

$ next start --turbo

Start production server with Turbopack optimizations.

Pre-compile pages

$ next experimental-compile

Pre-compile pages for faster development server startup.

Disable telemetry

$ next telemetry disable

Disable Next.js anonymous telemetry collection.

Create Vite React app

$ npm create vite@latest my-app -- --template react-ts

Create Vite project with React and TypeScript.

Create with SWC

$ npm create vite@latest my-app -- --template react-swc-ts

Create Vite project with SWC compiler (faster).

Start dev server

$ vite

Start Vite dev server with HMR.

Dev with custom port

$ vite --port 3000

Start dev server on custom port.

Build for production

$ vite build

Build production bundle with Rollup.

Preview production

$ vite preview

Preview production build locally.

Force re-optimize

$ vite --force

Force re-optimization of dependencies.

Open browser

$ vite --open

Auto-open browser on server start.

Create Vite + SWC (no TS)

$ npm create vite@latest my-app -- --template react-swc

Create Vite project with SWC compiler (JavaScript, no TypeScript).

Production build with sourcemaps

$ vite build --mode production --sourcemap

Build for production with source maps for debugging.

Preview on network

$ vite preview --host 0.0.0.0

Preview production build accessible on local network.

Create React Native app

$ npx @react-native-community/cli@latest init MyApp

Initialize new React Native project.

Start Metro bundler

$ npx react-native start

Start Metro bundler (default port 8081).

Reset Metro cache

$ npx react-native start --reset-cache

Start Metro with cache cleared.

Run on iOS

$ npx react-native run-ios

Build and run on iOS simulator.

Run on iOS device

$ npx react-native run-ios --device "iPhone"

Build and run on specific iOS device.

Run on Android

$ npx react-native run-android

Build and run on Android emulator/device.

Doctor check

$ npx react-native doctor

Diagnose and fix common issues.

View Android logs

$ npx react-native log-android

Stream Android device logs.

Clean build

$ npx react-native clean

Clean build artifacts.

Initialize Storybook

$ npx storybook@latest init

Add Storybook to existing project (auto-detects).

Start Storybook

$ npm run storybook

Start Storybook dev server (default: localhost:6006).

Storybook custom port

$ storybook dev --port 9009

Start Storybook on custom port.

Build Storybook

$ npm run build-storybook

Build static Storybook for deployment.

Add addon

$ npx storybook add @storybook/addon-a11y

Add Storybook addon.

Upgrade Storybook

$ npx storybook@latest upgrade

Upgrade to latest Storybook version.

Storybook doctor

$ npx storybook doctor

Check for known problems.

Run Jest tests

$ jest

Run all Jest tests once.

Jest watch mode

$ jest --watch

Run tests in watch mode.

Jest with coverage

$ jest --coverage

Run tests with coverage report.

Update snapshots

$ jest --updateSnapshot

Update Jest snapshots.

Run Vitest

$ vitest

Run Vitest in watch mode (Vite projects).

Vitest run once

$ vitest run

Run Vitest tests once.

Vitest with coverage

$ vitest run --coverage

Run Vitest with coverage.

Vitest UI

$ vitest --ui

Run Vitest with interactive UI.

Initialize shadcn/ui

$ npx shadcn@latest init

Set up shadcn/ui in your project.

Add shadcn component

$ npx shadcn@latest add button

Add a specific shadcn/ui component.

Add all shadcn components

$ npx shadcn@latest add --all

Add all available shadcn/ui components.

Install Tailwind

$ npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

Install and initialize Tailwind CSS.

Source map explorer

$ npx source-map-explorer 'build/static/js/*.js'

Analyze bundle with source maps.

CRA bundle analyzer

$ npx cra-bundle-analyzer

Analyze Create React App bundle.

Next.js bundle analyzer

$ ANALYZE=true npm run build

Analyze Next.js bundle (requires @next/bundle-analyzer).

Mark Server Action

$ 'use server'

Directive to mark async functions as Server Actions (top of file or function).

Mark Client Component

$ 'use client'

Directive to mark component as Client Component (required for hooks, events).

Force dynamic rendering

$ export const dynamic = 'force-dynamic'

Force page to render dynamically on every request (disable static optimization).

ISR revalidation interval

$ export const revalidate = 60

Set Incremental Static Regeneration interval in seconds (ISR).

Set cookies in Server Component

$ cookies().set('name', 'value')

Set HTTP cookies in Server Components or Server Actions.

Access headers in Server Component

$ headers().get('user-agent')

Read request headers in Server Components or Server Actions.

Enable Node.js inspector

$ npm run dev -- --inspect

Start Next.js dev server with Node.js debugging enabled (chrome://inspect).

Enable debug mode

$ NEXT_PUBLIC_DEBUG=true npm run dev

Start Next.js with debug logging enabled for troubleshooting.

Build with React profiling

$ npm run build -- --profile

Build Next.js with React profiling enabled for performance analysis.

Discussion

Loading comments...