Bileşen ağacı
- React Native kursu
- Başlangıç
- Ders 9/116
- 5 dk
JSX ile iç içe bileşen ağacını öğrenirsin.
Bileşen ağacı
JSX, iç içe geçmiş etiketlerle bir ağaç oluşturur. En dıştaki etiket kök, içindekiler onun çocuklarıdır. Bu yapıya bileşen ağacı denir.
Örneğin <View><View><Text>Merhaba</Text></View></View> ifadesinde dıştaki View köktür; içindeki View onun çocuğu, Text ise torunudur.
Ağaç yapısı, ekranı mantıksal parçalara bölmeyi ve düzenlemeyi kolaylaştırır.
İç içe geçmiş View
Bir View içine başka bir View yerleştirebilirsin. Bu, ekranı bölgelere ayırmanın temel yoludur: üst bilgi, içerik, alt bilgi gibi.
İç içe geçmiş etiketlerde kapanış sırası içten dışa olur. Yani en içteki etiket ilk kapatılır.
Örnek: <View><Text>...</Text></View>. Burada Text önce, View sonra kapatılır.
Uygulama İç içe View yaz
App bileşeni yaz. Dış <View> içinde ikinci bir <View>, onun içinde <Text>Merhaba</Text> olsun. Kapanış sırası içten dışa doğru olmalı.
Başlangıç kodu
// İç içe View yaz
function App() {
return null;
}Örnek çözüm
function App() {
return (
<View>
<View>
<Text>Merhaba</Text>
</View>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Ağaç kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
Kök |
En dıştaki etiket |
Çocuk |
İçteki etiket |
İç içe geçme |
Ağacı oluşturur |
Kapanış sırası |
İçten dışa doğru |
2 İç View kapanışı
<View>
<View>
<Text>Merhaba</Text>
____
</View><View>
<View>
<Text>Merhaba</Text>
</View>
</View>Açıklama: İçten dışa doğru kapatılır.
3 Hangisi geçerli bir ağaçtır?
- <View><Text>Merhaba</View></Text>
- <View /><Text /></View>
- <View><Text>Merhaba<Text></View>
- <View><View><Text>Merhaba</Text></View></View> Doğru cevap
Açıklama: Etiketler doğru iç içe kapanmış.