Komponen: Memecah UI Menjadi Bagian Kecil

Komponen = potongan UI yang bisa dipakai ulang

Bayangkan sebuah halaman media sosial: header, daftar postingan, tombol suka, kolom komentar. Setiap bagian bisa menjadi komponen. Keuntungannya: kode lebih rapi, bisa dipakai ulang, dan mudah diuji.

Membuat komponen

Function biasa yang mengembalikan JSX:

function Salam() {
  return <p className="salam">Halo!</p>;
}

Aturan wajib: nama diawali huruf besar.

Memakai komponen

Gunakan seperti tag HTML:

function App() {
  return (
    <div>
      <Salam />
      <Salam />
      <Salam />
    </div>
  );
}

Setiap <Salam /> menghasilkan satu salinan UI yang independen.

Komponen di dalam komponen (komposisi)

function Header() {
  return <header><h1>KelasIT</h1></header>;
}

function Footer() {
  return <footer>© 2026</footer>;
}

function App() {
  return (
    <>
      <Header />
      <main>...</main>
      <Footer />
    </>
  );
}

Aplikasi React adalah pohon komponen dengan App sebagai akar.

Cara menentukan batas komponen

• Satu tanggung jawab: komponen sebaiknya melakukan satu hal.
• Jika bagian UI berulang (kartu produk), jadikan komponen.
• Jika bagian UI punya state/logika sendiri (form, dropdown), jadikan komponen.
• Jika komponen mulai terlalu panjang (> 100 baris), pertimbangkan memecahnya.

Jangan mendefinisikan komponen di dalam komponen

// ❌ Salah: Anak dibuat ulang setiap App dirender, state-nya hilang
function App() {
  function Anak() { return <p>Anak</p>; }
  return <Anak />;
}

Selalu definisikan komponen di tingkat atas file.

Komponen murni (pure)

Dengan input yang sama (props & state), komponen harus menghasilkan JSX yang sama dan tidak mengubah hal di luar dirinya saat render (misalnya mengubah variable global). Perubahan di luar render dilakukan lewat event handler atau useEffect.

Nama berkas dan ekspor

Satu berkas satu komponen: Salam.jsx dengan export default function Salam() { ... }.