Cours JavaScript et React · Module 1: Bases de React
Configuration de l'environnement
Dans cette leçon6
En nous préparant pour un voyage à travers l'univers de React, nous avons besoin d'un vaisseau spatial adapté pour nous emmener dans cette aventure fascinante. Ce vaisseau sera notre environnement de développement, que nous devons configurer correctement pour que notre voyage se déroule sans encombre.
Commençons par le problème. Le navigateur ne comprend pas la syntaxe JSX que tu as vue dans les composants. Il ne sait pas non plus réunir des dizaines de fichiers en une seule application rapide. Quelqu'un doit traduire et empaqueter notre code avant qu'il n'arrive chez l'utilisateur. Ce quelqu'un, ce sont les outils de développement, et c'est leur préparation qui nous occupe dans cette leçon. C'est un compilateur comme Babel qui traduit le JSX : il analyse d'abord le code en un arbre syntaxique (AST, Abstract Syntax Tree), transforme ensuite cet arbre avec des plugins et des presets, puis génère du JavaScript ordinaire que les navigateurs comprennent.
Pourquoi la configuration de l'environnement est-elle importante ?
Un environnement de développement bien configuré est le fondement d'un travail efficace avec React. Il te permet de :
- Créer et tester rapidement des composants
- Rafraîchir automatiquement la page après chaque modification (Hot Reloading)
- Détecter les erreurs à un stade précoce
- Optimiser le code avant le déploiement en production
À propos du deuxième point : dans Vite, ce mécanisme s'appelle HMR (Hot Module Replacement), et dans les projets React il fonctionne sous la forme de Fast Refresh. Quand tu enregistres un fichier, seul le composant modifié change, et l'état du reste de l'application est conservé.
Imagine essayer de construire un vaisseau spatial avancé sans les bons outils : ce serait extrêmement difficile et chronophage. Il en va de même pour la création d'applications React sans un environnement adéquat.
Prérequis
Avant de commencer à configurer notre environnement React, assurons-nous d'avoir tous les outils nécessaires installés :
- Éditeur de code - Nous recommandons Visual Studio Code, qui offre une excellente prise en charge de React grâce à de nombreuses extensions
- Navigateur web - De préférence Chrome ou Firefox avec les React Developer Tools installés
- Terminal - Le terminal intégré à ton système d'exploitation ou celui intégré à l'éditeur de code
Une fois que nous disposons de ces outils de base, nous pouvons passer à la configuration de l'environnement React.
Node.js : le moteur de la salle des machines
Il reste un quatrième élément, le plus important : Node.js, un environnement qui exécute JavaScript en dehors du navigateur. React lui-même tourne dans le navigateur de l'utilisateur, donc Node.js ne fait pas partie de l'application finie. Nous en avons besoin sur notre ordinateur pour lancer les outils de développement : le serveur d'aperçu, le compilateur JSX et le processus de build de la version de production. Avec Node.js s'installe le gestionnaire de paquets npm, que nous utiliserons pour télécharger React et Vite.
Après l'installation (nous la verrons étape par étape dans la prochaine leçon), tu pourras vérifier dans le terminal que le moteur fonctionne :
1node -v
2npm -vChaque commande doit afficher un numéro de version. Si le terminal répond qu'il ne connaît pas la commande, Node.js n'est pas encore installé ou il faut redémarrer le terminal. Rien ne change dans ton projet, c'est seulement une vérification avant le décollage.
Choisir une approche de configuration
Il existe deux approches principales pour configurer un environnement React :
- Construire les outils à partir de zéro - Configurer manuellement Webpack, Babel et d'autres outils
- Solutions prêtes à l'emploi - Utiliser des outils comme Vite, Next.js ou Remix
Pour les débutants, nous recommandons vivement la seconde approche, car elle te permet de te concentrer sur l'apprentissage de React plutôt que sur les détails de configuration.
Il vaut la peine de savoir ce que dit exactement aujourd'hui la documentation sur react.dev. Pour les nouvelles applications, elle recommande de partir d'un framework, comme Next.js, React Router (en version 7, vers laquelle le développement de Remix a été transféré) ou Expo pour les applications mobiles. Si tu construis une application sans framework, la documentation indique les outils de build Vite, Parcel et Rsbuild.
Dans notre cours, nous utiliserons Vite - un outil de build moderne et rapide que la documentation React cite parmi les façons recommandées de créer un projet sans framework. Je le choisis exprès : il n'ajoute pas ses propres règles de routage ni de récupération de données, donc tu vois du React pur. Create React App (CRA) est désormais déprécié et n'est plus maintenu : l'équipe React l'a annoncé en février 2025, donc si tu tombes sur un tutoriel avec create-react-app, considère-le comme une archive.
Ce que tu obtiens dans un projet Vite
Un projet créé par Vite contient des scripts prêts à l'emploi dans son fichier package.json. Ce sont eux qui lancent les outils propulsés par Node.js :
1{
2 "scripts": {
3 "dev": "vite",
4 "build": "vite build",
5 "preview": "vite preview"
6 }
7}La commande npm run dev démarre le serveur d'aperçu avec Fast Refresh, npm run build crée une version de production optimisée dans le dossier dist, et npm run preview te permet de la consulter en local. Le code de tes composants reste le même dans les trois cas, seule change la manière dont les outils le préparent.
Un premier coup d'œil avec les React Developer Tools
L'extension React Developer Tools te montre l'arbre des composants d'une application en cours d'exécution. Tu y verras un principe important de React : le flux de données unidirectionnel. Les données circulent du composant parent vers le composant enfant via les props, jamais dans l'autre sens :
1function Bridge() {
2 return <FuelGauge fuel={80} />;
3}Ici, Bridge transmet la valeur fuel vers le bas à FuelGauge. L'enfant peut l'afficher, mais ne peut pas la modifier chez le parent : dans les DevTools, tu la verras comme une prop du composant FuelGauge. Tu en apprendras davantage sur ce flux quand nous commencerons à construire nos propres composants.
Ma recommandation : installe tout de suite VS Code, la version LTS actuelle de Node.js et les React Developer Tools, et crée tes projets avec Vite. Cet ensemble suffit pour tout le cours. Dans la prochaine leçon, nous passerons étape par étape par l'installation de Node.js et de npm.
Dans le bac à sable ci-dessous, tu peux déplier les cartes de différents outils et comparer leurs avantages et inconvénients.
Retiens : Node.js est le moteur de la salle des machines qui fait tourner les outils de développement, et Vite est le vaisseau avec lequel tu décolles confortablement avec React.
Code de cette leçon : App.jsx
1import React from 'react';
2
3// Composant pour démontrer différents outils
4function DevelopmentTool({ name, logo, type, description, pros, cons, difficulty }) {
5 const [isExpanded, setIsExpanded] = React.useState(false);
6
7 const getDifficultyColor = (level) => {
8 switch(level) {
9 case 'Facile': return '#4caf50';
10 case 'Moyen': return '#ff9800';
11 case 'Difficile': return '#f44336';
12 default: return '#666';
13 }
14 };
15
16 const getTypeColor = (toolType) => {
17 switch(toolType) {
18 case 'Outil CLI': return '#2196f3';
19 case 'Outil de build': return '#9c27b0';
20 case 'Framework': return '#ff5722';
21 default: return '#666';
22 }
23 };
24
25 return (
26 <div style={{
27 border: '2px solid #e0e0e0',
28 borderRadius: '12px',
29 margin: '15px 0',
30 overflow: 'hidden',
31 transition: 'all 0.3s ease',
32 boxShadow: isExpanded ? '0 8px 25px rgba(0,0,0,0.15)' : '0 2px 8px rgba(0,0,0,0.1)'
33 }}>
34 <div
35 style={{
36 padding: '20px',
37 backgroundColor: 'white',
38 cursor: 'pointer',
39 display: 'flex',
40 alignItems: 'center',
41 justifyContent: 'space-between'
42 }}
43 onClick={() => setIsExpanded(!isExpanded)}
44 >
45 <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
46 <div style={{ fontSize: '48px' }}>{logo}</div>
47 <div>
48 <h3 style={{ margin: '0 0 5px 0', color: '#333' }}>{name}</h3>
49 <div style={{ display: 'flex', gap: '10px' }}>
50 <span style={{
51 padding: '4px 12px',
52 backgroundColor: getTypeColor(type),
53 color: 'white',
54 borderRadius: '15px',
55 fontSize: '12px',
56 fontWeight: 'bold'
57 }}>
58 {type}
59 </span>
60 <span style={{
61 padding: '4px 12px',
62 backgroundColor: getDifficultyColor(difficulty),
63 color: 'white',
64 borderRadius: '15px',
65 fontSize: '12px',
66 fontWeight: 'bold'
67 }}>
68 {difficulty}
69 </span>
70 </div>
71 </div>
72 </div>
73 <div style={{
74 fontSize: '20px',
75 color: '#666',
76 transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
77 transition: 'transform 0.3s ease'
78 }}>
79 ▼
80 </div>
81 </div>
82
83 {isExpanded && (
84 <div style={{
85 padding: '20px',
86 backgroundColor: '#f8f9fa',
87 borderTop: '1px solid #e0e0e0'
88 }}>
89 <p style={{
90 marginBottom: '20px',
91 color: '#666',
92 lineHeight: '1.6',
93 fontSize: '16px'
94 }}>
95 {description}
96 </p>
97
98 <div style={{
99 display: 'grid',
100 gridTemplateColumns: '1fr 1fr',
101 gap: '20px'
102 }}>
103 <div>
104 <h4 style={{ color: '#4caf50', marginBottom: '10px' }}>Avantages</h4>
105 <ul style={{ margin: 0, paddingLeft: '20px', color: '#333' }}>
106 {pros.map((pro, index) => (
107 <li key={index} style={{ marginBottom: '5px' }}>{pro}</li>
108 ))}
109 </ul>
110 </div>
111
112 <div>
113 <h4 style={{ color: '#f44336', marginBottom: '10px' }}>Inconvénients</h4>
114 <ul style={{ margin: 0, paddingLeft: '20px', color: '#333' }}>
115 {cons.map((con, index) => (
116 <li key={index} style={{ marginBottom: '5px' }}>{con}</li>
117 ))}
118 </ul>
119 </div>
120 </div>
121 </div>
122 )}
123 </div>
124 );
125}
126
127// Composant pour démontrer le processus de configuration
128function SetupProcess() {
129 const [currentStep, setCurrentStep] = React.useState(0);
130 const [selectedTool, setSelectedTool] = React.useState('Vite');
131
132 const steps = {
133 CRA: [
134 {
135 title: "Vérifie Node.js",
136 command: "node --version",
137 expected: "v20.19.0 ou plus récent",
138 description: "Assure-toi d'avoir Node.js installé"
139 },
140 {
141 title: "Crée un nouveau projet",
142 command: "npx create-react-app mon-app",
143 expected: "Le projet va être créé",
144 description: "Create React App configure automatiquement tout"
145 },
146 {
147 title: "Accède au projet",
148 command: "cd mon-app",
149 expected: "Répertoire changé",
150 description: "Entre dans le dossier du nouveau projet"
151 },
152 {
153 title: "Start server",
154 command: "npm start",
155 expected: "L'application s'ouvre sur localhost:3000",
156 description: "Démarre le serveur de développement avec le hot reloading"
157 }
158 ],
159 Vite: [
160 {
161 title: "Vérifie Node.js",
162 command: "node --version",
163 expected: "v20.19.0 ou plus récent",
164 description: "Vite exige Node.js 20.19+ ou 22.12+"
165 },
166 {
167 title: "Crée un projet avec Vite",
168 command: "npm create vite@latest mon-app -- --template react",
169 expected: "Le projet Vite va être créé",
170 description: "Vite est plus rapide et plus moderne"
171 },
172 {
173 title: "Installe les dépendances",
174 command: "cd mon-app && npm install",
175 expected: "Dépendances installées",
176 description: "Installe tous les paquets requis"
177 },
178 {
179 title: "Start server",
180 command: "npm run dev",
181 expected: "L'application s'ouvre sur localhost:5173",
182 description: "Vite utilise un port différent de CRA"
183 }
184 ]
185 };
186
187 const currentSteps = steps[selectedTool];
188 const currentStepData = currentSteps[currentStep];
189
190 const nextStep = () => {
191 if (currentStep < currentSteps.length - 1) {
192 setCurrentStep(currentStep + 1);
193 }
194 };
195
196 const prevStep = () => {
197 if (currentStep > 0) {
198 setCurrentStep(currentStep - 1);
199 }
200 };
201
202 const resetSteps = () => {
203 setCurrentStep(0);
204 };
205
206 const changeTool = (tool) => {
207 setSelectedTool(tool);
208 setCurrentStep(0);
209 };
210
211 return (
212 <div style={{
213 backgroundColor: '#f3e5f5',
214 padding: '25px',
215 borderRadius: '12px',
216 margin: '20px 0'
217 }}>
218 <h3 style={{ color: '#7b1fa2', marginBottom: '20px', textAlign: 'center' }}>
219 Guide de configuration interactif
220 </h3>
221
222 <div style={{
223 display: 'flex',
224 justifyContent: 'center',
225 gap: '10px',
226 marginBottom: '25px'
227 }}>
228 <button
229 onClick={() => changeTool('CRA')}
230 style={{
231 padding: '10px 20px',
232 backgroundColor: selectedTool === 'CRA' ? '#9c27b0' : 'white',
233 color: selectedTool === 'CRA' ? 'white' : '#333',
234 border: '2px solid #9c27b0',
235 borderRadius: '8px',
236 cursor: 'pointer',
237 fontWeight: 'bold'
238 }}
239 >
240 Create React App
241 </button>
242
243 <button
244 onClick={() => changeTool('Vite')}
245 style={{
246 padding: '10px 20px',
247 backgroundColor: selectedTool === 'Vite' ? '#9c27b0' : 'white',
248 color: selectedTool === 'Vite' ? 'white' : '#333',
249 border: '2px solid #9c27b0',
250 borderRadius: '8px',
251 cursor: 'pointer',
252 fontWeight: 'bold'
253 }}
254 >
255 Vite
256 </button>
257 </div>
258
259 <div style={{
260 backgroundColor: 'white',
261 padding: '25px',
262 borderRadius: '8px',
263 minHeight: '200px'
264 }}>
265 <div style={{
266 display: 'flex',
267 alignItems: 'center',
268 marginBottom: '20px'
269 }}>
270 <div style={{
271 width: '50px',
272 height: '50px',
273 backgroundColor: '#9c27b0',
274 color: 'white',
275 borderRadius: '50%',
276 display: 'flex',
277 alignItems: 'center',
278 justifyContent: 'center',
279 fontWeight: 'bold',
280 fontSize: '18px',
281 marginRight: '15px'
282 }}>
283 {currentStep + 1}
284 </div>
285 <h4 style={{ margin: 0, color: '#333', fontSize: '1.3rem' }}>
286 {currentStepData.title}
287 </h4>
288 </div>
289
290 <p style={{
291 color: '#666',
292 marginBottom: '20px',
293 fontSize: '16px',
294 lineHeight: '1.5'
295 }}>
296 {currentStepData.description}
297 </p>
298
299 <div style={{
300 backgroundColor: '#1e1e1e',
301 color: '#00ff00',
302 padding: '15px',
303 borderRadius: '6px',
304 fontFamily: 'Monaco, monospace',
305 marginBottom: '15px',
306 fontSize: '14px',
307 overflow: 'auto'
308 }}>
309 <div style={{ marginBottom: '5px', color: '#888' }}>$ {currentStepData.command}</div>
310 <div style={{ color: '#00ff00' }}>{currentStepData.expected}</div>
311 </div>
312
313 <div style={{
314 display: 'flex',
315 justifyContent: 'space-between',
316 alignItems: 'center'
317 }}>
318 <div style={{
319 display: 'flex',
320 gap: '10px'
321 }}>
322 <button
323 onClick={prevStep}
324 disabled={currentStep === 0}
325 style={{
326 padding: '8px 16px',
327 backgroundColor: currentStep === 0 ? '#ccc' : '#666',
328 color: 'white',
329 border: 'none',
330 borderRadius: '4px',
331 cursor: currentStep === 0 ? 'not-allowed' : 'pointer'
332 }}
333 >
334 ← Précédent
335 </button>
336
337 <button
338 onClick={nextStep}
339 disabled={currentStep === currentSteps.length - 1}
340 style={{
341 padding: '8px 16px',
342 backgroundColor: currentStep === currentSteps.length - 1 ? '#ccc' : '#9c27b0',
343 color: 'white',
344 border: 'none',
345 borderRadius: '4px',
346 cursor: currentStep === currentSteps.length - 1 ? 'not-allowed' : 'pointer'
347 }}
348 >
349 Suivant →
350 </button>
351
352 <button
353 onClick={resetSteps}
354 style={{
355 padding: '8px 16px',
356 backgroundColor: '#f44336',
357 color: 'white',
358 border: 'none',
359 borderRadius: '4px',
360 cursor: 'pointer'
361 }}
362 >
363 Reset
364 </button>
365 </div>
366
367 <div style={{ display: 'flex', gap: '5px', alignItems: 'center' }}>
368 {currentSteps.map((_, index) => (
369 <div
370 key={index}
371 style={{
372 width: '12px',
373 height: '12px',
374 borderRadius: '50%',
375 backgroundColor: index <= currentStep ? '#9c27b0' : '#ddd',
376 transition: 'background-color 0.3s'
377 }}
378 />
379 ))}
380 <span style={{ marginLeft: '10px', color: '#666', fontSize: '14px' }}>
381 {currentStep + 1} / {currentSteps.length}
382 </span>
383 </div>
384 </div>
385 </div>
386 </div>
387 );
388}
389
390// Composant pour comparer les outils
391function ToolComparison() {
392 const tools = [
393 {
394 name: 'Create React App',
395 speed: 70,
396 ease: 95,
397 flexibility: 40,
398 popularity: 90
399 },
400 {
401 name: 'Vite',
402 speed: 95,
403 ease: 85,
404 flexibility: 80,
405 popularity: 75
406 },
407 {
408 name: 'Next.js',
409 speed: 85,
410 ease: 60,
411 flexibility: 90,
412 popularity: 85
413 },
414 {
415 name: 'Configuration manuelle',
416 speed: 30,
417 ease: 20,
418 flexibility: 100,
419 popularity: 30
420 }
421 ];
422
423 return (
424 <div style={{
425 backgroundColor: '#e3f2fd',
426 padding: '25px',
427 borderRadius: '12px',
428 margin: '20px 0'
429 }}>
430 <h3 style={{ color: '#1976d2', textAlign: 'center', marginBottom: '25px' }}>
431 Comparaison des outils de configuration React
432 </h3>
433
434 <div style={{
435 display: 'grid',
436 gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
437 gap: '20px'
438 }}>
439 {tools.map((tool, index) => (
440 <div key={index} style={{
441 backgroundColor: 'white',
442 padding: '20px',
443 borderRadius: '8px',
444 boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
445 }}>
446 <h4 style={{ color: '#1976d2', marginBottom: '15px', textAlign: 'center' }}>
447 {tool.name}
448 </h4>
449
450 <div style={{ marginBottom: '12px' }}>
451 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
452 <span style={{ fontSize: '14px' }}>Vitesse</span>
453 <span style={{ fontSize: '14px' }}>{tool.speed}%</span>
454 </div>
455 <div style={{
456 height: '8px',
457 backgroundColor: '#e0e0e0',
458 borderRadius: '4px',
459 overflow: 'hidden'
460 }}>
461 <div style={{
462 height: '100%',
463 backgroundColor: '#4caf50',
464 width: `${tool.speed}%`,
465 transition: 'width 1s ease'
466 }}></div>
467 </div>
468 </div>
469
470 <div style={{ marginBottom: '12px' }}>
471 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
472 <span style={{ fontSize: '14px' }}>Facilité</span>
473 <span style={{ fontSize: '14px' }}>{tool.ease}%</span>
474 </div>
475 <div style={{
476 height: '8px',
477 backgroundColor: '#e0e0e0',
478 borderRadius: '4px',
479 overflow: 'hidden'
480 }}>
481 <div style={{
482 height: '100%',
483 backgroundColor: '#2196f3',
484 width: `${tool.ease}%`,
485 transition: 'width 1s ease'
486 }}></div>
487 </div>
488 </div>
489
490 <div style={{ marginBottom: '12px' }}>
491 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
492 <span style={{ fontSize: '14px' }}>Flexibilité</span>
493 <span style={{ fontSize: '14px' }}>{tool.flexibility}%</span>
494 </div>
495 <div style={{
496 height: '8px',
497 backgroundColor: '#e0e0e0',
498 borderRadius: '4px',
499 overflow: 'hidden'
500 }}>
501 <div style={{
502 height: '100%',
503 backgroundColor: '#ff9800',
504 width: `${tool.flexibility}%`,
505 transition: 'width 1s ease'
506 }}></div>
507 </div>
508 </div>
509
510 <div style={{ marginBottom: '12px' }}>
511 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
512 <span style={{ fontSize: '14px' }}>Popularité</span>
513 <span style={{ fontSize: '14px' }}>{tool.popularity}%</span>
514 </div>
515 <div style={{
516 height: '8px',
517 backgroundColor: '#e0e0e0',
518 borderRadius: '4px',
519 overflow: 'hidden'
520 }}>
521 <div style={{
522 height: '100%',
523 backgroundColor: '#9c27b0',
524 width: `${tool.popularity}%`,
525 transition: 'width 1s ease'
526 }}></div>
527 </div>
528 </div>
529 </div>
530 ))}
531 </div>
532 </div>
533 );
534}
535
536export default function App() {
537 return (
538 <div style={{
539 fontFamily: 'Arial, sans-serif',
540 maxWidth: '1000px',
541 margin: '0 auto',
542 padding: '20px'
543 }}>
544 <header style={{
545 textAlign: 'center',
546 marginBottom: '30px',
547 padding: '25px',
548 background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
549 color: 'white',
550 borderRadius: '12px'
551 }}>
552 <h1 style={{ margin: '0 0 10px 0', fontSize: '2.2rem' }}>
553 Configuration de l'environnement React
554 </h1>
555 <p style={{ margin: 0, fontSize: '1rem', opacity: 0.9 }}>
556 Tout ce que tu dois savoir pour préparer l'environnement de développement React
557 </p>
558 </header>
559
560 <section style={{ marginBottom: '30px' }}>
561 <h2 style={{
562 color: '#333',
563 borderBottom: '2px solid #667eea',
564 paddingBottom: '10px',
565 marginBottom: '20px'
566 }}>
567 Outils disponibles
568 </h2>
569
570 <DevelopmentTool
571 name="Create React App"
572 logo="◆"
573 type="Outil CLI"
574 difficulty="Facile"
575 description="L'ancien outil officiel de React, abandonné en février 2025 et plus maintenu. Tu le croiseras dans d'anciens tutoriels."
576 pros={[
577 "Zéro configuration au départ",
578 "Support officiel de React",
579 "Hot reloading intégré",
580 "Optimisation pour la production",
581 "Prise en charge des tests"
582 ]}
583 cons={[
584 "Moins de flexibilité",
585 "Bundle plus volumineux",
586 "Difficile à personnaliser",
587 "Peut être excessif pour des projets simples"
588 ]}
589 />
590
591 <DevelopmentTool
592 name="Vite"
593 logo="↯"
594 type="Outil de build"
595 difficulty="Moyen"
596 description="Outil de build moderne avec prise en charge native des modules ES. Extrêmement rapide."
597 pros={[
598 "Serveur de développement très rapide",
599 "Modules ES natifs",
600 "Bundle plus petit",
601 "Meilleur hot reloading",
602 "Prise en charge de TypeScript prête à l'emploi"
603 ]}
604 cons={[
605 "Technologie plus jeune",
606 "Écosystème de plugins plus restreint",
607 "Peut nécessiter une configuration supplémentaire",
608 "Moins de templates prêts à l'emploi"
609 ]}
610 />
611
612 <DevelopmentTool
613 name="Next.js"
614 logo="▲"
615 type="Framework"
616 difficulty="Moyen"
617 description="Framework React full-stack avec rendu côté serveur, routage et bien d'autres fonctionnalités."
618 pros={[
619 "Rendu côté serveur",
620 "Routage automatique",
621 "Routes API intégrées",
622 "Optimisation des images",
623 "Excellentes performances"
624 ]}
625 cons={[
626 "Peut être excessif pour des SPA simples",
627 "Courbe d'apprentissage plus raide",
628 "Structure imposée (opinionated)",
629 "Plus grande complexité"
630 ]}
631 />
632
633 <DevelopmentTool
634 name="Configuration manuelle"
635 logo="◆"
636 type="Outil de build"
637 difficulty="Difficile"
638 description="Configuration manuelle de Webpack, Babel et d'autres outils. Contrôle maximal, mais nécessite des connaissances."
639 pros={[
640 "Contrôle total de la configuration",
641 "Possibilité d'adaptation à des besoins spécifiques",
642 "Compréhension plus approfondie des outils",
643 "Performance optimale"
644 ]}
645 cons={[
646 "Très chronophage",
647 "Nécessite des connaissances avancées",
648 "Compliqué à maintenir",
649 "Facile de commettre des erreurs"
650 ]}
651 />
652 </section>
653
654 <SetupProcess />
655 <ToolComparison />
656
657 <div style={{
658 backgroundColor: '#e8f5e8',
659 padding: '25px',
660 borderRadius: '12px',
661 marginTop: '30px'
662 }}>
663 <h3 style={{ color: '#2e7d32', textAlign: 'center', marginBottom: '20px' }}>
664 Quel outil choisir ?
665 </h3>
666
667 <div style={{
668 display: 'grid',
669 gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
670 gap: '20px'
671 }}>
672 <div style={{
673 backgroundColor: 'white',
674 padding: '20px',
675 borderRadius: '8px',
676 textAlign: 'center'
677 }}>
678 <h4 style={{ color: '#2196f3', marginBottom: '10px' }}>Débutants</h4>
679 <p style={{ margin: 0, color: '#666' }}>
680 <strong>Vite</strong><br/>
681 Démarrage rapide, recommandé dans ce cours
682 </p>
683 </div>
684
685 <div style={{
686 backgroundColor: 'white',
687 padding: '20px',
688 borderRadius: '8px',
689 textAlign: 'center'
690 }}>
691 <h4 style={{ color: '#2196f3', marginBottom: '10px' }}>Performance</h4>
692 <p style={{ margin: 0, color: '#666' }}>
693 <strong>Vite</strong><br/>
694 Rapidité de développement
695 </p>
696 </div>
697
698 <div style={{
699 backgroundColor: 'white',
700 padding: '20px',
701 borderRadius: '8px',
702 textAlign: 'center'
703 }}>
704 <h4 style={{ color: '#2196f3', marginBottom: '10px' }}>Full-Stack</h4>
705 <p style={{ margin: 0, color: '#666' }}>
706 <strong>Next.js</strong><br/>
707 SSR, routing, API
708 </p>
709 </div>
710
711 <div style={{
712 backgroundColor: 'white',
713 padding: '20px',
714 borderRadius: '8px',
715 textAlign: 'center'
716 }}>
717 <h4 style={{ color: '#2196f3', marginBottom: '10px' }}>Experts</h4>
718 <p style={{ margin: 0, color: '#666' }}>
719 <strong>Configuration manuelle</strong><br/>
720 Contrôle total
721 </p>
722 </div>
723 </div>
724 </div>
725 </div>
726 );
727}Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Pourquoi Node.js est-il nécessaire au développement React ?
2. Comment fonctionne le flux de données unidirectionnel dans React ?