Prérequis logiciels (Node.js, npm/yarn)

Pourquoi des outils serveur pour du code navigateur ?

Avant de plonger dans le développement avec React, qui est une bibliothèque s'exécutant principalement dans le navigateur de l'utilisateur, il est nécessaire d'installer quelques outils qui fonctionnent en dehors du navigateur, sur votre machine de développement. Cela peut sembler contre-intuitif au premier abord, mais ces outils sont essentiels pour l'écosystème de développement JavaScript moderne.

Ils nous permettent de gérer les dépendances de notre projet (les bibliothèques externes comme React elle-même), de transpiler notre code (par exemple, transformer JSX en JavaScript standard), d'optimiser notre application pour la production (minification, bundling), et de lancer un serveur de développement local pour tester notre travail efficacement. Les deux outils fondamentaux dont nous avons besoin sont Node.js et un gestionnaire de paquets (npm ou yarn).

Node.js : Le moteur JavaScript hors du navigateur

Node.js est un environnement d'exécution JavaScript open-source qui permet d'exécuter du code JavaScript en dehors d'un navigateur web. Il est construit sur le moteur JavaScript V8 de Chrome. Bien que votre code React final s'exécute dans le navigateur du client, Node.js est indispensable pendant la phase de développement pour plusieurs raisons :

• Outillage de build : De nombreux outils utilisés pour construire, tester et optimiser les applications React (comme Webpack, Babel, ESLint, etc.) sont écrits en JavaScript et s'exécutent grâce à Node.js.
• Serveur de développement : Des outils comme Create React App ou Vite utilisent Node.js pour lancer un serveur web local qui sert votre application pendant le développement, offrant des fonctionnalités comme le rechargement à chaud (hot reloading).
• Gestion des paquets : Node.js est livré avec npm, le gestionnaire de paquets par défaut, qui permet d'installer et de gérer les bibliothèques nécessaires à votre projet.

En résumé, même si vous ne prévoyez pas d'écrire de code backend avec Node.js, il est un prérequis essentiel pour l'écosystème de développement frontend moderne, y compris pour React.

Gestionnaires de paquets : npm et yarn

Un gestionnaire de paquets est un outil qui automatise le processus d'installation, de mise à jour, de configuration et de suppression des paquets logiciels (bibliothèques, frameworks, outils) dont dépend votre projet. Dans l'écosystème JavaScript, les deux plus populaires sont npm et yarn.

npm (Node Package Manager) est le gestionnaire de paquets par défaut qui est installé automatiquement avec Node.js. Il gère les dépendances de votre projet via un fichier appelé `package.json` et télécharge les paquets depuis le registre npm (le plus grand dépôt de logiciels au monde). Il utilise également un fichier `package-lock.json` pour garantir que les mêmes versions des dépendances sont installées à chaque fois, assurant ainsi des builds déterministes.

Yarn a été développé par Facebook (maintenant Meta) comme une alternative à npm, visant initialement à améliorer la vitesse, la fiabilité et la sécurité. Il utilise également le fichier `package.json` mais génère un fichier `yarn.lock` pour le versionnement déterministe. Aujourd'hui, npm a rattrapé une grande partie de son retard sur Yarn en termes de fonctionnalités et de performances, mais Yarn reste une option très populaire et fiable. Vous pouvez choisir d'utiliser l'un ou l'autre ; ils sont largement interchangeables pour la plupart des tâches courantes.

Installation et vérification

Pour commencer, vous devez installer Node.js. Nous vous recommandons d'installer la version LTS (Long-Term Support), qui est la plus stable et bénéficie d'un support à long terme. Rendez-vous sur le site officiel nodejs.org et téléchargez l'installateur correspondant à votre système d'exploitation (Windows, macOS, Linux). Suivez les instructions d'installation. N'oubliez pas que npm est inclus dans l'installation de Node.js.

Une fois l'installation terminée, ouvrez votre terminal (Invite de commandes ou PowerShell sur Windows, Terminal sur macOS/Linux) et vérifiez que Node.js et npm sont correctement installés en tapant les commandes suivantes :

# Vérifier la version de Node.js
node -v

# Vérifier la version de npm
npm -v

Ces commandes devraient afficher les numéros de version installés. Si vous préférez utiliser Yarn, vous pouvez l'installer globalement via npm après avoir installé Node.js :

# Installer Yarn globalement
npm install --global yarn

Ensuite, vérifiez l'installation de Yarn :

# Vérifier la version de Yarn
yarn -v

Avec Node.js et l'un des gestionnaires de paquets (npm ou yarn) installés, votre machine est prête pour la prochaine étape : la création de votre premier projet React.