CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

React DevTools

React DevTools ile bileşen ağacını öğrenirsin.

React DevTools nedir?

React DevTools, bileşen ağacını inceleyen bir tarayıcı eklentisi ve bağımsız uygulamadır. Her bileşenin props ve state değerini canlı gösterir. React Native uygulamalarını da inceleyebilir; mobilde bile props akışını izlemek için idealdir.

Bağımsız sürümü npx react-devtools ile çalıştırılır. Uygulama açılınca otomatik bağlanır. Components sekmesi ağacı gösterir; bir bileşene tıklayınca sağ panelde props ve state görünür. Profiler sekmesi render sürelerini ölçer. Bu araç, props'ların nerede değiştiğini bulmada çok güçlüdür.

Bileşen ağacı

React DevTools'un Components sekmesi bileşen ağacını hiyerarşik gösterir. Her düğüm bir bileşendir; alt düğümler çocuklarıdır. Bir düğüme tıklayınca sağda o bileşenin props ve state değerleri listelenir.

Bu görünüm, hangi bileşenin hangi çocuğu çizdiğini görmeyi sağlar. Props'un doğru iletildiğini doğrulamak için yararlıdır. state değişince DevTools anında günceller; bu, hatanın nerede olduğunu bulmayı kolaylaştırır. Bileşen adını çift tıklayarak düzenleyebilir, geçici değerler deneyebilirsin. Bu, hata ayıklama sürecini görsel kılar.

Uygulama Parent ve Child yaz

DevTools'ta incelenecek iki bileşen yaz. Parent bileşeni <Child /> döndürsün. Child bileşeni <Text>Merhaba</Text> döndürsün. İkisini de function ile tanımla.

Başlangıç kodu

App.js
// Parent ve Child bileşenlerini yaz
// Parent, Child'ı kullansın

Örnek çözüm

App.js
import React from "react";
import { Text } from "react-native";

function Parent() {
  return <Child />;
}

function Child() {
  return <Text>Merhaba</Text>;
}

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 React DevTools'u başlat

Soru 
// Bağımsız çalıştırmak için: ____ react-devtools
Cevap 
// Bağımsız çalıştırmak için: npx react-devtools

Açıklama: npx react-devtools bağımsız sürümü açar.

2 React DevTools hangi sekmeyi sunar?

App.js
npx react-devtools
  • Components Doğru cevap
  • Files
  • Network
  • Database

Açıklama: Components sekmesi bileşen ağacını gösterir.

3 Sekmeyi rolüne eşle

Kavram Anlamı
Components Bileşen ağacı
Profiler Render süreleri
props paneli Prop değerleri
state paneli State değerleri

Orta seviye bölümündeki tüm dersler

1 Hooks

  1. useEffect
  2. Dependency array
  3. Cleanup
  4. useRef
  5. useMemo
  6. Özet - Hooks

2 Özel hook'lar

  1. Özel hook
  2. useToggle
  3. useCounter
  4. usePrevious
  5. Hook kompozisyonu
  6. Özet - Özel hook'lar

3 Context

  1. Context nedir?
  2. createContext
  3. Provider
  4. useContext
  5. Context default değeri
  6. Özet - Context

4 Proje: Notlar uygulaması

  1. Proje tasarımı
  2. Not modeli
  3. Not ekleme
  4. AsyncStorage
  5. Birleştirme

5 useReducer

  1. useReducer
  2. Reducer fonksiyonu
  3. Action dispatch
  4. Initial state
  5. useReducer vs useState
  6. Özet - useReducer

6 Form yönetimi

  1. Controlled form
  2. Form state
  3. Validation
  4. Submit
  5. Form kütüphaneleri
  6. Özet - Form yönetimi

7 API ve fetch

  1. fetch
  2. GET isteği
  3. async/await
  4. JSON parse
  5. Error handling
  6. Özet - API ve fetch

8 Proje: Quiz uygulaması

  1. Quiz modeli
  2. Soruları yükleme
  3. Quiz oynatma
  4. Skor hesaplama
  5. Birleştirme

9 Tab navigasyonu

  1. Bottom Tabs
  2. createBottomTabNavigator
  3. Tab icons
  4. Material Top Tabs
  5. Tab badge
  6. Özet - Tab navigasyonu

10 Drawer navigasyonu

  1. Drawer navigator
  2. createDrawerNavigator
  3. Drawer items
  4. Drawer toggle
  5. Nested navigation
  6. Özet - Drawer navigasyonu

11 Yaşam döngüsü

  1. Mount
  2. Update
  3. Unmount
  4. useEffect lifecycle
  5. Layout effect
  6. Özet - Yaşam döngüsü

12 Proje: E-ticaret

  1. Proje tasarımı
  2. Ürün listesi
  3. Ürün detayı
  4. Sepet
  5. Birleştirme

13 Animated

  1. Animated.Value
  2. Animated.View
  3. Animated.timing
  4. Animated.spring
  5. interpolate
  6. Özet - Animated

14 Jestler

  1. PanResponder
  2. onMoveShouldSetPanResponder
  3. onPanResponderMove
  4. onPanResponderRelease
  5. react-native-gesture-handler
  6. Özet - Jestler

15 Tema

  1. Açık/koyu tema
  2. Theme context
  3. Theme toggle
  4. useColorScheme
  5. Persistent theme
  6. Özet - Tema

16 Performans

  1. React.memo
  2. useCallback
  3. useMemo
  4. FlatList optimizasyonu
  5. InteractionManager
  6. Özet - Performans

17 Test

  1. Jest
  2. React Native Testing Library
  3. render
  4. getByText
  5. fireEvent
  6. Özet - Test

18 Geliştirme araçları

  1. Flipper
  2. React DevTools
  3. Console
  4. Remote debug
  5. Performance monitor
  6. Özet - Geliştirme araçları

19 İzinler

  1. İzin nedir?
  2. expo-permissions
  3. Kamera izni
  4. Konum izni
  5. Bildirim izni
  6. Özet - İzinler

20 Orta seviye finali

  1. Proje tasarımı
  2. Context ve hooks
  3. API entegrasyonu
  4. Navigation
  5. Birleştirme