Özet - JSX
- React Native kursu
- Başlangıç
- Ders 12/116
- 5 dk
İ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.
Başlangıç kodu
// productName tanımla
// App bileşenini yaz
function App() {
return null;
}Örnek çözüm
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.
Başlangıç kodu
// isLoggedIn tanımla
// App bileşenini ternary ile yaz
function App() {
return null;
}Örnek çözüm
const isLoggedIn = false;
function App() {
return (
<View>
{isLoggedIn ? <Text>Hosgeldin</Text> : <Text>Lütfen giriş yap</Text>}
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi geçerli JSX?
- <view></view>
- <View><Text></View></Text>
- <View><Text /></View> Doğru cevap
- <View text=merhaba />
Açıklama: Self-closing Text, View içinde doğru kullanılmış.
2 JSX araçlarını eşleştir
| Kavram | Anlamı |
|---|---|
{ } |
İfade gömme |
<View /> |
Self-closing |
&& |
Koşullu ve |
? : |
Ternary |