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.

Örnek çözümü göster

import React from "react";
import { Text } from "react-native";

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

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

Kendini test et

React DevTools'u başlat

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

Cevabı göster

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

React DevTools hangi sekmeyi sunar?
```
npx react-devtools
```
- Components
- Files
- Network
- Database
Cevabı göster

Components — Components sekmesi bileşen ağacını gösterir.
Sekmeyi rolüne eşle

Components

Bileşen ağacı
Profiler

Render süreleri
props paneli

Prop değerleri
state paneli

State değerleri

Sıradaki ders: Console

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler