Create React App Déprécié : Migration vers Vite et l'Avenir de React en 2025

Salut HaWkers, février 2025 a marqué la fin d'une ère : Create React App (CRA) a été officiellement déprécié par l'équipe React.

Vous souvenez-vous quand npx create-react-app my-app était la façon standard de démarrer n'importe quel projet React ? Cette ère est terminée, et une nouvelle a commencé.

L'Annonce Officielle

Le 14 février 2025, l'équipe React a publié sur le blog officiel : "Sunsetting Create React App". Le message était clair :

"Create React App a été déprécié pour les nouvelles applications. Les applications existantes doivent migrer vers un framework, ou migrer vers un outil de build comme Vite, Parcel, ou RSBuild."

Pourquoi Create React App a Été Déprécié ?

Plusieurs facteurs ont mené à cette décision :

1. Vitesse de Build

# Create React App (Webpack)
npm start
# Cold start : ~30-45 secondes
# Hot reload : ~2-5 secondes

# Vite (Rollup + esbuild)
npm run dev
# Cold start : ~1-3 secondes 🚀
# Hot reload : ~50-200ms ⚡

2. Maintenance Stagnante

Dernière mise à jour significative : 2021
Issues accumulées sans réponse
Dépendances obsolètes

3. Changement de Paradigme
React a changé sa recommandation de SPA (Single Page Application) vers des frameworks full-stack avec Server Components.

Les Alternatives Recommandées

L'équipe React recommande trois chemins différents selon votre cas d'usage :

1. Frameworks Full-Stack (Recommandation Principale)

Next.js (Vercel)

npx create-next-app@latest my-app

Idéal pour :

Sites et applications de production
Le SEO est important
Serveur et client intégrés
Vous voulez React Server Components

Remix (Shopify)

npx create-remix@latest my-app

Idéal pour :

Performance optimisée
Progressive enhancement
Nested routing avancé

2. Build Tools Modernes (Pour les SPAs)

Vite (Recommandation pour les SPAs)

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

Idéal pour :

SPAs traditionnelles
Prototypage rapide
Applications sans besoin de SSR
Vitesse maximale de développement

Parcel

npx create-react-app my-app --template parcel

Idéal pour :

Zéro configuration
Build simple

RSBuild (Basé sur Rspack)

npm create rsbuild@latest my-app

Idéal pour :

Performance extrême
Compatibilité avec Webpack

Migration de CRA vers Vite : Guide Étape par Étape

Migrons un projet Create React App existant vers Vite. C'est le chemin le plus courant pour les SPAs.

Étape 1 : Analyse du Projet Actuel

# Projet CRA typique
my-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.tsx
│   ├── index.tsx
│   └── ...
├── package.json
└── node_modules/

Étape 2 : Backup et Préparation

# Créer une branche pour la migration
git checkout -b migrate-to-vite

# Backup du package.json
cp package.json package.json.backup

Étape 3 : Installer Vite

# Supprimer les dépendances de CRA
npm uninstall react-scripts

# Installer Vite et ses plugins
npm install -D vite @vitejs/plugin-react

Étape 4 : Créer vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],

  // Résoudre les paths (si vous utilisiez jsconfig.json ou tsconfig paths)
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    }
  },

  // Configuration du serveur de dev
  server: {
    port: 3000,
    open: true,
    host: true
  },

  // Configuration du build
  build: {
    outDir: 'dist',
    sourcemap: true,
    // Configuration pour le chunk splitting optimisé
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          'ui-vendor': ['@mui/material', '@emotion/react', '@emotion/styled']
        }
      }
    }
  },

  // Variables d'environnement
  envPrefix: 'VITE_',

  // CSS
  css: {
    modules: {
      localsConvention: 'camelCase'
    }
  }
});

Étape 5 : Déplacer et Mettre à Jour index.html

# CRA garde index.html dans public/
# Vite en a besoin à la racine
mv public/index.html index.html

Mettre à jour index.html :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <!-- IMPORTANT : Vite a besoin de cette référence -->
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>

Étape 6 : Mettre à Jour les Variables d'Environnement

# CRA utilise REACT_APP_*
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=abc123

# Vite utilise VITE_*
VITE_API_URL=https://api.example.com
VITE_API_KEY=abc123

Mettre à jour le code :

// Avant (CRA)
const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;

// Après (Vite)
const apiUrl = import.meta.env.VITE_API_URL;
const apiKey = import.meta.env.VITE_API_KEY;

Pour TypeScript, créer src/vite-env.d.ts :

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_API_KEY: string;
  // Ajoutez d'autres variables ici
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Étape 7 : Mettre à Jour les Scripts package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
  },
  "dependencies": {
    "react": "^18.3.0",
    "react-dom": "^18.3.0"
  },
  "devDependencies": {
    "@types/react": "^18.3.0",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.0",
    "typescript": "^5.6.0",
    "vite": "^5.4.0"
  }
}

Étape 8 : Ajustements Courants

1. Import d'Assets

// CRA permet d'importer des fichiers du dossier public
// ❌ Ne fonctionne pas dans Vite
<img src="/images/logo.png" alt="Logo" />

// ✅ Vite
import logoUrl from './assets/logo.png';
<img src={logoUrl} alt="Logo" />

// Ou gardez dans le dossier public et utilisez un chemin absolu
// public/images/logo.png
<img src="/images/logo.png" alt="Logo" />

2. SVG comme Composants

// CRA avec SVGR intégré
import { ReactComponent as Logo } from './logo.svg';

// Vite nécessite une configuration
npm install -D vite-plugin-svgr

// vite.config.ts
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    react(),
    svgr()
  ]
});

// Maintenant ça fonctionne
import { ReactComponent as Logo } from './logo.svg?react';

