Intermediate · Level 7: React FundamentalsIntermediate60 menitBahasa Indonesia

Menambahkan State dan Event

Menambahkan interaksi kecil di project lokal dengan useState, onClick, dan controlled input.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menambahkan useState di component lokal
Memasang event handler untuk button
Membuat controlled input sederhana
Mengecek perubahan UI di browser lokal

ReactStateEventsForms

Isi lesson

6 blok

1.
Interaksi kecil cukup untuk membuktikan workflowBelum selesaiWajib
2.
PracticeTracker componentBelum selesaiWajib
3.
Render PracticeTracker di AppBelum selesaiWajib
4.
Checklist local taskBelum selesaiWajib
5.
Error merah adalah bagian dari workflowBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Interaksi kecil cukup untuk membuktikan workflow

Wajib

Local React App tidak perlu langsung menjadi product besar. Untuk milestone ini, satu interaksi yang berjalan dengan baik sudah sangat berarti: button mengubah count, input mengubah preview, atau form kecil menambah item ke list.

Yang penting, kamu bisa mengedit component, melihat update di browser, membaca error jika muncul, lalu memperbaikinya.

Bagian ini memengaruhi progres lesson.

PracticeTracker component

Wajib

tsx

import { useState } from "react";

export function PracticeTracker() {
  const [topic, setTopic] = useState("");
  const [count, setCount] = useState(0);

  return (
    <section className="practice-tracker">
      <label>
        Topik latihan
        <input value={topic} onChange={(event) => setTopic(event.target.value)} />
      </label>
      <p>Topik aktif: {topic || "Belum dipilih"}</p>
      <p>Sesi latihan: {count}</p>
      <button type="button" onClick={() => setCount(count + 1)}>
        Tambah sesi
      </button>
    </section>
  );
}

`topic` berubah dari input. `count` berubah saat button diklik. Dua state kecil ini cukup untuk melatih event dan render ulang di project lokal.

Bagian ini memengaruhi progres lesson.

Render PracticeTracker di App

Wajib

tsx

import { PracticeTracker } from "./components/PracticeTracker";

function App() {
  return (
    <main>
      <h1>Fluent React Notes</h1>
      <PracticeTracker />
    </main>
  );
}

export default App;

Setelah component diimport dan dirender, cek browser. Ketik di input dan klik button untuk memastikan UI berubah.

Bagian ini memengaruhi progres lesson.

Checklist local task

Wajib

Kerjakan di project lokal kamu:

Buat component interaktif, misalnya `PracticeTracker`.
Import `useState` dari React.
Buat minimal satu state untuk input atau pilihan user.
Buat minimal satu state untuk angka, status, atau list kecil.
Hubungkan input dengan value dan onChange jika memakai form field.
Tambahkan button dengan onClick.
Render component di `App.tsx`.
Jalankan browser dan pastikan UI berubah saat user berinteraksi.
Cek terminal dan Console jika ada error merah.

Tandai selesai setelah interaksi benar-benar berjalan di browser lokal.

Bagian ini memengaruhi progres lesson.

Peringatan

Opsional

Error merah adalah bagian dari workflow

Kalau browser atau terminal menampilkan error, baca pesan pertamanya dulu. Cek import, tanda kurung JSX, nama component, dan apakah `useState` sudah diimport. Jangan langsung menghapus kode secara acak; ubah satu hal kecil lalu cek lagi.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Local React workflow terasa nyata saat UI berubah di browser.
`useState` menyimpan value yang berubah.
`onClick` dan `onChange` menghubungkan aksi user ke state.
Error terminal dan browser Console adalah bagian dari debugging lokal.
Berikutnya kamu akan menyimpan project ke GitHub.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Interaksi kecil cukup untuk membuktikan workflow.

Memuat progres Review module