Contoh Kasus Nyata: Fitur "Favorit"

Mari kita bangun satu fitur kecil dari ujung ke ujung: pengguna bisa menandai item dalam daftar sebagai favorit, dan melihat hitungan berapa banyak yang sudah mereka favoritkan.

Memotongnya menjadi irisan

Berikut cara saya memecahnya menjadi langkah-langkah vertikal:

1. Tambahkan tombol bintang di sebelah setiap item (belum melakukan apa-apa, cuma muncul).
2. Klik bintang mengganti tampilannya antara aktif/nonaktif (hanya state, belum disimpan).
3. Tampilkan penghitung "★ 3 favorit" yang mencerminkan hasil klik.
4. Simpan favorit agar tetap ada setelah halaman dimuat ulang.

Perhatikan bahwa setiap langkah bisa dijalankan dan dilihat secara mandiri. Kamu bisa berhenti setelah salah satu langkah dan tetap punya aplikasi yang berfungsi.

Langkah 1: tombolnya

Prompt yang baik menyebutkan nama file, perubahannya, dan apa yang tidak boleh disentuh:

In the ItemCard component (src/components/ItemCard.jsx), add a star
button in the top-right corner of each card. It should render an
outline star icon. Don't wire up any click behavior yet — just make
it appear. Keep the rest of the card layout unchanged.

Jalankan aplikasinya. Kamu lihat bintang-bintangnya? Bagus. Commit:

git add -A && git commit -m "Add star button to item cards"

Langkah 2: mengganti state-nya

Make the star button toggle between filled and outline when clicked.
Track this with local component state — don't save it anywhere yet.
A filled star means favorited.

Bayangkan state sebagai memori jangka pendek aplikasi — apa yang benar saat ini juga, seperti apakah sebuah bintang tertentu sedang terisi penuh atau tidak. Sekarang kamu menangani state dan UI bersamaan, dan itu wajar. (UI, atau user interface/antarmuka pengguna, hanyalah bagian aplikasi yang dilihat dan diklik orang.) AI kemungkinan akan menambahkan sesuatu seperti ini:

const [isFavorite, setIsFavorite] = useState(false);

<button onClick={() => setIsFavorite(!isFavorite)}>
  {isFavorite ? <StarFilled /> : <StarOutline />}
</button>

Klik beberapa bintang. Apakah berubah? Commit.

Langkah 3: penghitungnya

Add a "★ N favorites" counter at the top of the item list. It should
count how many items currently have their star filled. Lift the
favorite state up to the list component if you need to so the counter
can see it.

Langkah ini mungkin mengharuskan AI menyusun ulang di mana state itu tinggal — itu wajar diperkirakan, dan justru itu alasan kamu melakukannya sebagai langkah kecil tersendiri. Jalankan, klik beberapa bintang, lihat angkanya berubah. Commit.

Langkah 4: membuatnya persisten

Persist favorites so they survive a page reload. Use localStorage for
now — save the list of favorited item IDs whenever it changes, and
load it on startup.

(localStorage hanyalah semacam buku catatan kecil yang disimpan browser di komputer pengunjung sendiri, sehingga aplikasi bisa mencatat sesuatu dan menemukannya lagi setelah dimuat ulang.) Muat ulang halamannya. Masih terfavoritkan? Kamu baru saja merilis sebuah fitur, satu irisan yang bisa dijalankan pada satu waktu.

Berikut cara bagian-bagian fitur yang sudah selesai saling berbicara. Sebuah klik mengalir turun ke state, layar digambar ulang dari state, dan state dicerminkan ke penyimpanan agar bertahan setelah dimuat ulang:

     ┌─────────────────────────────────────────────┐
     │                                              │
   click star                                  redraws from
     │ (event)                                 state
     ▼                                              ▲
 ┌────────┐   updates    ┌─────────┐    feeds   ┌────────┐
 │   UI   │─────────────▶│  STATE  │───────────▶│   UI   │
 │(button)│              │(in app  │            │(filled │
 └────────┘              │ memory) │            │ star + │
                         └────┬────┘            │counter)│
                              │ save on change  └────────┘
                              ▼
                         ┌──────────┐
                         │ STORAGE  │  ◀── load on startup,
                         │(localSt.)│      so it survives reload
                         └──────────┘