Bileşen ağacı

Bileşenlerin iç içe çağrılarak bir ağaç oluşturduğunu öğrenirsin.

Bileşen ağacı derinliği

Bir bileşenin içinde başka bileşenler çağırınca ağaç derinleşir. function App() { return <Layout><Card /></Layout>; } satırında App, Layout'u çağırır; Layout da Card'ı çizer.

Derin ağaçlar kodun okunmasını zorlaştırabilir ama her seviyeyi anlamlı bir isimle ayırmak düzeni korur. Üç-dört seviye derinlik React için sorun değildir.

İç içe bileşenler veriyi props ile aktarır. Bu konuya bir sonraki grupta değineceğiz.

Çoklu kök yok

Bir bileşen tek bir kök JSX döndürmelidir. İki kardeş etiket yan yana yazılamaz: return <h1>A</h1><p>B</p>; hatalıdır.

Çözüm, etiketleri bir kap içine almaktır: <div><h1>A</h1><p>B</p></div> veya React 17+'dan beri geçerli olan fragment ile: <><h1>A</h1><p>B</p></>.

Fragment DOM'a çizilmez; yalnızca gruplama yapar. Bu yüzden gereksiz div eklemekten kaçınmanın temiz yoludur.

Uygulama Fragment ile iki öğe

Aşağıdaki iskeleti tamamla. Title adında bir bileşen yaz; fragment (<>...</>) içinde <h1>Başlık</h1> ve <p>Alt başlık</p> döndürsün. Dışa aktarmayı unutma.

Örnek çözümü göster

function Title() {
  return <><h1>Başlık</h1><p>Alt başlık</p></>;
}

export default Title;

Kendini test et

İç içe bileşen

App, ____ içinde Card çağırır.

Cevabı göster

App, Layout içinde Card çağırır.

Bileşen sayısını neden böleriz?
- Daha hızlı çalışır
- Okunurluk ve yeniden kullanım
- Daha az kod yazarız
- SEO iyileşir
Cevabı göster

Okunurluk ve yeniden kullanım — Bileşenleri bölmek okunurluğu ve yeniden kullanımı artırır.
Çözümleri eşleştir

Tek kök

Tek JSX
Fragment

Gruplama
div

Kapsayıcı
Birden fazla kök

Hatalı

Sıradaki ders: İsimlendirme kuralları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler