Introduction à create-react-app

create-react-app est le moyen le plus simple de démarrer une application React

create-react-appest un projet visant à vous familiariser avec React en un rien de temps. Il fournit un démarreur d'application React prêt à l'emploi, vous permettant ainsi de vous plonger dans la création de votre application sans avoir à gérer les configurations Webpack et Babel.

Il fournit hors de la boîte:

  • un serveur de développement avec rechargement à chaud
  • fournit un environnement de test avec Jest
  • permet de construire l'application React
  • prêt pour la syntaxe ES6 +
  • regroupe tous vos JavaScript et ressources
  • est livré avec le préfixeur automatique CSS, la prise en charge des modules SASS et CSS
  • et plus!

Vous commencez par utilisernpx, qui est un moyen simple de télécharger et d'exécuter les commandes Node.js sans les installer.npxlivré avecnpm(depuis la version 5.2) et si vous n'avez pas encore installé npm, faites-le maintenant à partir dehttps://nodejs.org(npm est installé avec Node).

Si vous ne savez pas quelle version vous avez, je vous recommande de vérifier si vous devez mettre à jour.

Astuce: consultez mon didacticiel sur le terminal à l'adressehttps://flaviocopes.com/macos-terminal/si vous ne le connaissez pas

Quand tu coursnpx create-react-app <app-name>,npxvaTéléchargerla plus récentecreate-react-apprelâchez, exécutez-le, puis supprimez-le de votre système. C'est génial parce que vous n'aurez jamais une version obsolète sur votre système, et chaque fois que vous l'exécutez, vous obtenez le dernier et le meilleur code disponible.

Commençons alors:

npx create-react-app todolist

C'est à ce moment-là qu'il a fini de fonctionner:

create-react-appa créé une structure de fichiers dans le dossier que vous avez indiqué (todolistdans ce cas), et a initialisé unGitdépôt.

Il a également ajouté quelques commandes dans lepackage.jsonfichier, afin que vous puissiez immédiatement démarrer l'application en allant dans le dossier et exécuteznpm start.

En plus denpm start,create-react-appa ajouté quelques autres commandes:

  • npm run build: pour construire les fichiers de l'application React dans lebuilddossier, prêt à être déployé sur un serveur
  • npm test: pour exécuter la suite de tests en utilisantPlaisanter
  • npm eject: pour éjecter decreate-react-app

Ejecter est l'acte de décider quecreate-react-appa fait assez pour vous, mais vous voulez faire plus que ce qu'il permet.

Puisquecreate-react-appest un ensemble de conventions de dénominateur commun et un nombre limité d'options, il est quelque peu garanti qu'à un moment donné, vos besoins vous demanderont quelque chose d'unique qui dépasse les capacités decreate-react-app.

Lorsque vous éjectez, vous perdez la capacité des mises à jour automatiques mais vous gagnez plus de flexibilité dans leBabeletWebpackconfiguration.

Lorsque vous éjectez, l'action est irréversible. Vous obtiendrez 2 nouveaux dossiers dans votre répertoire d'application,configetscripts. Ceux-ci contiennent toute la configuration dont vous avez besoin et vous pouvez maintenant commencer à la modifier.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: