Cours JavaScript et React · Module 1: Bases de React
React Developer Tools - le tableau de bord de React
Dans cette leçon7
Lors d'un voyage cosmique à travers la galaxie React, un développeur a besoin d'outils de diagnostic avancés - tout comme un vaisseau spatial a besoin d'un système de télémétrie et de diagnostics embarqués. Les React Developer Tools sont précisément un tel tableau de bord avancé, qui te permet de regarder sous le capot d'une application React et de comprendre ce qui s'y passe.
Que sont les React Developer Tools ?
Les React Developer Tools sont une extension de navigateur officielle créée par l'équipe React, qui ajoute des onglets supplémentaires aux outils de développement du navigateur. Avec eux, tu peux :
- Inspecter l'arbre des composants React
- Voir et modifier les props et l'état des composants
- Suivre le rendu des composants
- Analyser les performances de l'application
- Déboguer les hooks et les contextes
Cet outil est absolument indispensable pour tout développeur React : sans lui, travailler avec React reviendrait à piloter un vaisseau spatial dans l'obscurité totale, sans aucun indicateur sur le tableau de bord !
Installer les React Developer Tools
Les React Developer Tools sont disponibles sous forme d'extension pour les navigateurs les plus populaires.
Chrome / Edge
- Rends-toi sur le Chrome Web Store
- Recherche « React Developer Tools »
- Clique sur « Add to Chrome »
- Confirme l'installation
Firefox
- Rends-toi sur Firefox Add-ons
- Recherche « React Developer Tools »
- Clique sur « Add to Firefox »
- Confirme l'installation
Vérifier l'installation
Après l'installation, ouvre n'importe quelle page utilisant React (par exemple facebook.com, netflix.com ou ton propre projet React) et appuie sur F12 pour ouvrir les outils de développement. Tu devrais voir deux nouveaux onglets :
- Components - inspection de l'arbre des composants
- Profiler - analyse des performances
Si tu vois ces onglets, l'installation a réussi ! Si la page n'utilise pas React, ces onglets n'apparaîtront pas et l'icône de l'extension dans la barre du navigateur sera grise.
Onglet Components - inspection de l'arbre des composants
L'onglet Components est la partie la plus fréquemment utilisée des React DevTools. Il te permet d'explorer la structure des composants de ton application - c'est comme une carte structurelle de ton vaisseau spatial où tu peux voir tous les modules, sous-modules et leurs relations.
Fonctionnalités de base
1. Inspecteur de props
Lorsque tu cliques sur n'importe quel composant de l'arbre, un panneau de détails apparaît sur la droite. La section « props » affiche toutes les propriétés transmises au composant.
2. Inspecteur d'état
La section « hooks » affiche tous les hooks utilisés dans le composant, y compris leur état actuel.
3. Édition en direct des props et de l'état
C'est l'une des fonctionnalités les plus puissantes des DevTools ! Tu peux cliquer sur une valeur de props ou d'état et la modifier, et les composants seront immédiatement re-rendus avec les nouvelles valeurs.
Onglet Profiler - analyse des performances
Le Profiler est un outil avancé pour mesurer les performances des applications React. Il te permet de voir quels composants se rendent le plus souvent et le plus longtemps - c'est comme des capteurs d'efficacité énergétique sur un vaisseau spatial.
Comment utiliser le Profiler
- Clique sur le bouton d'enregistrement dans l'onglet Profiler
- Effectue dans l'application les actions que tu veux analyser
- Clique sur le bouton d'arrêt
- Le Profiler affichera les résultats
Métriques clés
- Durée du commit - temps total de rendu
- Temps de rendu - temps de rendu d'un seul composant
- Nombre de commits - combien de fois les composants ont été rendus
Déboguer les props et l'état
Les React DevTools sont un puissant outil de débogage. Voici quelques scénarios pratiques :
Pourquoi le composant ne se met-il pas à jour ?
- Ouvre l'onglet Components
- Trouve le composant qui devrait se mettre à jour
- Vérifie la section « hooks » - l'état change-t-il réellement ?
D'où vient cette valeur de props ?
- Clique sur le composant
- Regarde « rendered by » - quel composant est le parent ?
- Va vers le parent et vérifie ses props
Exemples d'utilisation pratique
Les React DevTools aident dans le travail quotidien avec React :
- Tester différents états - modifie l'état directement dans les DevTools
- Déboguer les formulaires - vérifie les valeurs de formData en temps réel
- Optimisation des performances - utilise le Profiler pour trouver les composants lents
- Suivre le flux de données - observe comment les props circulent dans l'application
Résumé
Les React Developer Tools sont un outil absolument indispensable pour tout développeur React :
Onglet Components :
- Inspecter l'arbre des composants
- Voir les props et l'état
- Modifier les valeurs en direct
- Suivre le flux de données
Onglet Profiler :
- Mesurer les performances de rendu
- Identifier les goulots d'étranglement
- Optimiser les composants
Bonnes pratiques :
- Installe les DevTools dès le début de ton apprentissage de React
- Utilise l'onglet Components pour le débogage quotidien
- Utilise le Profiler lorsque l'application est lente
- Expérimente l'édition en direct des props/de l'état
N'oublie pas : un bon pilote de vaisseau spatial connaît chaque indicateur de son tableau de bord. De même, un bon développeur React connaît chaque fonctionnalité des React DevTools !
L'exemple ci-dessous se compose de quelques composants (PlanetCard, InfoPanel, SpaceButton) qui se transmettent des données par les props. Quand tu lances une application similaire en local, l'onglet Components affiche exactement cet arbre, et un clic sur PlanetCard montre ses props.
Code de cette leçon : App.jsx
1import React, { useState } from 'react';
2
3// Composant avec de nombreuses props
4function PlanetCard({ name, type, distance, moons, temperature, description, color, onSelect }) {
5 return (
6 <div
7 onClick={onSelect}
8 style={{
9 backgroundColor: '#1a1a2e',
10 border: `3px solid ${color}`,
11 borderRadius: '16px',
12 padding: '20px',
13 cursor: 'pointer',
14 transition: 'transform 0.2s, box-shadow 0.2s',
15 boxShadow: `0 4px 20px ${color}40`
16 }}
17 >
18 <div style={{
19 width: '60px',
20 height: '60px',
21 borderRadius: '50%',
22 background: `radial-gradient(circle at 30% 30%, ${color}, #000)`,
23 marginBottom: '15px',
24 boxShadow: `0 0 20px ${color}80`
25 }} />
26 <h3 style={{ color, margin: '0 0 10px 0' }}>{name}</h3>
27 <div style={{ fontSize: '14px', color: '#888', marginBottom: '5px' }}>
28 Type : {type}
29 </div>
30 <div style={{ fontSize: '14px', color: '#888', marginBottom: '5px' }}>
31 Distance : {distance} UA
32 </div>
33 <div style={{ fontSize: '14px', color: '#888', marginBottom: '5px' }}>
34 Lunes : {moons}
35 </div>
36 <div style={{ fontSize: '14px', color: '#888' }}>
37 Température : {temperature}°C
38 </div>
39 </div>
40 );
41}
42
43// Composant avec des props par défaut
44function SpaceButton({ children, variant = 'primary', size = 'medium', onClick }) {
45 const variants = {
46 primary: { bg: '#667eea', hover: '#764ba2' },
47 success: { bg: '#4caf50', hover: '#45a049' },
48 danger: { bg: '#f44336', hover: '#d32f2f' }
49 };
50
51 const sizes = {
52 small: { padding: '8px 16px', fontSize: '12px' },
53 medium: { padding: '12px 24px', fontSize: '14px' },
54 large: { padding: '16px 32px', fontSize: '16px' }
55 };
56
57 return (
58 <button
59 onClick={onClick}
60 style={{
61 ...sizes[size],
62 backgroundColor: variants[variant].bg,
63 color: 'white',
64 border: 'none',
65 borderRadius: '8px',
66 cursor: 'pointer',
67 fontWeight: 'bold',
68 transition: 'background-color 0.2s'
69 }}
70 >
71 {children}
72 </button>
73 );
74}
75
76// Composant avec children et spread props
77function InfoPanel({ title, icon, children, ...rest }) {
78 return (
79 <div style={{
80 backgroundColor: '#1a1a2e',
81 borderRadius: '12px',
82 padding: '20px',
83 ...rest.style
84 }}>
85 <h3 style={{ color: '#00d4ff', margin: '0 0 15px 0' }}>
86 {icon} {title}
87 </h3>
88 {children}
89 </div>
90 );
91}
92
93export default function App() {
94 const [selectedPlanet, setSelectedPlanet] = useState(null);
95
96 const planets = [
97 {
98 id: 1, name: 'Mars', type: 'Tellurique', distance: 1.5,
99 moons: 2, temperature: -60, color: '#ff6b6b',
100 description: 'La Planète rouge - cible de la future colonisation humaine.'
101 },
102 {
103 id: 2, name: 'Jupiter', type: 'Géante gazeuse', distance: 5.2,
104 moons: 95, temperature: -110, color: '#ffa726',
105 description: 'La plus grande planète du système solaire.'
106 },
107 {
108 id: 3, name: 'Saturne', type: 'Géante gazeuse', distance: 9.5,
109 moons: 146, temperature: -140, color: '#ffcc80',
110 description: 'Célèbre pour ses anneaux composés de glace et de roches.'
111 },
112 {
113 id: 4, name: 'Neptune', type: 'Géante de glace', distance: 30,
114 moons: 16, temperature: -200, color: '#64b5f6',
115 description: 'La planète la plus éloignée du Soleil.'
116 }
117 ];
118
119 return (
120 <div style={{
121 fontFamily: 'Arial, sans-serif',
122 backgroundColor: '#0a0a1a',
123 minHeight: '100vh',
124 padding: '20px',
125 color: 'white'
126 }}>
127 <header style={{
128 textAlign: 'center',
129 marginBottom: '30px',
130 padding: '30px',
131 background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
132 borderRadius: '16px'
133 }}>
134 <h1 style={{ margin: 0 }}>Les props dans React</h1>
135 <p style={{ margin: '10px 0 0 0', opacity: 0.9 }}>
136 Transmettre des données entre composants
137 </p>
138 </header>
139
140 <InfoPanel title="Le système solaire" icon="●" style={{ marginBottom: '20px' }}>
141 <p style={{ color: '#ccc', margin: 0 }}>
142 Clique sur une planète pour voir les détails. Chaque carte reçoit ses données via les props.
143 </p>
144 </InfoPanel>
145
146 <div style={{
147 display: 'grid',
148 gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
149 gap: '20px',
150 marginBottom: '30px'
151 }}>
152 {planets.map(planet => (
153 <PlanetCard
154 key={planet.id}
155 name={planet.name}
156 type={planet.type}
157 distance={planet.distance}
158 moons={planet.moons}
159 temperature={planet.temperature}
160 color={planet.color}
161 description={planet.description}
162 onSelect={() => setSelectedPlanet(planet)}
163 />
164 ))}
165 </div>
166
167 {selectedPlanet && (
168 <InfoPanel title={`Sélectionné : ${selectedPlanet.name}`} icon="◆">
169 <p style={{ color: '#ccc' }}>{selectedPlanet.description}</p>
170 <div style={{ display: 'flex', gap: '10px', marginTop: '15px' }}>
171 <SpaceButton variant="success" size="small">
172 Explorer
173 </SpaceButton>
174 <SpaceButton
175 variant="danger"
176 size="small"
177 onClick={() => setSelectedPlanet(null)}
178 >
179 Fermer
180 </SpaceButton>
181 </div>
182 </InfoPanel>
183 )}
184
185 <InfoPanel title="Types de props" icon="◆" style={{ marginTop: '20px' }}>
186 <ul style={{ color: '#ccc', lineHeight: '1.8', paddingLeft: '20px' }}>
187 <li><strong>De base :</strong> string, number, boolean</li>
188 <li><strong>Objets et tableaux :</strong> transmettre des structures complexes</li>
189 <li><strong>Fonctions :</strong> props de rappel (callback) comme onSelect, onClick</li>
190 <li><strong>Children :</strong> contenu entre les balises du composant</li>
191 <li><strong>Spread props :</strong> ...rest pour transmettre plusieurs props</li>
192 </ul>
193 </InfoPanel>
194 </div>
195 );
196}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. À quoi servent les React DevTools ?
2. Quelle est la première étape lorsqu'on débogue une application React ?
3. Quel outil React permet de profiler les performances des composants et d'analyser le temps de rendu ?
Tâches pratiques dans le jeu
- Éditeur de code
Crée un composant TestComponent qui reçoit une prop name et affiche un titre avec ce nom (par ex. « Diagnostic : Moteurs »), puis rends-le dans le composant App sous la forme <TestComponent name="Moteurs" />. En lançant un tel projet en local, tu verras TestComponent et ses props dans l'onglet Components des React DevTools.
- Tri vertical
Ordonne le parcours d'apprentissage de React à partir des bases :