Negara: aplikasi yang mengingat

Mengapa variabel biasa saja tidak cukup

Di Level 2, kamu membuat penghitung dengan menulis ulang sendiri teks tombol setelah setiap klik. React melakukannya secara berbeda: kamu mengubah data, dan React menggambar ulang layar. Namun kamu harus menyerahkan datanya ke kotak khusus bernama state – jika tidak, React tidak akan melihat perubahannya.

Tunjukkan pada saya: penghitung di React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked: {count}×
    </button>
  );
}

export default Counter;

Menguraikan baris yang paling penting – const [count, setCount] = useState(0);:

• useState(0) – “React, siapkan kotak untuk saya dengan nilai awal 0.”
• count – nilai saat ini di dalam kotak (hanya baca).
• setCount – satu-satunya cara yang benar untuk mengubah nilainya. Saat kamu memanggil setCount(5), React menyimpan nilai baru dan menggambar ulang di mana pun count digunakan, dengan sendirinya.

Dan onClick={...} adalah versi React dari addEventListener("click", ...) – tepat di dalam JSX.

Perhatikan apa yang tidak dalam kode: tidak ada getElementById, tidak ada textContent. kamu tidak mengatakan cara mengubah layar – kamu mengatakan apa yang benar sekarang (hitungan sekarang menjadi 5), dan layar akan berbaris dengan sendirinya.

Tunjukkan pada saya: negara mengontrol apa yang terlihat

Negara tidak harus hanya sekedar angka. Bagian yang dapat dilipat, dengan cara Bereaksi:

import { useState } from 'react';

function Menu() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>
        {open ? "Hide the menu ▲" : "Show the menu ▼"}
      </button>

      {open && (
        <ul>
          <li>Monday: tomato soup with pasta</li>
          <li>Tuesday: chicken with rice</li>
          <li>Wednesday: pancakes with jam</li>
        </ul>
      )}
    </div>
  );
}

Dua trik BEJ baru:

• kondisi ? A : B – singkatan if/else tepat di dalam HTML: “jika terbuka, tunjukkan ini, jika tidak itu.”
• condition && (...) – “hanya render ini jika kondisinya benar.” Jika open salah, daftarnya tidak ada.

Dan !open berarti “sebaliknya” – mengubah benar menjadi salah dan sebaliknya. Satu baris = sebuah saklar.

Giliran kamu 💪

Tambahkan dua hal dengan status ke aplikasi kamu:

1. Bagian yang dapat diciutkan (keadaan benar/salah) yang cocok dengan proyek kamu: 🏫 menu makan siang yang dapat diciutkan · 🙋 “tampilkan/sembunyikan game favorit saya” · 🌍 daftar negara yang dapat diciutkan · ⚽ daftar nama yang dapat diciutkan.
2. Penghitung atau pemungutan suara (status numerik): 🏫 pilih perjalanan kelas · 🙋 “berapa banyak orang yang menyapa saya hari ini” · 🌍 penghitung negara yang dikunjungi · ⚽ papan skor dengan tombol +1 pulang / +1 tandang (dua negara bagian!).

import { useState } from 'react';

function Score() {
  const [home, setHome] = useState(0);
  const [away, setAway] = useState(0);

  return (
    <div className="card">
      <h3>Riverside {home} : {away} Lakeside</h3>
      <button onClick={() => setHome(home + 1)}>Home goal ⚽</button>
      <button onClick={() => setAway(away + 1)}>Away goal 😤</button>
      <button onClick={() => { setHome(0); setAway(0); }}>New match</button>
    </div>
  );
}

export default Score;

Apa yang bisa diambil dari pelajaran ini

• const [value, setValue] = useState(start) – memori komponen.
• Ubah hanya melalui setValue(...) – React kemudian menggambar ulang sendiri.
• Di BEJ: onClick={...}, kondisi ? : dan && mengontrol apa yang terlihat.

© 2026 Ing. Martin Polak / AlgoRhino · Ketentuan penggunaan konten