CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

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.

Başlangıç kodu

App.jsx
// ShoppingApp bileşenini buraya tanımla

Örnek çözüm

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

export default ShoppingApp;

Soru ve cevaplar

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

1 Bu projede önce hangi bileşen yazılır?

App.jsx
We go from the small piece to the big one.
  • ListBody
  • EmptyState
  • Item Doğru cevap
  • Router

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

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

Soru 
<section><h1>____</h1></section>
Cevap 
<section><h1>Alışveriş Listesi</h1></section>

Açıklama: Başlık section içinde h1 olur.

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

Kavram Anlamı
Item Tek öğeyi çizer
ListBody Tüm listeyi çizer
EmptyState Boş mesajı gösterir
section Dış kabuk

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ü