CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Ternary operatör

Koşul ? doğru : yanlış ile kısa koşullu render yazmayı öğrenirsin.

Ternary operatör

Ternary operatör koşul ? doğruDeğer : yanlışDeğer biçimindedir. JSX içinde süslü parantezle kullanılır: { 'count > 0 ? <Full /> : <Empty />' }.

Ternary iki seçenek arasında seçim yapmanın en kısa yoludur. İç içe yazılabilir ama okunurluk için iç içe kullanımı sınırlandırmak iyi bir uygulamadır.

İfade döndürdüğü için süslü parantez içinde doğrudan kullanılabilir; if deyimi gibi ek satır gerektirmez.

Ternary ve if farkı

Ternary bir ifadedir: bir değer döndürür ve süslü parantez içinde kullanılabilir. if ise bir deyimdir: değer döndürmez ve süslü parantez içinde kullanılamaz.

Bu yüzden JSX içinde koşullu render için ternary tercih edilir. if ancak bileşenin gövdesinde, return dışında kullanılabilir.

İç içe iki koşul gerekiyorsa, ternary yerine yardımcı değişken veya erken return daha okunaklı olabilir.

Uygulama Stok durumuna göre etiket

Aşağıdaki iskeleti tamamla. StockLabel adında bir bileşen yaz; ({ '{ count }' }) parametresi alsın. count 0'dan büyükse <p>Stokta</p>, değilse <p>Tükendi</p> döndürsün (ternary ile). Dışa aktarmayı unutma.

Başlangıç kodu

App.jsx
// StockLabel bileşenini buraya yaz

Örnek çözüm

App.jsx
function StockLabel({ count }) {
  return count > 0 ? <p>Stokta</p> : <p>Tükendi</p>;
}

export default StockLabel;

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 Ternary operatör kaç değer döndürür?

  • Bir
  • İki Doğru cevap
  • Üç
  • Sıfır

Açıklama: Ternary iki değerden birini döndürür.

2 Ternary yazımı

Soru 
Ternary ____ işaretiyle başlar.
Cevap 
Ternary ? işaretiyle başlar.

Açıklama: ? ternary işaretidir.

3 Ternary parçalarını eşleştir

Kavram Anlamı
koşul Soru öncesi
? Soru işareti
doğruDeğer İlk değer
yanlışDeğer İkinci değer

Başlangıç bölümündeki tüm dersler

1 React girişi

  1. React nedir?
  2. Kurulum ve Vite
  3. İlk bileşen
  4. Özet - React girişi

2 JSX temelleri

  1. JSX nedir?
  2. İfadeler ve süslü parantez
  3. Öznitelikler ve className
  4. Özet - JSX temelleri

3 Bileşenler

  1. Bileşen mantığı
  2. Bileşen ağacı
  3. İsimlendirme kuralları
  4. Özet - Bileşenler

4 Profil kartı

  1. Proje: Profil kartı
  2. Avatar bileşeni
  3. Bilgi listesi
  4. Kartı birleştir

5 Props

  1. Props nedir?
  2. Props okuma
  3. Children prop
  4. Varsayılan props
  5. Özet - Props

6 Koşullu render

  1. Koşullu render nedir?
  2. Ternary operatör
  3. Mantıksal AND (&&)
  4. Erken return
  5. Özet - Koşullu render

7 Liste render

  1. Liste render nedir?
  2. key özniteliği
  3. Diziden bileşen
  4. Filtreleme ve sıralama
  5. Özet - Liste render

8 Alışveriş listesi

  1. Proje: Alışveriş listesi
  2. Öğe bileşeni
  3. Liste gövdesi
  4. Boş durum

9 Olaylar

  1. Olaylar (events)
  2. Olay nesnesi
  3. Form olayları
  4. Özet - Olaylar

10 useState

  1. State nedir?
  2. useState çağrısı
  3. State güncelleme
  4. Birden fazla state
  5. Özet - useState

11 Sayaç uygulaması

  1. Proje: Sayaç uygulaması
  2. Sayı ve buton
  3. Azaltma ve sıfırlama
  4. Sınır kontrolü

12 Formlar

  1. Kontrollü input
  2. Form gönderimi
  3. Birden çok alan
  4. Özet - Formlar

13 Stil

  1. CSS ile stil
  2. CSS Modules
  3. Inline stiller
  4. Özet - Stil

14 styled-components

  1. styled-components nedir?
  2. Props ile stil
  3. Tema kullanımı
  4. Özet - styled-components

15 useReducer

  1. useReducer nedir?
  2. Aksiyon ve state
  3. useState vs useReducer
  4. Özet - useReducer

16 useEffect

  1. useEffect nedir?
  2. Bağımlılık dizisi
  3. Temizlik fonksiyonu
  4. Özet - useEffect

17 Context

  1. Context nedir?
  2. createContext
  3. Provider ve useContext
  4. Özet - Context

18 useRef

  1. useRef nedir?
  2. DOM erişimi
  3. Zamanlayıcı örneği
  4. Özet - useRef

19 Todo uygulaması

  1. Proje: Todo uygulaması
  2. Todo giriş formu
  3. Todo listesi
  4. Filtre ve özet

20 Başlangıç finali

  1. Meydan okuma: Hava durumu kartı
  2. Meydan okuma: Sepet özeti
  3. Meydan okuma: Sayaç ve sıfırlama
  4. Meydan okuma: Açılır menü