Guide complet React avec Create React App et Vite : commandes CLI pour créer des applications SPA, composants, hooks et gestion d'état moderne.
npx create-react-app
[Déprécié] Crée une nouvelle application React avec Create React App
--template--use-npm--use-pnp--typescript--scripts-version--verbose
npm create vite@latest
Crée un nouveau projet React avec Vite (recommandé par React)
----template--ts--react⚠️--swc
npm run dev
Lance le serveur de développement Vite
----host--port--open--cors--strictPort--force⚠️--mode
npm run build
Compile l'application React pour la production
----mode--target--outDir--assetsDir--minify--sourcemap--watch
npm run preview
Prévisualise l'application buildée localement
----host--port--open--strictPort
npx create-next-app@latest
Crée un nouveau projet React avec Next.js
--ts--tailwind--eslint--app--src-dir--import-alias--use-npm--use-yarn--use-pnpm--example-e
npm run dev
Lance le serveur de développement Next.js
---p--port-H--hostname--experimental-https--turbo
npm run build
Build l'application Next.js pour la production
----profile--debug--no-lint--no-mangling--experimental-build-mode
npm run start
Démarre le serveur de production Next.js
---p--port-H--hostname--keepAliveTimeout
npm run lint
Lance ESLint pour vérifier le code React
----fix⚠️--quiet--ext--format⚠️--max-warnings--output-file⚠️--cache
npx eslint src
Lance ESLint directement sur le dossier source
--fix⚠️--quiet--ext--format⚠️--max-warnings--cache--ignore-path
npm run format
Formate le code avec Prettier
----write--check--config--ignore-path--parser
npm run test
Lance les tests avec Jest
----watch--coverage--verbose--runInBand⚠️--maxWorkers--testNamePattern-t--updateSnapshot-u
npx jest
Exécute Jest directement
--watch--watchAll--coverage--verbose--runInBand⚠️--maxWorkers--testNamePattern-t--updateSnapshot-u--bail--silent--onlyChanged-o
npx tsc
Vérifie les types TypeScript dans un projet React
--noEmit--watch-w--project-p--pretty--skipLibCheck--strict
npx npm-check-updates
Vérifie les mises à jour des dépendances React
-u--interactive-i--filter⚠️-f⚠️--target-t--registry⚠️-r⚠️--doctor
npm run eject
Éjecte la configuration Create React App (irréversible)
npx sb init
Initialise Storybook dans un projet React
--type--builder--use-npm--skip-install--yes-y--force⚠️-f⚠️
npm run storybook
Lance le serveur de développement Storybook
---p--port-h--host--ci--https--ssl-ca--ssl-cert--ssl-key--smoke-test--quiet--no-open
npm run build-storybook
Build Storybook pour le déploiement
---o--output-dir--loglevel--quiet--webpack-stats-json--preview-url--force-build-preview⚠️--test
npx playwright test
Lance les tests E2E avec Playwright
--headed--debug--ui--project--grep-g--grep-invert--max-failures⚠️--workers-j--timeout
npx cypress open
Ouvre Cypress Test Runner
--config-c--env-e--browser-b--port-p--headed--project
npx cypress run
Exécute les tests Cypress en headless
--spec-s--browser-b--headed--no-exit--port-p--config-c--env-e--record⚠️--parallel--group
npm run clean
Script personnalisé : nettoie les dossiers de build et node_modules
npx http-server build
Sert le dossier build avec un serveur HTTP simple
-p--port-a--address-c--cache--cors--gzip--brotli--ssl--cert--key
npx vercel
Déploie l'application React sur Vercel
--prod--confirm--no-clipboard--token-t--scope-S--name--env
npx netlify deploy
Déploie l'application React sur Netlify
--prod--open--message-m--site-s--auth-a--dir--functions⚠️--json--timeout
npx react-generator-app create
CLI alternative pour créer un projet React avec choix interactifs
npx rcli new
CLI alternative pour scaffold un projet React
-t--test-l--linter-d--directory
npx rcli generate component
Génère un composant React avec rcli
-c--component-d--directory-f⚠️--folder⚠️-s--stateless--include-test
npx eslint-plugin-react
Installe et configure le plugin ESLint pour React
npx react-codemod
Exécute des codemods pour migrer le code React
--parser--extensions-j--jobs--ignore-config--verbose
npx jscodeshift
Transforme le code React avec jscodeshift
-t--transform-p--parser--extensions-d--dry--print--verbose
npx react-devtools
Lance React DevTools en standalone
npx size-limit
Vérifie la taille du bundle React
--json--output--why--debug--limit--config
npx webpack
Bundle manuellement une application React avec Webpack
--config--mode--watch--env--profile--json--progress
npx webpack serve
Lance le serveur de développement Webpack
--config--mode--open--port--host--hot--live-reload⚠️--https--progress
npx tsup
Bundle une librairie React avec tsup (basé sur esbuild)
--format⚠️--legacy-output--target--sourcemap--minify--dts--watch--clean--entry--external--platform
npx microbundle
Bundle une librairie React avec microbundle
--entry--output--format⚠️--target--jsx--tsconfig--css--no-sourcemap--compress--watch--raw⚠️
npx npm pack
Crée un package tarball de la librairie React pour test local
--dry-run⚠️
npx changeset
Gère les changements de version pour une librairie React
initaddversionpublishstatuspre
npx lerna
Gère un monorepo React avec Lerna
bootstraprunexec⚠️addchangeddifflsversionpublishclean
npx nx
Exécute des tâches dans un monorepo React avec Nx
buildservetestlinte2egraphresetformat⚠️migrateaffectedrun-many
npx turbo
Exécute des tâches avec Turborepo
builddevlinttestcleanprunerunlslinkunlink⚠️loginlogout
npx rsbuild
Build React avec Rsbuild (alternative rapide à Webpack)
devbuildpreviewinspect--config-c--open--port--host
npx ladle
Alternative à Storybook pour les composants React
servebuildpreview--port--base--out
npx analyze
Analyse la taille du bundle (via source-map-explorer)
--html--json--tsv--gzip--only-mapped
npx prettier --write .
Formate tout le projet React avec Prettier
--check--config--ignore-path--parser--print-width--tab-width--single-quote--trailing-comma
npx rimraf
Supprime récursivement des dossiers (node_modules, dist, .next)
--glob-g--verbose
npx cross-env
Définit des variables d'environnement cross-platform
