l’installation de ReactJS

L'Équipe Alphorm
L'Équipe Alphorm Ajouter un commentaire 10e lecture en min

L’installation de ReactJS est cruciale pour créer des applications web dynamiques. Ce guide vous montre comment installer NodeJS et ReactJS sur Windows, macOS et Linux (Ubuntu/Debian). Suivez ces étapes pour configurer un environnement de développement ReactJS optimal et commencez à coder dès aujourd’hui.

 

Installation NodeJS sur Windows pour l'installation de ReactJS

Peut-être vous demandez pourquoi installer nodeJS alors notre objectif est seulement d’installer reactJS, bah oui vous avez raison.

Mais, node.js est une plateforme qui permet d’exécuter du code JavaScript côté serveur. React, d’autre part, est une bibliothèque JavaScript qui est utilisée côté client, généralement dans un navigateur web. React a besoin d’un environnement d’exécution JavaScript pour fonctionner, et Node.js est une excellente solution pour cela.

L’installation de Node.js dépend du système d’exploitation que vous utilisez. Voici comment vous pouvez installer Node.js sur quelques systèmes d’exploitation courants.

Installation NodeJS sur Windows

Téléchargez le programme d’installation de Node.js à partir du site officiel : https://nodejs.org/

Étape de téléchargement de Node.js nécessaire à l'installation de ReactJS.
Commencez votre projet ReactJS avec l'installation de Node.js.


Exécutez le programme d’installation téléchargé et suivez les étapes de l’assistant d’installation.

Processus d'installation de Node.js en cours pour le développement avec ReactJS
Étape clé : Exécution de l'installateur Node.js.
Capture d'écran des étapes de l'assistant d'installation pour préparer l'environnement ReactJS
Naviguer dans l'assistant d'installation pour configurer ReactJS.
Vue de l'explorateur de fichiers montrant où Node.js est installé sur le système
Confirmation de l'installation réussie de Node.js.
Configuration des options avancées pendant l'installation pour ReactJS.
Personnalisation de l'installation avec des paramètres avancés.
Gestion des modules natifs pour améliorer les applications ReactJS
Outils essentiels pour les modules natifs sous ReactJS.
Étapes préliminaires avant l'installation de Node.js pour ReactJS.
Étape préalable : configuration avant d'installer Node.js.
Capture d'écran montrant l'installation en cours de Node.js
Processus d'installation de Node.js en direct


Vérifiez l’installation en ouvrant une fenêtre de commande (cmd) et tapez les commandes suivantes:

				
					node -v
npm -v
				
			

Ces commandes devraient afficher la version de Node.js et de npm installées sur votre système.

"Commande terminal affichant les versions de Node.js et npm."
Vérification des versions de Node.js et npm installées.

Installation NodeJS sur macOS

L’installation de Node.js sur macOS suit presque la même procédure que sur Windows. Tout ce que vous avez à faire est de télécharger le fichier d’installation pour Mac. Ensuite, dès que vous le démarrez, le programme d’installation vous guidera pour le reste.

Tout d’abord, téléchargez le fichier d’installation macOS à partir du site web de Node.js : nodejs.org/en/download pour l’installation de ReactJS.

 

Sélection du fichier d'installation de Node.js pour macOS sur le site officiel
Téléchargez Node.js pour macOS directement depuis son site officiel.


Recherchez le fichier d’installation dans votre répertoire de téléchargement et cliquez dessus pour lancer le processus d’installation.

Le programme d’installation de Node.js contient le fichier de base de Node.js, et, par conséquent, le processus d’installation installe à la fois Node.js et npm à partir du fichier d’installation. Par conséquent, vous n’avez pas besoin d’installer npm séparément. Ensuite, cliquez sur Continuer pour poursuivre l’installation.

Processus d'installation de Node.js et npm sur un ordinateur
Installation simultanée de Node.js et npm.
Écran d'installation invitant à poursuivre le processus
Étape de confirmation pour continuer l'installation


Jusqu’à présent, vous avez défini toutes les préférences nécessaires à l’installation complète de Node.js sur macOS. Maintenant, cliquez sur le bouton Installer pour terminer les choses.

Bouton 'Installer' prêt pour finaliser l'installation.
Cliquez pour achever l'installation.


Après un processus d’installation réussi, le système vous montrera un message de confirmation. Comme npm est intégré dans l’installateur de Node.js, la notification devrait également indiquer la preuve de l’installation de npm.

Enfin, cliquez sur le bouton Fermer pour fermer la boîte de dialogue.

Fermeture de la boîte de dialogue pour terminer l'opération.
Finalisation par fermeture de la boîte de dialogue.

Vous avez maintenant installé avec succès Node.js sur votre macOS. Cependant, vous devez vérifier que le processus d’installation s’est bien déroulé et que les versions de Node.js et de npm fonctionnent correctement sur votre macOS pour l’installation de ReactJS.

Pour vérifier la version de Node.js, vous devez ouvrir votre terminal macOS, cliquer sur les touches Commande + Espace, ou rechercher le terminal dans la barre de recherche.

 

Commande terminal affichant la version de Node.js sur macOS
Affichage de la version Node.js via le Terminal sur macOS.


et taper les commandes suivantes après  node –version et npm –version

