React Academy · Ders

React DevTools'u Kurma ve Açma

React DevTools'u Chrome/Firefox'ta kurun ve Components panelinde gezinin.

React DevTools'u Kurma ve Açma, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste React DevTools tarayıcı uzantısını yükleyecek ve çalışan React uygulamanızı incelemek için Bileşenler panelinde gezinmeyi öğreneceksiniz.

React DevTools Nedir?

React DevTools, Chrome/Firefox DevTools'a iki yeni panel ekleyen bir tarayıcı uzantısıdır: **Bileşenler** (ağacı inceleyin) ve **Profil oluşturucu** (performansı ölçün). Geliştirme modunda çalışan tüm React uygulamalarıyla uyumludur.

Uzantıyı Yükleme

Chrome Web Mağazası'na (veya Firefox Eklentileri'ne) gidin ve **React Developer Tools** için arama yapın. **Chrome'a Ekle** (veya Firefox'a Ekle) seçeneğine tıklayın. Araç çubuğunuzdaki React simgesi, React kullanan sayfalarda yanar.

DevTools'u Açma

Tarayıcı DevTools'unu açmak için **F12** tuşuna (veya Mac'te Cmd+Option+I tuşlarına) basın. Elements ve Console sekmelerinin yanında **Bileşenler** ve **Profil oluşturucu** etiketli yeni sekmeleri göreceksiniz.

Bileşenler Paneli

Bileşenler sekmesi, geçerli sayfanın React bileşen ağacının tamamını gösterir. Özelliklerini, durumunu, kancalarını ve onu oluşturan kaynak dosyasını incelemek için herhangi bir bileşene tıklayabilirsiniz.

Ağaçta Gezinme

Bileşenler panelinin üst kısmındaki arama kutusunu kullanarak bileşen adına göre filtreleyin. Ayrıntılarını sağ tarafta görmek için ağaçta bir bileşene tıklayın. Alt bileşenleri genişletmek veya daraltmak için okları kullanın.

Özellikleri Canlı Olarak İnceleme

Bir bileşene tıkladığınızda geçerli **özellikleri** sağ bölmede görünür. Kaynak kodunu değiştirmeden kullanıcı arayüzü değişikliklerini önizlemek için özellik değerlerini doğrudan DevTools'ta bile düzenleyebilirsiniz.

Durumu ve Kancaları İnceleme

Özelliklerin altında Durum, Efekt, Anımsatıcı ve Başvuru gibi **kancaları** görürsünüz. Durum'u genişlettiğinizde, o bileşendeki her useState çağrısının geçerli değeri gösterilir.

Geliştirme Modu Gereksinimi

React DevTools, bileşen adlarını yalnızca uygulama **geliştirme modunda** çalışırken gösterir. Üretim derlemelerinde React, paketleri küçültmek için bileşen adlarını kaldırır; bu nedenle her zaman npm start veya npm run dev ile yerel olarak hata ayıklayın.

Güncellemeleri Vurgulama

DevTools ayarlarında (dişli simgesi) **Bileşenler oluşturulduğunda güncellemeleri vurgula** seçeneğini etkinleştirin. Yeniden oluşturulan bileşenler renkli bir katmanla yanıp söner; böylece gereksiz oluşturmalar hemen görünür hale gelir.

Hızlı Kontrol

React DevTools uzantısı, tarayıcının geliştirici araçlarına hangi iki sekmeyi ekler?

Özet

React DevTools'u yüklediniz ve Bileşenler panelini keşfettiniz. Artık bileşen ağacını inceleyebilir, canlı özellikleri ve durumu okuyabilir, değerleri yerinde düzenleyebilir ve kaynak kodunuza dokunmadan yeniden oluşturmaları vurgulayabilirsiniz.

Sırada

Sonraki ders: **Bileşen Ağaçlarını ve Özellikleri İnceleme** — iç içe hiyerarşileri ayrıntılı olarak inceleyecek ve DevTools kenar çubuğunda karmaşık özellik ve durum yapılarını okumayı öğreneceksiniz.

Sıkça Sorulan Sorular

“React DevTools'u Kurma ve Açma” dersi ücretsiz mi?

Evet — “React DevTools'u Kurma ve Açma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“React DevTools'u Kurma ve Açma” dersinde ne öğreneceğim?

React DevTools'u Chrome/Firefox'ta kurun ve Components panelinde gezinin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“React DevTools'u Kurma ve Açma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

React DevTools'u Kurma ve Açma
Bileşen Ağaçlarını ve Props'ları İnceleme
Profiler Sekmesini Kullanma
Yaygın React Hatalarını Ayıklama

← React Academy Sayfasına Dön