Proje: Alışveriş listesi

Alışveriş listesi projesinin amacını ve adımlarını gözden geçirirsin.

Proje: Alışveriş listesi

Bu projede küçük bir alışveriş listesi uygulaması kuracağız. Üç parça hedefliyoruz: tek bir öğeyi çizen Item, tüm listeyi çizen ListBody ve liste boşken mesaj gösteren EmptyState.

Her ders bir parçayı ekler; son derste her şey birleşir. Veriyi sabit bir dizi olarak tutacağız; state'i sonraki gruplarda göreceğiz.

Önce uygulamanın iskeletini çıkaralım: bir section ve başlık.

Veri modeli

Alışveriş listesinde her öğenin üç alanı olacak: id (benzersiz kimlik), name (ürün adı) ve qty (adet).

Örnek: { id: 1, name: "Ekmek", qty: 2 }. id'yi key olarak, name'i etiket olarak kullanacağız. qty'i ileride göstereceğiz.

Veriyi sabit tutmak, bileşenleri yazmayı kolaylaştırır; etkileşimi sonraki gruplarda ekleriz.

Uygulama ShoppingApp iskeleti

Aşağıdaki iskeleti tamamla. ShoppingApp bileşeni yaz; <section> içinde <h1>Alışveriş Listesi</h1> döndürsün. Dışa aktar.

Örnek çözümü göster

function ShoppingApp() {
  return <section><h1>Alışveriş Listesi</h1></section>;
}

export default ShoppingApp;

Kendini test et

Bu projede önce hangi bileşen yazılır?
```
We go from the small piece to the big one.
```
- ListBody
- EmptyState
- Item
- Router
Cevabı göster

Item — Önce tek öğeyi çizen Item gelir; sonra ListBody onu çağırır.

Proje: Alışveriş listesi: eksik parçayı tamamla

<section><h1>____</h1></section>

Cevabı göster

<section><h1>Alışveriş Listesi</h1></section>

Proje: Alışveriş listesi: kavramları eşleştir

Item

Tek öğeyi çizer
ListBody

Tüm listeyi çizer
EmptyState

Boş mesajı gösterir
section

Dış kabuk

Sıradaki ders: Öğe bileşeni

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler