Introduction
Maintenant qu'on est au courant de ce que React peut offrir, c'est le moment de se mettre en pratique afin de créer des applications front-end dynamique. Le blog d'aujourd'hui sera consacré uniquement à la création d'une application React.
Étapes du tutoriel
Ce tutoriel passera sur les étapes importantes pour accomplir ce projet. Il est possible que vous rencontriez des problèmes de votre côté. C'est pour cela, qu'à la fin de ce tutoriel, je vais corriger quelques bugs communs que j'ai également rencontré lors de mes expériences.
Utiliser un framework
Avant de commencer, il faut comprendre que je ferais uniquement l'installation d'un projet React vierge. Et quand je dis vierge, je parle d'un projet sans framework. Il est possible d'utiliser des frameworks telle que Next.js pour créer des applications React qui régleront des problèmes assez complexe à corriger lorsque votre application prendra un peu plus d'ampleur. Or, dans ce tutoriel, on travaillera avec un projet léger pour goûter aux éléments importants de React. Ce chemain d'apprentissage est parfait pour apprendre les bases étapes par étapes.
Tutoriel
1. Les pré-requis
Pour créer un projet React, il faut d'abord s'assurer que votre machine possède npm
Pour vérifier si c'est le cas, ouvrez un terminal de commande et entrer la commande suivante :
npm -v
Si vous obtenez un numéro de version (peu importe lequel.) alors npm est installé
10.5.0
Sinon je vous invite à suivre le guide d'installation ici
2. Création de l'application React
À cette étape du tutoriel, vous êtes enfin prêt pour créer votre premier projet React.
Dans votre terminal, diriger vous vers le répertoire ou vous voulez créer votre projet.
Ensuite, utilisez la commande suivante pour initialiser le projet React
npx create-react-app mon-application
Cette commande utilise npx (Node Package eXecute), un outil fourni avec Node.js à partir de la version 5.2.0 de npm. Il permet d'executer des paquets npm sans les installer globalement dans votre machine.
Ensuite, on rentre la commande "create-react-app" qui va initialiser le projet React.
Enfin, on indique le nom du projet, dans mon exemple il s'agit de "mon-application"
Bonus
Si vous êtes un fan du langage Typescript vous pouvez utiliser la commande suivante pour faire un projet React avec cette technologie
npx create-react-app mon-application --template typescript
3. Détails du projet
Parfait, le projet existe. Explorons un peu le contenu de celui-ci
Dirigez vous dans le répertoire de votre application
cd mon-application
On retrouve plusieurs répertoires et fichiers.
Structure d'une application React basique
Voici la structure d'un projet React :
-
node_modules/ : Ce répertoire contient toutes les dépendances et modules nécessaires pour votre application.
-
public/ : Ce répertoire contient les fichiers statiques de votre application, comme
index.html, qui est l'endroit ou commence votre application React. -
src/ : C'est ici que vous allez écrire la majorité du code. Ce répertoire contient généralement :
- index.js : Le fichier principal qui monte votre application React dans le DOM
- App.js : Le composant principal de votre application
- styles/ : Un répertoire pour vos fichiers CSS
-
package.json : Contient les informations sur votre projet et les dépendances nécessaires.
-
.gitignore : Ce fichier indique quels fichiers ou répertoires doivent être ignorés par Git.
-
README.md : Un fichier de documentation pour votre projet.
4. Commencer l'application
Maintenant il reste qu'à lancer le projet avec la commande
npm start
Ouvrez votre navigateur web et dirigez vous vers le lien http://localhost:3000
Vous devriez voir le résultat suivant
5. Installer des packages
Vous pouvez également installer des packages que vous utilisez ou qui vous interesse.
Personnellement, j'aime bien la librairie GSAP qui permet de facilement faire des animations fluides donc pour l'installer, je pourrais simplement faire
npm install gsap
Assurez-vous de voir la documentation du package souhaité avant de l'installer.
6. Résolution de bugs communs
Lorsque j'ai fait des experiences, j'ai rencontré ce problème qui m'empêchait de lancer mon application React.
- failed to compile -/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals'
Après une rapide recherche en ligne, j'ai trouvé le problème. Il s'agit en fait d'un simple manque de module.
Pour corriger cela, il suffit d'entrer la commande suivante :
npm i web-vitals --save-dev
Conclusion
Voilà, c'est tout pour aujourd'hui. Maintenant que nous avons notre projet React en place, nous pourrons enfin commencer à aller plus en détails sur React la semaine prochaine.
Commentaires