Boş durum

Liste boşken yedek mesaj gösteren kodu eklersin.

Boş durum

Son parça EmptyState: liste boşken mesaj gösterir. Bunu items.length === 0 koşuluyla koşullu render yaparız.

Yaklaşım: {items.length === 0 ? <EmptyState /> : <ListBody items={items} />}. Bu, ternary operatörüdür; koşullu render dersinde ayrıntılı göreceğiz.

Boş durum mesajı kullanıcıyı yönlendirir: "Listene öğe ekle" gibi. Bu, iyi kullanıcı deneyiminin temelidir.

Üç parça birleşiyor

ShoppingApp artık üç parçayı birleştirir: veri varsa ListBody, yoksa EmptyState gösterir. Bu, küçük bir gerçek uygulamanın iskeletidir.

Bileşenleri ayırmak, her birini tek başına test etmeyi ve yeniden kullanmayı kolaylaştırır. Veriyi prop'larla akıttık; state'i sonraki gruplarda ekleyeceğiz.

Bu yapı, React'in "böl ve yönet" felsefesinin temelidir.

Uygulama EmptyState bileşeni

Aşağıdaki iskeleti tamamla. EmptyState bileşeni yaz; <p className="empty">Listen boş</p> döndürsün. Dışa aktar.

Örnek çözümü göster

function EmptyState() {
  return <p className="empty">Listen boş</p>;
}

export default EmptyState;

Kendini test et

Boş durumu ne tetikler?
```
The length property gives the item count.
```
- items null ise
- items.length === 0
- hiçbir zaman
- her zaman
Cevabı göster

items.length === 0 — items.length === 0 koşulu boş listeyi yakalar.

Boş durum: eksik parçayı tamamla

{items.length === 0 ? <EmptyState /> : <ListBody items={____} />}

Cevabı göster

{items.length === 0 ? <EmptyState /> : <ListBody items={items} />}

Boş durum: kavramları eşleştir

EmptyState

Boş mesaj
ListBody

Liste gövdesi
Item

Tek satır
ShoppingApp

Kabuk

Sıradaki ders: Olaylar (events)

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler