İfadeler
- React Native kursu
- Başlangıç
- Ders 8/116
- 4 dk
JSX içinde {} ile JavaScript ifadelerini öğrenirsin.
Süslü parantez içinde ifade
JSX'te bir JavaScript ifadesini gömmek için süslü parantez { } kullanırsın. Örneğin <Text>Merhaba, {name}</Text> yazdığında name değişkeninin değeri metne eklenir.
Süslü parantez içinde herhangi bir ifade yazılabilir: değişken, aritmetik işlem, dizi erişimi, fonksiyon çağrısı. Örneğin <Text>{1 + 2}</Text> ekrana 3 yazar.
Ancak if gibi deyimler süslü parantez içinde çalışmaz; onun yerine ternary kullanılır.
İşlemler ve fonksiyonlar
Süslü parantez yalnız değişken değil, hesaplama da yapar. <Text>{price * 1.18}</Text> ile KDV dahil fiyat gösterebilirsin.
Bir fonksiyonun sonucunu da gömebilirsin: <Text>{getLabel()}</Text>. Fonksiyon çağrısının döndürdüğü değer ekrana yazılır.
Dizi ve nesne erişimi de çalışır: <Text>{user.name}</Text>. Bu esneklik JSX'i güçlü kılar.
Uygulama İfade göm
App bileşeni yaz. userName adında bir değişken tanımla (örnek: const userName = 'Ayşe';). <Text> içinde süslü parantez ile Merhaba, ve userName değerini birleştirip göster.
Başlangıç kodu
// userName değişkenini tanımla
// App bileşenini yaz
function App() {
return null;
}Örnek çözüm
const userName = 'Ayşe';
function App() {
return (
<Text>Merhaba, {userName}</Text>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Değişken gömme
<Text>Merhaba, ____</Text><Text>Merhaba, {userName}</Text>Açıklama: Süslü parantez içinde değişken değeri gömülür.
2 {user.name} ne yapar?
<Text>{user.name}</Text>- user değişkeninin tüm içeriğini yazar
- name adında yeni bir değişken tanımlar
- user nesnesinin name özelliğinin değerini yazar Doğru cevap
- name değişkenini user'a atar
Açıklama: Nokta, nesnenin özelliğine erişir.
3 İfade türlerini eşleştir
| Kavram | Anlamı |
|---|---|
{name} |
Değişken |
{1 + 2} |
İşlem |
{user.age} |
Özellik |
{getLabel()} |
Fonksiyon |