Proyek Akhir: Aplikasi To-Do List

Menggabungkan state, list, form, event, dan komponen dalam satu aplikasi lengkap.

Part 23 dari 23 ± 60 menit Gratis

Selamat sampai di proyek akhir!

Kamu akan membangun To-Do List lengkap dengan menambah, menandai selesai, menghapus, dan memfilter tugas. Proyek ini memakai hampir semua konsep React yang sudah kamu pelajari.

Spesifikasi (ikuti nama class persis agar bisa dinilai)

Elemen	Aturan
Form	`<form>` berisi `<input name="judul">` dan tombol submit
Tambah	Submit menambah tugas; judul kosong/spasi saja diabaikan; input dikosongkan setelah tambah
Daftar	`<ul>` berisi `<li>` per tugas, berisi `<span className="judul">` dan tombol `.hapus`
Selesai	Klik `.judul` menandai selesai: `<li>` mendapat class `selesai` (klik lagi membatalkan)
Sisa	`<p className="sisa">N tugas tersisa</p>` — N = jumlah yang belum selesai
Filter	Tombol `[data-filter="semua"]`, `[data-filter="aktif"]`, `[data-filter="selesai"]` memfilter daftar

Rancangan komponen & state

State di App (atau di TodoApp): tugas (array { id, judul, selesai }), filter ("semua" | "aktif" | "selesai"), dan judulBaru (input terkontrol).
Nilai turunan (jangan jadikan state): tugasTampil (hasil filter) dan sisa (jumlah yang belum selesai).
Kamu boleh memecah menjadi komponen kecil: FormTugas, ItemTugas, FilterBar.

Langkah pengerjaan

Siapkan state dan input terkontrol.
tambah(e): preventDefault, trim() judul, abaikan jika kosong, tambahkan { id, judul, selesai: false } ke array baru, kosongkan input.
toggle(id): map array, ubah selesai pada item yang cocok.
hapus(id): filter array.
Hitung sisa dan tugasTampil saat render.
Render daftar dengan key={t.id}.

Pola ID unik

Gunakan counter di state (const [nomor, setNomor] = useState(1)) atau crypto.randomUUID(). Jangan memakai index sebagai ID.

Pengembangan lanjutan

Simpan ke localStorage dengan custom hook useLocalStorage.
Tambahkan edit judul, tenggat waktu, dan kategori.
Pindahkan state ke useReducer + Context.
Ambil/ simpan data ke API server (React Query).
Tulis test dengan Vitest dan React Testing Library.
Deploy ke Vercel atau Netlify (npm run build).

Langkah selanjutnya setelah course ini

TypeScript untuk React agar lebih aman.
Next.js untuk routing berbasis folder dan SSR.
React Query / Zustand untuk data server dan state global.
Testing, aksesibilitas, dan performa.
Bangun 2-3 proyek portofolio dan deploy.

Setelah lulus bab ini, kerjakan Quiz Arena. Nilai minimal 70 membuka sertifikat kelulusanmu. Selamat — kamu sudah menguasai dasar React! 🎉