3. CSS Global

// index.tsx ou App.tsx
import './index.css';
import './App.css';

Fonctionne de la même manière, sans changements.

4. CSS Modules

// Button.module.css
.button {
  background: blue;
}

// Button.tsx
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click</button>;
}

Fonctionne de la même manière.

Étape 9 : Tester la Migration

# Développement
npm run dev

# Build de production
npm run build

# Preview du build
npm run preview

Exemple Complet : App Avant et Après

Projet CRA Original

// src/index.tsx (CRA)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

// src/App.tsx (CRA)
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const apiUrl = process.env.REACT_APP_API_URL;

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>API URL: {apiUrl}</p>
      </header>
    </div>
  );
}

export default App;

Projet Vite Migré

// src/main.tsx (Vite - renommé depuis index.tsx)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// src/App.tsx (Vite)
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const apiUrl = import.meta.env.VITE_API_URL;

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>API URL: {apiUrl}</p>
      </header>
    </div>
  );
}

export default App;

Changements minimaux !

Comparaison de Performance

Temps de Build

# Create React App (Webpack)
npm run build
# Temps : ~45-60 secondes
# Taille du bundle : ~200-300 KB (minifié + gzippé)

# Vite (Rollup + esbuild)
npm run build
# Temps : ~5-10 secondes 🚀
# Taille du bundle : ~150-200 KB (minifié + gzippé)

# Amélioration : 6-10x plus rapide

Temps du Dev Server

# CRA
npm start
# Cold start : 30-45s
# Hot reload : 2-5s

# Vite
npm run dev
# Cold start : 1-3s 🚀
# Hot reload : 50-200ms ⚡

# Amélioration : 10-30x plus rapide

L'Avenir du Tooling React

Tendances pour 2025-2026

1. Vite comme Standard

Stack Overflow Survey 2025 : Vite dépasse Webpack
Adopté par Vue, React, Svelte, Solid

2. Rspack (Basé sur Rust)

Compatible avec Webpack
Performance proche de Vite
Migration plus facile des grands projets Webpack

3. Turbopack (Vercel)

Intégré à Next.js
Écrit en Rust
Promet d'être encore plus rapide que Vite

// Vision du futur
const reactToolingFuture = {
  build_tools: {
    dominant: 'Vite',
    emerging: ['Rspack', 'Turbopack', 'Farm'],
    declining: ['Webpack', 'Create React App']
  },

  frameworks: {
    ssr: ['Next.js', 'Remix', 'Gatsby'],
    spa: 'Vite + React',
    hybrid: 'Emerging patterns'
  },

  developer_experience: {
    startup_time: '<1 seconde',
    hot_reload: '<100ms',
    build_time: '<10 secondes'
  }
};

Checklist de Migration

- [ ] Backup du projet (git branch ou copie)
- [ ] Installer Vite et dépendances
- [ ] Créer vite.config.ts
- [ ] Déplacer index.html à la racine
- [ ] Mettre à jour index.html avec script module
- [ ] Renommer variables d'environnement (REACT_APP_* → VITE_*)
- [ ] Mettre à jour le code pour import.meta.env
- [ ] Ajuster les imports d'assets si nécessaire
- [ ] Configurer SVGR si vous utilisez des SVG comme composants
- [ ] Mettre à jour les scripts du package.json
- [ ] Tester npm run dev
- [ ] Tester npm run build
- [ ] Tester npm run preview
- [ ] Vérifier les fonctionnalités critiques
- [ ] Mettre à jour CI/CD si nécessaire
- [ ] Mettre à jour la documentation du projet

Si vous êtes intéressé par d'autres changements importants dans l'écosystème React, je vous recommande de jeter un œil à un autre article : React Foundation : La Nouvelle Ère de l'Écosystème React Sous la Linux Foundation où vous découvrirez comment la gouvernance de React change en 2025.

C'est parti ! 🦅

📚 Vous Voulez Approfondir Vos Connaissances en JavaScript ?

Cet article a couvert les outils de build modernes pour React, mais il y a beaucoup plus à explorer dans le développement web moderne.

Les développeurs qui investissent dans des connaissances solides et structurées tendent à avoir plus d'opportunités sur le marché.

Matériel d'Étude Complet

Si vous voulez maîtriser JavaScript du basique à l'avancé, j'ai préparé un guide complet :

Options d'investissement :

€9,90 (paiement unique)

👉 Découvrir le Guide JavaScript

💡 Matériel mis à jour avec les meilleures pratiques du marché

Create React App Déprécié : Migration vers Vite et l'Avenir de React en 2025

L'Annonce Officielle

Pourquoi Create React App a Été Déprécié ?

Les Alternatives Recommandées

1. Frameworks Full-Stack (Recommandation Principale)

2. Build Tools Modernes (Pour les SPAs)

Migration de CRA vers Vite : Guide Étape par Étape

Étape 1 : Analyse du Projet Actuel

Étape 2 : Backup et Préparation

Étape 3 : Installer Vite

Étape 4 : Créer vite.config.ts

Étape 5 : Déplacer et Mettre à Jour index.html

Étape 6 : Mettre à Jour les Variables d'Environnement

Étape 7 : Mettre à Jour les Scripts package.json

Étape 8 : Ajustements Courants

Étape 9 : Tester la Migration

Exemple Complet : App Avant et Après

Projet CRA Original

Projet Vite Migré

Comparaison de Performance

Temps de Build

Temps du Dev Server

L'Avenir du Tooling React

Tendances pour 2025-2026

Checklist de Migration

C'est parti ! 🦅

📚 Vous Voulez Approfondir Vos Connaissances en JavaScript ?

Matériel d'Étude Complet

Commentaires (0)

Ajouter des commentaires