Qu'est-ce que les scripts React ? Guide du développeur

Si vous avez déjà créé une application React en utilisant Create React App (CRA), vous avez utilisé react-scripts. Mais que font exactement ces scripts en coulisses ? Dans ce guide, nous allons expliquer ce qu’est react-scripts, ce que fait chaque script, et quand vous pourriez avoir besoin de le personnaliser ou de le remplacer.

Qu’est-ce que react-scripts ?

react-scripts est un package NPM qui est livré avec Create React App (CRA). Il contient la configuration et les scripts nécessaires pour exécuter, construire, tester et linter une application React. Plutôt que d’écrire et de maintenir vous-même des fichiers de configuration pour Webpack, Babel ou ESLint, CRA s’appuie sur react-scripts pour gérer cette complexité en arrière-plan.

Lorsque vous créez une nouvelle application React en utilisant CRA :

npx create-react-app my-app

CRA installe react-scripts et configure les scripts par défaut dans votre package.json :

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Que font les commandes ?

npm start

• Lance le serveur de développement en utilisant Webpack Dev Server
• Active le remplacement de module à chaud (HMR)
• Utilise Babel et les variables d’environnement (depuis .env)
• Ouvre votre application dans le navigateur par défaut

npm run build

• Compile votre application pour la production
• Minifie JavaScript et CSS
• Génère des fichiers statiques dans le répertoire build/
• Optimise les performances (tree-shaking, compression)

npm test

• Exécute les tests en utilisant Jest
• Surveille les fichiers par défaut
• Prend en charge les rapports de couverture et les tests avec mocks

npm run eject

• Copie toutes les configurations et dépendances dans votre projet
• Donne un contrôle total sur Webpack, Babel, ESLint, etc.
• Irréversible — il n’y a pas de retour en arrière possible

Quelle est la place de react-scripts dans CRA ?

Create React App met en place la structure du projet. Mais c’est react-scripts qui exécute l’application, construit le bundle et gère tout le travail lourd.

CRA sans react-scripts ne fonctionnerait pas, à moins que vous ne remplaciez manuellement chaque configuration sous-jacente — ce qui est exactement ce qui se passe lorsque vous éjectez.

Quand remplacer ou modifier react-scripts

Parfois, l’abstraction est limitante. Vous pourriez avoir besoin de :

• Personnaliser les loaders ou les alias Webpack
• Utiliser différents plugins Babel
• Modifier le comportement d’ESLint

Vous avez trois options :

1. Éjecter

npm run eject

• Contrôle total, mais complexe et irréversible

2. Personnaliser sans éjecter

• Utiliser des bibliothèques comme :
  • craco (Create React App Configuration Override)
  • react-app-rewired
• Ces outils encapsulent react-scripts et vous permettent d’injecter une configuration personnalisée

3. Remplacer entièrement

• Si CRA ne répond plus à vos besoins, envisagez :
  • Vite
  • Next.js
  • Parcel

Erreurs courantes et comment les résoudre

'react-scripts' is not recognized as a command

• Généralement causé par un node_modules manquant
• Solution :

rm -rf node_modules
rm package-lock.json
npm install

Échec de build après mise à jour de package

• Vérifiez si votre version de react-scripts correspond à votre version de React
• Évitez de mettre à jour manuellement react-scripts sans consulter le changelog

Create React App et react-scripts sont-ils toujours pertinents ?

Oui — pour les débutants, les projets d’apprentissage et les prototypes rapides, CRA + react-scripts offre une façon sans configuration de développer avec React. Mais des alternatives modernes comme Vite et Next.js sont plus rapides, plus flexibles et plus pérennes pour les applications plus importantes.

Conclusion

react-scripts est ce qui alimente chaque application React basée sur CRA. Il gère le bundling, les tests, le linting et plus encore sans exposer des outils complexes. Si vous débutez, c’est un excellent moyen de vous concentrer sur l’apprentissage de React lui-même. À mesure que votre application se développe, vous pouvez choisir de le personnaliser ou de le remplacer.

FAQ