Bileşen ağacı

JSX ile iç içe bileşen ağacını öğrenirsin.

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.

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ı.

Örnek çözümü göster

function App() {
  return (
    <View>
      <View>
        <Text>Merhaba</Text>
      </View>
    </View>
  );
}

İç View kapanışı

<View>
  <View>
    <Text>Merhaba</Text>
  ____
</View>

Cevabı göster

<View>
  <View>
    <Text>Merhaba</Text>
  </View>
</View>

Sıradaki ders: Self-closing