İfadeler

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.

Örnek çözümü göster

const userName = 'Ayşe';

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

Kendini test et

Değişken gömme

<Text>Merhaba, ____</Text>

Cevabı göster

<Text>Merhaba, {userName}</Text>

{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
- name değişkenini user'a atar
Cevabı göster

user nesnesinin name özelliğinin değerini yazar — Nokta, nesnenin özelliğine erişir.
İfade türlerini eşleştir

{name}

Değişken
{1 + 2}

İşlem
{user.age}

Özellik
{getLabel()}

Fonksiyon

Sıradaki ders: Bileşen ağacı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler