Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang baru masuk ke React
• Pemula yang sudah paham JS/TS dasar dan ingin membangun UI nyata
• Siapa pun yang bisa HTML/CSS tapi bingung saat UI harus dinamis

Apa yang akan Anda pelajari

• Cara berpikir berbasis komponen (bukan sekadar halaman)
• Dasar JSX dan cara render bekerja
• Props, local state, dan kapan masing-masing dipakai

Mengapa topik ini penting

React bukan cuma soal sintaks, tapi cara menyusun arsitektur UI. Saat Anda paham komponen, props, dan state, bikin interface yang besar jadi jauh lebih terkontrol.

Kalau fondasi ini belum kuat, bab lanjut seperti hooks, routing, dan state management akan terasa lebih susah.

Konsep inti

Components

• Fungsi yang mengembalikan UI
• Bisa dipakai ulang dan dikombinasikan

Bayangkan komponen seperti LEGO: bagian kecil yang fokus, lalu digabung jadi UI besar.

Props

• Data input dari parent ke child
• Membuat komponen lebih terprediksi

Props itu read-only dari sisi child. Kalau data perlu berubah, biasanya state harus ditempatkan di level yang lebih atas.

State

• Data internal yang bisa berubah
• Memicu re-render saat diupdate

State dipakai untuk hal yang berubah seiring waktu: toggle, counter, input form, loading flag.

Panduan langkah demi langkah

Langkah 1 — Buat komponen pertama

Buat komponen sederhana ProfileCard dengan konten statis dulu.

Langkah 2 — Kirim props dinamis

Kirim data dinamis via props lalu render banyak card dari array data.

Langkah 3 — Tambah interaksi

Tambahkan satu interaksi berbasis useState (like/follow/toggle detail).

Target bab ini: paham one-way data flow dengan jelas.

Contoh praktis

Contoh 1 — Komponen dasar

type GreetingProps = { name: string };

function Greeting({ name }: GreetingProps) {
  return <h2>Hello, {name}</h2>;
}

Expected output (saat dirender dengan name="Nora"):

Hello, Nora

Contoh 2 — State lokal

function Counter() {
	const [count, setCount] = useState(0);
	return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Real case:

• Pola update state ini adalah dasar untuk like button, quantity control, dan interaksi dashboard.

Kesalahan umum dan cara menghindarinya

• Mutasi state langsung -> selalu pakai setter (setState pattern)
• Satu komponen kebanyakan tanggung jawab -> pecah jadi komponen kecil yang fokus
• Props dan state tertukar -> props dari parent, state hidup di dalam komponen
• Terlambat “lift state up” -> naikkan state saat data dibutuhkan beberapa sibling

Mini Project

• Buat daftar profile card dengan:
• card component reusable,
• props bertipe,
• satu interaksi lokal (follow/like/toggle detail).

Bonus:

• Tambahkan parent component yang menghitung total profile yang di-follow.

Latihan cepat

• Buat dua komponen kecil lalu komposisikan
• Kirim props bertipe ke child component
• Tambahkan satu interaksi berbasis useState
• Jelaskan dalam satu kalimat: kapan data sebaiknya jadi props vs local state?

Ringkasan utama

• Komponen adalah unit dasar arsitektur React
• Props dan state adalah inti alur data React
• Komponen kecil yang fokus lebih mudah di-scale dan di-maintain

Langkah berikutnya

Lanjut ke [10. React Hooks dan Side Effects].