R

Node.js & npm

Pour développer avec React, nous avons besoin d'outils qui facilitent l'installation de bibliothèques et la gestion de notre projet. Cette page explique Node.js et npm.

À l'IUT

Node.js et npm sont déjà installés sur les machines de l'IUT. Cette page explique leur rôle et comment les utiliser.

Si vous travaillez sur votre machine personnelle, l'installation est simple : téléchargez Node.js depuis nodejs.org (version LTS) et npm sera installé automatiquement.

Pourquoi avons-nous besoin d'outils ?

React est une bibliothèque JavaScript, mais contrairement à un simple fichier HTML/CSS, le développement React utilise des outils de build pour :

  • Installer des bibliothèques - React, React Router, et des centaines d'autres
  • Transformer le code JSX - En JavaScript que le navigateur comprend
  • Serveur de développement - Rechargement automatique pendant le développement
  • Optimiser pour la production - Minification, bundling

C'est là qu'interviennent Node.js et npm.

Node.js : JavaScript côté serveur

Qu'est-ce que Node.js ?

Node.js est un environnement d'exécution JavaScript qui permet de faire tourner du code JavaScript en dehors du navigateur.

JavaScript peut s'exécuter à deux endroits

Dans le navigateur :

  • Sites web et applications
  • Manipulation du DOM
  • Interactions utilisateur

Avec Node.js :

  • Serveurs et APIs
  • Outils en ligne de commande
  • Scripts et automatisation

Pourquoi Node.js pour React ?

Node.js n'est PAS obligatoire en production

Node.js est utilisé pendant le développement, pas en production :

✅ Pendant le développement :

  • Installer React et ses dépendances
  • Lancer le serveur de développement
  • Compiler le code JSX
  • Créer le build de production

❌ En production : Le code React final tourne dans le navigateur, pas sur Node.js

Vérifier Node.js

bash
# Vérifier la version installée
node --version
# Exemple : v20.10.0

# Si la commande fonctionne, Node.js est installé !

Quel est le rôle principal de Node.js dans un projet React ?

npm : Le gestionnaire de paquets

Qu'est-ce que npm ?

npm (Node Package Manager) est installé automatiquement avec Node.js. C'est un outil qui permet de :

  • Installer des bibliothèques (React, React Router, etc.)
  • Gérer les dépendances d'un projet
  • Exécuter des scripts (lancer le serveur, build, tests)
bash
# Vérifier npm
npm --version
# Exemple : 10.2.3

Comment fonctionne npm ?

Chaque projet Node.js a un fichier package.json qui liste toutes les bibliothèques nécessaires :

json
{
  "name": "mon-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

Quand vous faites npm install :

  1. npm lit package.json
  2. Télécharge toutes les bibliothèques listées
  3. Les place dans un dossier node_modules/
  4. Crée package-lock.json (verrouille les versions exactes)

node_modules est énorme !

Le dossier node_modules/ peut contenir des milliers de fichiers et peser plusieurs centaines de Mo.

C'est normal ! Mais ne le committez jamais sur Git (utilisez .gitignore).

Pour recréer node_modules/ sur un autre ordinateur :

bash
npm install  # Réinstalle tout depuis package.json

Commandes npm essentielles

Voici les commandes que vous utiliserez quotidiennement :

bash
# Installer toutes les dépendances d'un projet
npm install
# Raccourci : npm i

# Installer une nouvelle bibliothèque
npm install react-router-dom

# Lancer le serveur de développement
npm run dev

# Créer le build de production
npm run build

# Créer un nouveau projet
npm create vite@latest

npm run vs npm

  • npm install, npm test → Commandes natives npm
  • npm run dev, npm run build → Scripts définis dans package.json

Les scripts sont définis dans la section "scripts" du package.json.

Que fait la commande 'npm install' dans un projet React existant ?

Alternatives à npm

Il existe d'autres gestionnaires de paquets compatibles avec Node.js :

pnpm - Plus rapide et économe en espace disque que npm. Utilise un système de liens symboliques pour partager les dépendances entre projets.

bash
pnpm install
pnpm run dev

Yarn - Alternative créée par Facebook, syntaxe légèrement différente. Les versions récentes de npm ont comblé l'écart de performance.

Pour ce cours

Tous les exemples utilisent npm car c'est installé par défaut avec Node.js. Si vous connaissez déjà pnpm, vous pouvez l'utiliser - les commandes sont identiques.

Note : Bun est un runtime JavaScript complet (alternative à Node.js), pas juste un gestionnaire de paquets. Il n'est pas couvert dans ce cours.

Checklist : Environnement prêt

Avant de continuer, vérifiez que tout fonctionne :

Vérifications

  • [ ] node --version affiche une version ≥ 18
  • [ ] npm --version fonctionne
  • [ ] Vous comprenez que Node.js exécute JavaScript hors du navigateur
  • [ ] Vous comprenez que npm installe des bibliothèques JavaScript
  • [ ] Vous savez ouvrir un terminal/invite de commandes

Résumé

À retenir

Node.js

  • Runtime JavaScript qui s'exécute hors du navigateur
  • Nécessaire pour utiliser npm et les outils de build
  • Utilisé pendant le développement, pas en production

npm

  • Gestionnaire de paquets (installé avec Node.js)
  • Installe React et toutes les bibliothèques JavaScript
  • Gère les dépendances via package.json
  • Commandes essentielles : npm install, npm run dev, npm run build

node_modules

  • Dossier contenant toutes les bibliothèques installées
  • Peut être très volumineux (plusieurs centaines de Mo)
  • Ne jamais committer sur Git
  • Se recrée avec npm install

Ressources

Node.js Documentation

Documentation officielle de Node.js

Documentation

npm Documentation

Guide complet de npm

Documentation

pnpm

Alternative rapide et économe à npm

Site web