Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang ingin paham apa saja yang “disembunyikan” oleh React
• Pemula yang masih bingung soal DOM dan alur event
• Siapa pun yang ingin debug UI lebih cepat saat behavior aneh muncul

Apa yang akan Anda pelajari

• Seleksi dan update DOM yang aman dan terstruktur
• Penanganan event klik, input, dan submit
• Dasar localStorage untuk persistence ringan

Mengapa topik ini penting

React memang bikin development lebih cepat, tapi perilaku browser tetap fondasi utama. Saat terjadi bug seperti double submit, input stale, atau event yang tidak terduga, pemahaman native DOM akan sangat membantu.

Bab ini kasih mental model “mesin aslinya” sebelum semuanya diabstraksikan oleh framework.

Konsep inti

Manipulasi DOM

• Pilih elemen dengan query selector
• Ubah konten teks dengan aman

Gunakan manipulasi DOM secara terarah. Kalau update DOM dilakukan sembarangan di banyak tempat, bug UI jadi sulit dilacak.

Event handling

• Pasang listener untuk interaksi pengguna
• Gunakan preventDefault saat diperlukan

Di project nyata:

• Mayoritas perilaku UI terjadi karena event.
• Alur event yang rapi = side effect lebih terkendali.

Local storage

• Simpan data key-value ringan di browser
• Gunakan JSON parse/stringify untuk object/array

localStorage cocok untuk data kecil (tema, draft, task list ringan), bukan untuk data sensitif.

Panduan langkah demi langkah

Langkah 1 — Buat struktur HTML statis

Siapkan struktur minimal: input, tombol, dan kontainer list.

Langkah 2 — Tambahkan logika event

Tambahkan handler untuk tambah/hapus task, dan jaga tiap handler tetap fokus.

Langkah 3 — Tambahkan persistence

Simpan task ke localStorage lalu muat ulang saat halaman dibuka.

Target bab ini: bikin behavior browser yang prediktif tanpa bantuan framework.

Contoh praktis

Contoh 1 — Handler submit input

form.addEventListener("submit", (event) => {
	event.preventDefault();
	// add task
});

Kenapa ini penting:

• preventDefault() mencegah form melakukan reload halaman otomatis.

Contoh 2 — Simpan array ke localStorage

localStorage.setItem("tasks", JSON.stringify(tasks));
const saved = JSON.parse(localStorage.getItem("tasks") ?? "[]");

Real case:

• Pola ini sering dipakai di prototype ringan dan flow yang butuh data tetap ada setelah refresh.

Kesalahan umum dan cara menghindarinya

• Input dipakai mentah -> trim dan validasi dulu sebelum diproses
• Lupa parse/stringify JSON -> localStorage menyimpan string, bukan object
• Event listener terpasang berulang -> pasang sekali saat inisialisasi
• Data localStorage terlalu besar -> simpan hanya data yang benar-benar perlu

Mini Project

• Buat to-do app vanilla TypeScript dengan:
• tambah task,
• hapus task,
• simpan list ke localStorage,
• pesan empty-state sederhana.

Bonus:

• Tambahkan tombol “clear completed”.

Latihan cepat

• Tambahkan click event untuk membuat task
• Simpan task ke localStorage
• Muat ulang task saat halaman dibuka
• Jelaskan dalam satu kalimat: kapan Anda perlu pakai preventDefault()?

Ringkasan utama

• Fondasi browser tetap penting walaupun Anda pakai React
• Cara berpikir event-driven adalah mindset inti frontend
• localStorage cocok untuk persistence kecil, bukan arsitektur state besar

Langkah berikutnya

Lanjut ke [08. JavaScript Asinkron].