İfadeler ve süslü parantez
- React kursu
- Başlangıç
- Ders 6/84
- 4 dk
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. <p>{name}</p> 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: <p>{ 5 + 3 }</p> veya <p>{ format(date) }</p>.
İ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; <p> içinde süslü parantezle 10 + 5 işleminin sonucunu göstersin ve dışa aktarılsın.
Başlangıç kodu
// Total bileşenini buraya yazÖrnek çözüm
function Total() {
return <p>{10 + 5}</p>;
}
export default Total;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 İfade yerleştir
<p>Selam ____</p><p>Selam {name}</p>Açıklama: {name} ifadesi süslü parantez içinde değer gömer.
2 Hangisi süslü parantez içine konabilir?
- { if (x) 1 }
- { 5 + 3 } Doğru cevap
- { for (i=0; i<3; i++) }
- { return 5; }
Açıklama: 5 + 3 bir ifadedir; if, for ve return deyimdir.
3 İfade örneklerini eşleştir
| Kavram | Anlamı |
|---|---|
{name} |
Değişken |
{ 5 + 3 } |
Matematik |
{ format(d) } |
Çağrı |
{ a && b } |
Mantık |