Commandes terminal pour vérifier les versions de Node.js et npm
Affichage des versions de Node.js et npm via les commandes terminal.

Installation NodeJS sur Linux (Ubuntu/Debian)

Ouvrez un terminal et tapez les commandes suivantes :

				
					sudo apt update
sudo apt-get install nodejs
				
			
Utilisation de commandes dans un terminal pour installer Node.js sur Linux
Mise à jour et installation de Node.js avec apt sur Linux.


Et pour gérer les dépendances et les bibliothèques JavaScript dans vos projets, il faut installer aussi npm (Node Package Manager) en tapant la commande :

				
					sudo apt install npm
				
			


Vérifiez l’installation avec la commande node --version

Terminal affichant la version de Node.js après vérification
Vérification de la version de Node.js via la commande terminal.

Installation reactJS

Procédure d'Installation de ReactJS

On a bien installé nodeJS dans notre système d’exploitation, passons maintenant à l’installation de notre application reactJS

Installer reactJS consiste à installer un outil qui s’appelle : Create React App

				
					npx create-react-app monApp
				
			


Cette commande crée un nouveau répertoire appelé « monApp  » qui contient une structure des dossiers comme ceci :

"Répertoire 'monApp' avec structure de dossiers affichée sur un écran d'ordinateur."
Aperçu de la structure du projet dans le répertoire "monApp".

Pour aller encore plus loin et maîtriser pleinement la création d’interfaces interactives, découvrez notre formation vidéo sur React.

Structure d'une Application ReactJS

Vous trouverez trois dossiers :

  • node_modules : c’est là que sont installées toutes les dépendances de notre code.
  • public : dans ce dossier, vous trouverez votre fichier index.html et d’autres fichiers relatifs au référencement web de votre page.
  • src : C’est le cœur de l’action et l’endroit qui nous intéresse le plus. La majorité des fichiers que vous créerez et modifierez seront situés ici.
  • package.json : situé à la racine de notre projet, il nous permet de gérer les dépendances .
  • /public : nous trouvons dedans le fichier index.html. Il s’agit du template de notre application. Vous remarquez <div id= »root »></div> , le fichier public/index.html est le point d’entrée de notre application React. Il contient la structure HTML de base et généralement une seule balise <div> avec un attribut id de « root ». C’est là où l’application React sera injectée et rendue par le ReactDOM.
  • /src : dedans il y a index.js qui permet d’initialiser notre app React. Vous trouvez App.js qui est notre premier composant React.
  • Le README.md qui permet d’afficher une page d’explication si vous mettez votre code sur GitHub.
  • Le fichier .gitignore qui précise ce qui ne doit pas être mis sur GitHub, typiquement le volumineux dossier des node_modules.

Erreurs Courantes lors de l'Installation de ReactJS

Mais parfois vous rencontrez un problème comme ceci lors de l’installation de reactjs après avoir tapé la commande :

				
					npx create-react-app monApp.
				
			
Message d'erreur lors de la tentative d'installation de ReactJS via NPX."
Problème lors de l'installation de ReactJS avec npx create-react-app monApp.


Ce problème indique qu’il ne trouve pas le chemin notre npm. Donc pour corriger ce genre de probleme, il suffit juste de taper la commande suivante pour réinstaller npm avec npm install -g npm

Et par la suite, vous constaterez qu’il y aura des packages qui seront ajoutés.

Liste de packages ajoutés à un projet affichée sur un termina
Ajout réussi de packages au projet.


Et maintenant le probleme est réglé, on reprend notre commande au-dessus pour installer notre application :

				
					npx create-react-app monApp
				
			

Lancer reactJS

Accéder au Répertoire du Projet ReactJS

Allez dans le répertoire de votre nouveau projet React monApp, comme ici cd monApp

Démarrer l'Application ReactJS

Vous pouvez démarrer votre application en tapant la commande npm start

Cela lancera un serveur de développement et ouvrira automatiquement votre application React dans votre navigateur.

 

"Commande npm start exécutée dans un terminal pour démarrer l'application."
Démarrage de l'application via npm start.
Serveur de développement React démarrant et ouvrant l'application dans un navigateur.
Démarrage automatique de l'application React via le serveur de développement.


Pour vérifier si toutes les installations sont bien faites, Ouvrez votre navigateur et accédez à l’adresse http://localhost:3000/. Vous devriez voir l’application React par défaut comme ceci :

Vérification de toutes les installations avec ouverture du navigateur et accès à l'adresse http://localhost:3000/.
Vérification et ouverture du navigateur pour accéder à l'adresse locale.

À ce stade, vous avez une application React de base fonctionnelle. Vous pouvez maintenant commencer à éditer les fichiers source dans le répertoire du projet selon vos besoins.

Voilà, on bien terminé l’installation de nodeJS et reactJS.

Conclusion

Vous savez maintenant installer NodeJS et ReactJS sur divers systèmes d’exploitation, structurer une application ReactJS, et résoudre les erreurs courantes. Avec ces compétences, lancez-vous dans le développement d’applications web performantes et réactives.  Et par la suite nous allons traiter le volet des fondamentaux ReactJS. Bonne programmation !

 
ÉTIQUETÉ : Reactjs
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.
Laisser un commentaire