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/
Exécutez le programme d’installation téléchargé et suivez les étapes de l’assistant d’installation.
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.
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.
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.
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.
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.
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.
et taper les commandes suivantes après node –version et npm –version
Installation NodeJS sur Linux (Ubuntu/Debian)
Ouvrez un terminal et tapez les commandes suivantes :
sudo apt update
sudo apt-get install nodejs
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
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 :
Formation React 18 - Maîtriser la Création d'Interfaces Interactives
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
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.
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.
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.
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 :
À 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.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
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 !
