Bileşen ağacı
- React kursu
- Başlangıç
- Ders 10/84
- 4 dk
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.
Başlangıç kodu
// Title bileşenini buraya yazÖrnek çözüm
function Title() {
return <><h1>Başlık</h1><p>Alt başlık</p></>;
}
export default Title;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 İç içe bileşen
App, ____ içinde Card çağırır.App, Layout içinde Card çağırır.Açıklama: Layout, App ile Card arasındaki kapsayıcıdır.
2 Bileşen sayısını neden böleriz?
- Daha hızlı çalışır
- Okunurluk ve yeniden kullanım Doğru cevap
- Daha az kod yazarız
- SEO iyileşir
Açıklama: Bileşenleri bölmek okunurluğu ve yeniden kullanımı artırır.
3 Çözümleri eşleştir
| Kavram | Anlamı |
|---|---|
Tek kök |
Tek JSX |
Fragment |
Gruplama |
div |
Kapsayıcı |
Birden fazla kök |
Hatalı |