React Academy · Ders

Bileşen Ağaçlarını ve Props'ları İnceleme

Bileşen hiyerarşilerinin alt düzeylerini inceleyin ve canlı prop ile state değerlerini okuyun.

Bileşen Ağaçlarını ve Props'ları İnceleme, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 2. 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'ta iç içe bileşen hiyerarşilerini ayrıntılı olarak incelemeyi ve Bileşenler panelinin kenar çubuğunda karmaşık özellik ve durum değerlerini okumayı öğreneceksiniz.

Bileşen Ağacı Bir Aynadır

DevTools'ta gördüğünüz her bileşen, JSX iç içe yerleşiminizi yansıtır. Kök genellikle Uygulama bileşeninizdir. Alt bileşenler, kaynak kodunda göründükleri gibi üst bileşenlerinin altında girintili olarak yer alır.

Bileşen Seçme

Ağaçtaki herhangi bir bileşen adına tıklayın. Sağ panelde hemen bileşenin **özellikleri**, **kancaları** (durum, efektler, başvurular) ve tanımlandığı **kaynak** dosya ile satır numarası gösterilir.

Dize ve Sayı Özelliklerini Okuma

Dize özellikleri tırnak içinde görünür: `"hello"`. Sayılar tırnak işareti olmadan görünür: `42`. Mantıksal değerler `true` veya `false` olarak gösterilir. Kısaltılmışsa tam içeriğini görmek için bir değerin üzerine gelebilirsiniz.

Nesne ve Dizi Özelliklerini Genişletme

Bir özellik değeri nesne veya dizi olduğunda DevTools, daraltılabilir bir ağaç gösterir. Genişletmek ve iç içe geçmiş her anahtarı ve değeri görmek için `{…}` veya `[…]` yanındaki oka tıklayın.

İşlev Özelliklerini İnceleme

İşlev özellikleri (örneğin `onClick` işleyicileri) `f onClick()` olarak görünür. Kaynaklar panelindeki işlev tanımına geçmek için yanlarındaki küçük ok simgesine tıklayabilirsiniz.

Ağacı Filtreleme

Ada göre filtrelemek için Bileşenler panelinin üst kısmındaki arama kutusunu kullanın. Yalnızca adında *Düğme* bulunan bileşenleri göstermek için `Button` yazın. Bu, yüzlerce bileşen içeren uygulamalarda kullanışlıdır.

DOM'dan React'e Geçme

**Öğeler** sekmesinde bir DOM düğümüne sağ tıklayın ve **React bileşenini incele** seçeneğini belirleyin (DevTools yüklüyken kullanılabilir). DevTools, Bileşenler sekmesine geçer ve o düğümü oluşturan React bileşenini seçer.

DevTools'ta Özellikleri Düzenleme

DevTools'ta bir özellik değerini canlı olarak düzenlemek için üzerine çift tıklayın. Bileşen yeni değerle anında yeniden oluşturulur. Bu, kaynak kodunu değiştirmeden uç durumları sınamak için kullanışlıdır.

Özellikleri JSON Olarak Kopyalama

DevTools'ta herhangi bir özellik veya durum değerine sağ tıklayın ve **Değeri kopyala** seçeneğini belirleyin. Bu işlem, değeri JSON biçiminde panonuza kopyalar; sınamalara veya belgelere yapıştırmak için kullanışlıdır.

Hızlı Kontrol

React DevTools Bileşenler panelinde bir nesne veya dizi özelliğini nasıl genişletirsiniz?

Özet

Artık bileşen ağaçlarında gezinebilir, dizeleri/sayıları/nesneleri/işlevleri okuyabilir, ada göre filtreleyebilir, DOM öğelerinden React bileşenlerine geçebilir ve özellikleri DevTools'ta canlı olarak düzenleyebilirsiniz.

Sırada

Sonraki ders: **Profil Oluşturucu Sekmesini Kullanma** — oluşturmaları kaydedecek, alev grafiklerini okuyacak ve yavaş etkileşimlerden sorumlu bileşenleri belirleyeceksiniz.

Sıkça Sorulan Sorular

“Bileşen Ağaçlarını ve Props'ları İnceleme” dersi ücretsiz mi?

Evet — “Bileşen Ağaçlarını ve Props'ları İnceleme” 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.

“Bileşen Ağaçlarını ve Props'ları İnceleme” dersinde ne öğreneceğim?

Bileşen hiyerarşilerinin alt düzeylerini inceleyin ve canlı prop ile state değerlerini okuyun. 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 2. dersidir.

“Bileşen Ağaçlarını ve Props'ları İnceleme” 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