İfadeler ve süslü parantez

Süslü parantez içinde değişken ve ifade yazmayı öğrenirsin.

İfadeler ve süslü parantez

JSX'in en güçlü yanı, süslü parantez { } içine herhangi bir JavaScript ifadesi koyabilmendir. {name} yazınca React name değişkeninin değerini o noktaya koyar.

Süslü parantez içinde fonksiyon çağrısı, matematik işlemi veya mantıksal ifade de yazabilirsin: { 5 + 3 } veya { format(date) }.

İfadeler tek satır olmalı: if gibi deyimler süslü parantez içine konamaz; bunun yerine ternary operatör cond ? a : b kullanılır.

İç içe ifadeler

Süslü parantez içinde başka JSX bile koyabilirsin. Örneğin <main>{ isLoggedIn && <Avatar /> }</main> satırı, kullanıcı giriş yaptıysa avatar gösterir.

İçeride dizi metotları da çalışır: <ul>{ items.map(i => <li>{i}</li>) }</ul> bir diziyi liste öğelerine çevirir. Bu yaklaşımı ileride liste render konusunda göreceğiz.

Süslü parantez içindeki ifade null, false veya undefined döndürürse React hiçbir şey çizmez; bu da koşullu render için kullanışlıdır.

Uygulama Sayısal ifade göster

Aşağıdaki iskeleti tamamla. Total adında bir bileşen yaz;  içinde süslü parantezle 10 + 5 işleminin sonucunu göstersin ve dışa aktarılsın.

Örnek çözümü göster

function Total() {
  return <p>{10 + 5}</p>;
}

export default Total;

Kendini test et

İfade yerleştir
```
Selam ____
```
Cevabı göster
```
Selam {name}
```
Hangisi süslü parantez içine konabilir?
- { if (x) 1 }
- { 5 + 3 }
- { for (i=0; i<3; i++) }
- { return 5; }
Cevabı göster

{ 5 + 3 } — 5 + 3 bir ifadedir; if, for ve return deyimdir.
İfade örneklerini eşleştir

{name}

Değişken
{ 5 + 3 }

Matematik
{ format(d) }

Çağrı
{ a && b }

Mantık

Sıradaki ders: Öznitelikler ve className

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler