Proje: Todo uygulaması

Todo uygulamasının amacını ve adımlarını gözden geçirirsin.

Proje: Todo uygulaması

Bu projede adım adım bir Todo uygulaması kuracağız. Üç derslik proje: giriş formu, liste ve filtre/özet. Her ders bir öncekinin üstüne inşa edilir.

Veri modeli basit: her todo bir nesne — { '{ id, text, done }' }. id benzersiz kimlik, text görev metni, done ise tamamlandı mı bayrağı.

State yönetimi useState ile: todos dizisi ve text girişi. Daha sonra başka bir grupta useReducer ile yeniden yazacağız.

Üç adımlı yapı

İlk ders TodoForm bileşenini yazar: bir metin girişi ve ekle butonu. Girilen metni todos dizisine ekler.

İkinci ders TodoList'i yazar: tüm todo'ları listeler, her birinin yanına tamamla/toggle butonu koyar. map ile çizilir, her öğeye benzersiz key verilir.

Üçüncü ders filtre ve özet ekler: yalnızca aktif/todo olanları göster, kalan sayısını yazdır. Bu, türetilmiş veri (derived state) için iyi bir alıştırmadır.

Uygulama TodoApp iskeleti

Aşağıdaki iskeleti tamamla. TodoApp bileşeni yaz. todos ve text için iki state tanımla. <main> içinde <h1>Todo</h1> göster. Dışa aktar. (Form ve liste sonraki derslerde eklenecek.)

Örnek çözümü göster

import { useState } from "react";

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState("");
  return (
    <main>
      <h1>Todo</h1>
    </main>
  );
}

export default TodoApp;

Kendini test et

Todo veri modelinde hangi alan yok?
- text
- id
- color
- done
Cevabı göster

color — color modelde yok.

Todo tipi

Todo nesnesinin tamamlanma bayrağı ____ alanıdır.

Cevabı göster

Todo nesnesinin tamamlanma bayrağı done alanıdır.

Todo adımlarını eşleştir

TodoForm

Metin ekler
TodoList

Listeler
Filtre

Aktif/todo
Özet

Kalan sayı

Sıradaki ders: Todo giriş formu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler