Proje: Todo uygulaması
- React kursu
- Başlangıç
- Ders 77/84
- 4 dk
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.)
Başlangıç kodu
import { useState } from "react";
// TodoApp bileşenini buraya yazÖrnek çözüm
import { useState } from "react";
function TodoApp() {
const [todos, setTodos] = useState([]);
const [text, setText] = useState("");
return (
<main>
<h1>Todo</h1>
</main>
);
}
export default TodoApp;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Todo veri modelinde hangi alan yok?
- text
- id
- color Doğru cevap
- done
Açıklama: color modelde yok.
2 Todo tipi
Todo nesnesinin tamamlanma bayrağı ____ alanıdır.Todo nesnesinin tamamlanma bayrağı done alanıdır.Açıklama: done alanı tamamlanmayı tutar.
3 Todo adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
TodoForm |
Metin ekler |
TodoList |
Listeler |
Filtre |
Aktif/todo |
Özet |
Kalan sayı |