Démarrer avec React

Bonjour et bienvenue sur mon troisième blog sur React ! Dans le blog précédent, nous avons vu ce qu’est React, son histoire, le Virtual DOM, les composants et JSX. Maintenant, passons à la pratique ! Aujourd’hui, nous allons voir comment installer React et lancer notre premier projet.

Avant d’installer React, il faut d’abord vérifier si Node.js est installé et connaître sa version. Ouvrez votre terminal et tapez la commande suivante :

node -v

Cette commande vous permet de voir si Node.js est installé et d'afficher la version actuelle. Si Node.js n’est pas encore installé, téléchargez-le sur le site officiel : https://nodejs.org/en. Petite astuce : n’installez pas la dernière version, car elle peut contenir des bugs avec certaines bibliothèques. Je vous recommande d’utiliser la version v20.18.3.

Pour coder plus facilement, il vous faut un éditeur de code. Je vous recommande VS Code, mais vous pouvez utiliser celui que vous voulez.Lien de téléchargement de VS Code : https://code.visualstudio.com

Une fois Node.js installé, nous allons créer notre premier projet React. Commencez par créer un dossier où vous voulez enregistrer votre projet, puis ouvrez ce dossier dans VS Code.Une fois le dossier ouvert dans le terminal de VS Code, tapez la commande suivante :

npx create-react-app <nom-de-ton-projet>

Attention :il ne faut pas commencer le nom de votre projet par une majuscule, sinon React ne l’acceptera pas.Une fois le projet généré, entrez dans le dossier du projet . Puis, lancez votre projet avec :

npm start

Cette commande va démarrer votre application React et ouvrir un onglet dans votre navigateur.Il est possible que vous rencontriez une erreur concernant web-vitals. Pas de panique ! Il suffit d’installer le package manquant avec la commande suivante :

npm install web-vitals

Puis, relancez votre application.Un fois l’application lancer vous pouver cliquer sur le lien local host ou le copier et sa vous ramenera sur la page index de react avec le logo. Dans le prochain blog, nous verrons comment modifier notre première page React et même ajouter des composants. Si vous avez des questions, n’hésitez pas à les poser en commentaire. Sur ce, je vous dis à la prochaine !!