Cours JavaScript et React · Module 1: Bases de React
Installation de Node.js et npm
Dans cette leçon6
Avant de commencer à utiliser React, nous devons installer les outils de base : Node.js et npm (Node Package Manager). C'est comme préparer les réserves d'oxygène et de carburant avant de partir dans l'espace.
Qu'est-ce que Node.js ?
Node.js est une plateforme qui te permet d'exécuter du JavaScript en dehors du navigateur. Traditionnellement, JavaScript était un langage qui ne s'exécutait que dans les navigateurs, mais Node.js a changé cela en permettant aussi d'exécuter du JavaScript sur des serveurs et dans des outils de développement.
Pour un développeur React, Node.js est indispensable pour :
- Lancer un serveur de développement local
- Utiliser un gestionnaire de paquets (npm ou yarn)
- Construire et compiler les applications
- Exécuter des outils comme les linters, les formateurs et les tests
Qu'est-ce que npm ?
npm (Node Package Manager) est le plus grand registre de paquets logiciels au monde. C'est un dépôt contenant des millions de paquets et de bibliothèques que tu peux ajouter à ton projet. Imagine un gigantesque catalogue de pièces détachées pour vaisseaux spatiaux : quoi que tu cherches, tu le trouveras probablement dans npm.
Processus d'installation de Node.js et npm
Pour Windows :
- Rends-toi sur le site officiel de Node.js
- Télécharge la version LTS (Long-Term Support) : c'est la version la plus stable et la plus recommandée pour la plupart des utilisateurs
- Lance l'installateur téléchargé et suis les instructions
- L'installateur installera automatiquement Node.js et npm
Pour macOS :
Option 1 : Installateur
- Rends-toi sur Node.js et télécharge l'installateur pour macOS
- Lance l'installateur et suis les instructions
Option 2 : Homebrew (recommandé si tu as déjà Homebrew)
- Ouvre le terminal
- Tape :
brew install node
Pour Linux :
Le paquet nodejs des dépôts de ta distribution est souvent trop ancien pour Vite (Ubuntu 22.04 installe Node 12, Ubuntu 24.04 et Debian 12 installent Node 18, alors que Vite actuel demande Node 20.19 ou plus récent). Le plus sûr est d'installer la version LTS actuelle avec nvm (gestionnaire de versions de Node) : copie la commande d'installation de nvm depuis la page de téléchargement de nodejs.org (choisis Linux et nvm), puis lance :
1nvm install --ltsVérifier l'installation
Une fois l'installation terminée, ouvre le terminal (ou l'invite de commandes) et vérifie l'installation en tapant :
1node -v
2npm -vTu devrais voir des numéros de version, par exemple v22.12.0 pour Node.js et 10.9.0 pour npm (les tiens peuvent être plus récents). Node.js doit être au moins en version 20.19, car Vite l'exige. Si tu vois ces informations, félicitations ! Ton vaisseau spatial est prêt pour le voyage.
Gestionnaires de paquets alternatifs
Outre npm, il existe aussi des gestionnaires de paquets alternatifs que tu peux envisager :
Yarn
Yarn est un gestionnaire de paquets créé par Facebook qui offre un téléchargement plus rapide des paquets et une meilleure gestion des dépendances.
Installation :
1npm install -g yarnpnpm
pnpm est un gestionnaire de paquets efficace qui économise de l'espace disque en partageant les dépendances communes entre les projets.
Installation :
1npm install -g pnpmDans ce cours, nous utiliserons principalement npm, mais toutes les commandes ont leurs équivalents avec Yarn et pnpm.
Étapes suivantes
Maintenant que Node.js et npm sont installés, tu es prêt à créer des applications React ! Dans la prochaine leçon, nous apprendrons à créer un nouveau projet React à l'aide de Vite.
Code de cette leçon : App.jsx
1import React, { useState } from 'react';
2
3// Démonstration du concept de npm et de la gestion des paquets dans React
4function PackageManager() {
5 const [packages, setPackages] = useState([
6 { name: 'react', version: '19.2.0', description: "Bibliothèque pour construire l'UI" },
7 { name: 'react-dom', version: '19.2.0', description: 'Rendu de React dans le navigateur' },
8 { name: 'axios', version: '1.4.0', description: 'Client HTTP pour les API' },
9 ]);
10
11 const [newPackage, setNewPackage] = useState('');
12
13 const installPackage = () => {
14 if (newPackage.trim()) {
15 setPackages([...packages, {
16 name: newPackage,
17 version: '1.0.0',
18 description: 'Paquet nouvellement installé'
19 }]);
20 setNewPackage('');
21 }
22 };
23
24 const removePackage = (name) => {
25 setPackages(packages.filter(pkg => pkg.name !== name));
26 };
27
28 return (
29 <div style={{
30 fontFamily: 'Arial, sans-serif',
31 maxWidth: '800px',
32 margin: '0 auto',
33 padding: '20px'
34 }}>
35 <header style={{
36 background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
37 padding: '30px',
38 borderRadius: '12px',
39 color: 'white',
40 textAlign: 'center',
41 marginBottom: '30px'
42 }}>
43 <h1 style={{ margin: 0 }}>NPM Package Manager</h1>
44 <p style={{ margin: '10px 0 0 0', opacity: 0.9 }}>
45 Simulation de la gestion des paquets dans un projet React
46 </p>
47 </header>
48
49 <div style={{
50 display: 'flex',
51 gap: '10px',
52 marginBottom: '20px'
53 }}>
54 <input
55 type="text"
56 value={newPackage}
57 onChange={(e) => setNewPackage(e.target.value)}
58 placeholder="Nom du paquet à installer..."
59 style={{
60 flex: 1,
61 padding: '12px 15px',
62 border: '2px solid #e0e0e0',
63 borderRadius: '8px',
64 fontSize: '16px'
65 }}
66 />
67 <button
68 onClick={installPackage}
69 style={{
70 padding: '12px 24px',
71 backgroundColor: '#4caf50',
72 color: 'white',
73 border: 'none',
74 borderRadius: '8px',
75 cursor: 'pointer',
76 fontWeight: 'bold'
77 }}
78 >
79 npm install
80 </button>
81 </div>
82
83 <div style={{
84 backgroundColor: '#1e1e1e',
85 borderRadius: '8px',
86 padding: '15px',
87 marginBottom: '20px',
88 fontFamily: 'monospace',
89 color: '#00ff00'
90 }}>
91 <div style={{ color: '#888', marginBottom: '5px' }}>$ npm install {newPackage || '<package-name>'}</div>
92 <div>added 1 package in 0.5s</div>
93 </div>
94
95 <h2 style={{ color: '#333', marginBottom: '15px' }}>
96 Paquets installés ({packages.length})
97 </h2>
98
99 <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
100 {packages.map((pkg, index) => (
101 <div key={index} style={{
102 display: 'flex',
103 alignItems: 'center',
104 padding: '15px',
105 backgroundColor: '#f8f9fa',
106 borderRadius: '8px',
107 border: '1px solid #e0e0e0'
108 }}>
109 <div style={{ flex: 1 }}>
110 <div style={{
111 fontWeight: 'bold',
112 color: '#333',
113 marginBottom: '5px'
114 }}>
115 {pkg.name} <span style={{ color: '#666', fontWeight: 'normal' }}>v{pkg.version}</span>
116 </div>
117 <div style={{ color: '#666', fontSize: '14px' }}>
118 {pkg.description}
119 </div>
120 </div>
121 <button
122 onClick={() => removePackage(pkg.name)}
123 style={{
124 padding: '8px 16px',
125 backgroundColor: '#f44336',
126 color: 'white',
127 border: 'none',
128 borderRadius: '4px',
129 cursor: 'pointer'
130 }}
131 >
132 Désinstaller
133 </button>
134 </div>
135 ))}
136 </div>
137
138 <div style={{
139 marginTop: '30px',
140 padding: '20px',
141 backgroundColor: '#e3f2fd',
142 borderRadius: '8px'
143 }}>
144 <h3 style={{ color: '#1976d2', marginTop: 0 }}>Commandes npm de base</h3>
145 <ul style={{ color: '#333', lineHeight: '1.8' }}>
146 <li><code>npm init</code> - Initialisation d'un nouveau projet</li>
147 <li><code>npm install</code> - Installation de toutes les dépendances</li>
148 <li><code>npm install nom-du-paquet</code> - Installation d'un paquet précis</li>
149 <li><code>npm uninstall nom-du-paquet</code> - Désinstallation d'un paquet</li>
150 <li><code>npm run dev</code> - Démarre le serveur de développement (projet Vite)</li>
151 </ul>
152 </div>
153 </div>
154 );
155}
156
157export default function App() {
158 return <PackageManager />;
159}Tu as repéré une erreur dans cette leçon ?
Tâches pratiques dans le jeu
- Tri horizontal
Ordonne la commande d'installation de React à l'aide de npm :
- Clique dans l'ordre
Construis la commande : accède au dossier du projet Vite et démarre le serveur de développement :
- Tri vertical
Ordonne le processus d'installation de React à partir de zéro :