Özet - JSX

İfadeler, iç içe bileşen ve koşullu render'ı birleştirerek bir profil kartı yazarsın.

Özet - JSX

Bu grupta JSX'in ne olduğunu, süslü parantez içinde ifade gömmeyi, iç içe bileşen ağacını, self-closing etiketleri ve koşullu render yöntemlerini öğrendin.

Artık bir bileşenin dönüşünde değişkenleri hesaplayıp gösterebilir, koşullara göre farklı metinler çıkarabilirsin.

Şimdi tüm bu kavramları tek bir uygulamada birleştirelim.

Uygulama İfade ve iç içe

productName değişkeni tanımla (const productName = 'Kahve';). App bileşeni dış <View> içinde ikinci bir <View>, onun içinde <Text>Urun: {productName}</Text> döndürsün.

Örnek çözümü göster

const productName = 'Kahve';

function App() {
  return (
    <View>
      <View>
        <Text>Urun: {productName}</Text>
      </View>
    </View>
  );
}

Uygulama Koşullu karşılama

isLoggedIn değişkeni tanımla (const isLoggedIn = false;). App bileşeni <View> içinde ternary kullansın: doğruysa <Text>Hosgeldin</Text>, yanlışsa <Text>Lütfen giriş yap</Text> göstersin.

Örnek çözümü göster

const isLoggedIn = false;

function App() {
  return (
    <View>
      {isLoggedIn ? <Text>Hosgeldin</Text> : <Text>Lütfen giriş yap</Text>}
    </View>
  );
}

Kendini test et

Hangisi geçerli JSX?
- <view></view>
- <View><Text></View></Text>
- <View><Text /></View>
- <View text=merhaba />
Cevabı göster

<View><Text /></View> — Self-closing Text, View içinde doğru kullanılmış.
JSX araçlarını eşleştir

{ }

İfade gömme
<View />

Self-closing
&&

Koşullu ve
? :

Ternary

Sıradaki ders: Fonksiyonel bileşen

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler