React-Scripts Démarrer en React

Construire une application React à partir de zéro est techniquement possible, mais vous devez créer tous les fichiers et ajuster la configuration, ce qui peut prendre du temps. À la place, vous pouvez donc utiliser create-react-app, qui fournit un environnement convivial pour développer votre application React. Il comprend également des scripts et des configurations que vous pouvez utiliser pour démarrer le serveur de développement, activer le rechargement à chaud et d’autres fonctionnalités essentielles.

react-scripts dans create-react-app

L’installation du package create-react-app vous permet de configurer une application React entièrement capable avec une seule commande. En tant que développeur, vous n’avez qu’à taper npm run start dans la ligne de commande pour créer une application live sur votre serveur localhost. La configuration de base create-react-app comprend également tout un ensemble de scripts nécessaires pour exécuter une application. Il est configuré de cette façon pour éviter aux débutants la peine de configurer eux-mêmes les projets. Cependant, les react-scripts peuvent être personnalisés dans le fichier package.json.

react-scripts start

Pour exécuter ce script, exécutez npm run start dans votre ligne de commande. Vous pouvez également utiliser la commande abrégée npm start. Il indique à create-react-app de configurer un environnement de développement, de démarrer un serveur local et de recharger un module à chaud.

Votre fichier package.json doit inclure un objet scripts, avec des paires clé-valeur qui référencent le nom du script et une référence pour l’exécution. Il s’agit simplement d’un moyen plus simple de dire à React d’exécuter la commande npm-run-all -p watch-css start-js, qui effectue plusieurs actions. Dans ce cas, npm run start déclenche l’exécution de deux scripts : watch-css et start-js. Le premier garantit que les fichiers .scss sont traduits en fichiers .css réguliers et que vos changements de style sont automatiquement reflétés dans votre application. Ce dernier indique à React de configurer l’application en mode développement et d’utiliser localhost:3000 pour l’héberger.

Personnalisation

npm start est simplement une commande. Vous pouvez personnaliser ses actions si nécessaire. Par exemple, vous pouvez configurer le port localhost pour héberger l’application. Voici un exemple :

'scripts': {
  'start': 'set PORT=8000 && react-scripts start',
  'build': 'react-scripts build',
  'test': 'react-scripts test',
  'eject': 'react-scripts eject'
}

Ici, nous disons explicitement au script d’utiliser le port localhost:8000 au lieu du port par défaut.

Vous pouvez également exécuter d’autres scripts en entrant npm run scriptName dans la ligne de commande. Si vous exécutez une application create-react-app et que vous n’arrivez pas à comprendre ce que fait un script, regardez dans le fichier package.json.