Kurs JavaScript i React · Moduł 1: Podstawy React
React Developer Tools - panel kontrolny Reacta
W tej lekcji7
W kosmicznej podróży przez galaktykę React, programista potrzebuje zaawansowanych narzędzi diagnostycznych - podobnie jak statek kosmiczny potrzebuje systemu telemetrii i diagnostyki pokładowej. React Developer Tools to właśnie taki zaawansowany panel kontrolny, który pozwala zajrzeć pod maskę aplikacji React i zrozumieć, co dzieje się w środku.
Czym są React Developer Tools?
React Developer Tools to oficjalne rozszerzenie przeglądarki stworzone przez zespół React, które dodaje dodatkowe zakładki do narzędzi deweloperskich przeglądarki. Dzięki nim możesz:
- Inspekcjonować drzewo komponentów React
- Podglądać i edytować props oraz state komponentów
- Śledzić renderowanie komponentów
- Analizować wydajność aplikacji
- Debugować hooki i konteksty
To narzędzie jest absolutnie niezbędne dla każdego dewelopera React - bez niego praca z React byłaby jak pilotowanie statku kosmicznego w całkowitej ciemności, bez żadnych wskaźników na tablicy rozdzielczej!
Instalacja React Developer Tools
React Developer Tools jest dostępny jako rozszerzenie dla najpopularniejszych przeglądarek.
Chrome / Edge
- Odwiedź Chrome Web Store
- Wyszukaj "React Developer Tools"
- Kliknij "Dodaj do Chrome" / "Add to Chrome"
- Potwierdź instalację
Firefox
- Odwiedź Firefox Add-ons
- Wyszukaj "React Developer Tools"
- Kliknij "Dodaj do Firefoksa" / "Add to Firefox"
- Potwierdź instalację
Weryfikacja instalacji
Po zainstalowaniu, otwórz dowolną stronę używającą React (np. facebook.com, netflix.com lub twój własny projekt React) i naciśnij F12 aby otworzyć narzędzia deweloperskie. Powinieneś zobaczyć dwie nowe zakładki:
- Components - inspekcja drzewa komponentów
- Profiler - analiza wydajności
Jeśli widzisz te zakładki, instalacja się powiodła! Jeśli strona nie używa Reacta, te zakładki się nie pojawią, a ikona rozszerzenia na pasku przeglądarki będzie szara.
Zakładka Components - inspekcja drzewa komponentów
Zakładka Components to najczęściej używana część React DevTools. Pozwala ona na eksplorację struktury komponentów twojej aplikacji - to jak mapa struktury twojego statku kosmicznego, gdzie widzisz wszystkie moduły, podmoduły i ich wzajemne relacje.
Podstawowe funkcje
1. Podgląd props
Gdy klikniesz na dowolny komponent w drzewie, po prawej stronie zobaczysz panel z szczegółami. Sekcja "props" pokazuje wszystkie właściwości przekazane do komponentu.
2. Podgląd stanu
Sekcja "hooks" pokazuje wszystkie hooki użyte w komponencie, włącznie z ich aktualnym stanem.
3. Edycja props i state na żywo
To jedna z najpotężniejszych funkcji DevTools! Możesz kliknąć na wartość props lub state i ją zmienić, a komponenty natychmiast się przerenderują z nowymi wartościami.
Zakładka Profiler - analiza wydajności
Profiler to zaawansowane narzędzie do mierzenia wydajności aplikacji React. Pozwala zobaczyć, które komponenty renderują się najczęściej i najdłużej - to jak czujniki efektywności paliwowej na statku kosmicznym.
Jak używać Profiler
- Kliknij przycisk ⏺(Record) w zakładce Profiler
- Wykonaj akcje w aplikacji, które chcesz przeanalizować
- Kliknij przycisk ⏹(Stop)
- Profiler pokaże wyniki
Kluczowe metryki
- Commit duration - całkowity czas renderowania
- Render time - czas renderowania pojedynczego komponentu
- Number of commits - ile razy komponenty były renderowane
Debugowanie Props i State
React DevTools to potężne narzędzie debugowania. Kilka praktycznych scenariuszy:
Dlaczego komponent nie aktualizuje się?
- Otwórz Components tab
- Znajdź komponent, który powinien się zaktualizować
- Sprawdź sekcję "hooks" - czy state faktycznie się zmienia?
Skąd pochodzi ta wartość props?
- Kliknij na komponent
- Zobacz "rendered by" - który komponent jest rodzicem?
- Przejdź do rodzica i sprawdź jego props
Praktyczne przykłady użycia
React DevTools pomaga w codziennej pracy z React:
- Testowanie różnych stanów - edytuj state bezpośrednio w DevTools
- Debugowanie formularzy - sprawdź wartości formData w czasie rzeczywistym
- Optymalizacja wydajności - użyj Profiler do znalezienia wolnych komponentów
- Śledzenie przepływu danych - zobacz jak props przepływają przez aplikację
Podsumowanie
React Developer Tools to absolutnie niezbędne narzędzie dla każdego dewelopera React:
Zakładka Components:
- Inspekcja drzewa komponentów
- Podgląd props i state
- Edycja wartości na żywo
- Śledzenie przepływu danych
Zakładka Profiler:
- Mierzenie wydajności renderowania
- Identyfikacja wąskich gardeł
- Optymalizacja komponentów
Najlepsze praktyki:
- Zainstaluj DevTools od razu na początku nauki React
- Używaj Components tab do codziennego debugowania
- Używaj Profiler gdy aplikacja działa wolno
- Eksperymentuj z edycją props/state na żywo
Pamiętaj: dobry pilot statku kosmicznego zna każdy wskaźnik na tablicy rozdzielczej. Podobnie dobry deweloper React zna każdą funkcję React DevTools!
Przykład poniżej to kilka komponentów (PlanetCard, InfoPanel, SpaceButton), które przekazują sobie dane przez props. Gdy uruchomisz podobną aplikację lokalnie, w zakładce Components zobaczysz takie właśnie drzewo, a po kliknięciu PlanetCard - jej props.
Kod do tej lekcji: App.jsx
1import React, { useState } from 'react';
2
3// Komponent z wieloma 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 Typ: {type}
29 </div>
30 <div style={{ fontSize: '14px', color: '#888', marginBottom: '5px' }}>
31 Odległość: {distance} AU
32 </div>
33 <div style={{ fontSize: '14px', color: '#888', marginBottom: '5px' }}>
34 Księżyce: {moons}
35 </div>
36 <div style={{ fontSize: '14px', color: '#888' }}>
37 Temperatura: {temperature}°C
38 </div>
39 </div>
40 );
41}
42
43// Komponent z default props
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// Komponent z children i 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: 'Skalista', distance: 1.5,
99 moons: 2, temperature: -60, color: '#ff6b6b',
100 description: 'Czerwona Planeta - cel przyszłej kolonizacji ludzkości.'
101 },
102 {
103 id: 2, name: 'Jowisz', type: 'Gazowy olbrzym', distance: 5.2,
104 moons: 95, temperature: -110, color: '#ffa726',
105 description: 'Największa planeta Układu Słonecznego.'
106 },
107 {
108 id: 3, name: 'Saturn', type: 'Gazowy olbrzym', distance: 9.5,
109 moons: 146, temperature: -140, color: '#ffcc80',
110 description: 'Słynna z pierścieni składających się z lodu i skał.'
111 },
112 {
113 id: 4, name: 'Neptune', type: 'Lodowy olbrzym', distance: 30,
114 moons: 16, temperature: -200, color: '#64b5f6',
115 description: 'Najdalej od Słońca położona planeta.'
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 }}>Props w React</h1>
135 <p style={{ margin: '10px 0 0 0', opacity: 0.9 }}>
136 Przekazywanie danych między komponentami
137 </p>
138 </header>
139
140 <InfoPanel title="Układ Słoneczny" icon="●" style={{ marginBottom: '20px' }}>
141 <p style={{ color: '#ccc', margin: 0 }}>
142 Kliknij na planetę, aby zobaczyć szczegóły. Każda karta otrzymuje dane przez 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={`Wybrano: ${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 Eksploruj
173 </SpaceButton>
174 <SpaceButton
175 variant="danger"
176 size="small"
177 onClick={() => setSelectedPlanet(null)}
178 >
179 Zamknij
180 </SpaceButton>
181 </div>
182 </InfoPanel>
183 )}
184
185 <InfoPanel title="Typy Props" icon="◆" style={{ marginTop: '20px' }}>
186 <ul style={{ color: '#ccc', lineHeight: '1.8', paddingLeft: '20px' }}>
187 <li><strong>Podstawowe:</strong> string, number, boolean</li>
188 <li><strong>Obiekty i tablice:</strong> przekazywanie złożonych struktur</li>
189 <li><strong>Funkcje:</strong> callback props jak onSelect, onClick</li>
190 <li><strong>Children:</strong> zawartość między tagami komponentu</li>
191 <li><strong>Spread props:</strong> ...rest do przekazywania wielu props</li>
192 </ul>
193 </InfoPanel>
194 </div>
195 );
196}Widzisz błąd w tej lekcji?
Sprawdź się
Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.
1. Do czego służy React DevTools?
2. Jaki jest pierwszy krok przy debugowaniu aplikacji React?
3. Które narzędzie w React pozwala profilować wydajność komponentów i analizować czas renderowania?
Zadania praktyczne w grze
- Edytor kodu
Stwórz komponent TestComponent, który przyjmuje prop name i wyświetla nagłówek z tą nazwą (np. „Diagnostyka: Silniki”), a następnie wyrenderuj go w komponencie App jako <TestComponent name="Silniki" />. Gdy uruchomisz taki projekt lokalnie, zobaczysz TestComponent i jego props w zakładce Components w React DevTools.
- Układanie w pionie
Ułóż ścieżkę nauki React od podstaw: