Coba liat aplikasi Tokopedia di HP. Ada navbar atas, search bar, banner promo, kartu produk yang berderet, footer. Bayangin tiap bagian itu ditulis terpisah sebagai potongan kode mandiri — bisa dipake ulang di halaman lain, di-test sendiri, di-update tanpa ganggu yang lain. Itu inti komponen di React: building block UI yang bisa dipake berkali-kali, layaknya balok Lego. Tombol di header, tombol di form, tombol di footer — kalau cuma satu komponen <Button>, ubah sekali = update di mana-mana.

💡 Filosofi penting. Satu komponen = satu tanggung jawab (Single Responsibility Principle). <UserCard> cuma nampilin data user. <UserAvatar> cuma render foto profil. Komponen yang ngerjain 10 hal sekaligus = bug magnet + susah test. Pecah jadi yang lebih kecil + fokus.

Function Component

function Greeting() {
  return <p>Selamat datang!</p>
}

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <Greeting />
    </div>
  )
}

Tiga <Greeting /> di atas render tiga paragraf identik. Sekali tulis, dipake berkali-kali — itu kekuatan komponen.

Aturan Penting

• Nama harus diawali huruf KAPITAL — Greeting (✓), greeting (✗ — React anggap HTML tag biasa, gak render component)
• Return wajib JSX — fungsi yang gak return JSX bukan komponen valid
• Bisa di-nest — komponen di dalam komponen di dalam komponen, sedalam yang dibutuhkan
• Pakai kayak HTML tag — <Greeting /> self-closing kalau gak punya children, <Card>...</Card> kalau punya children

🎭 Analogi sehari-hari

Komponen React itu kayak resep masakan yang dibukukan. Resep nasi goreng tinggal satu tulisan — mau masak buat 1 orang atau 100 orang, resepnya tetap satu yang sama. Bisa dimodifikasi (<NasiGoreng pedas="extra" />) tanpa nulis ulang resep dasarnya. Tukar bahan utama (parameter berbeda), beda hasil — tapi STRUKTUR resepnya konsisten. Komponen di React = resep UI yang bisa dipake ulang berkali-kali, tinggal kasih parameter beda (pelajaran berikutnya: Props).

⚠️ Jebakan yang sering ditemui

• Nama lowercase — function button() {} lalu <button /> = React anggap HTML <button> biasa, GAK render component kamu. Selalu PascalCase: Button, MyButton, UserCard.
• Return tanpa parens di multi-line — return\n <div>... di JS bisa kena Automatic Semicolon Insertion (return undefined!). Bungkus dengan parens: return (\n <div>...\n).
• Componen "ngerjain banyak hal" — function UserDashboardWithSettingsAndNotifications() = jelek. Pecah jadi <UserDashboard> + <Settings> + <Notifications>.
• Nge-define komponen di dalam komponen lain — function Outer() { function Inner() {...}; return <Inner /> } = Inner di-recreate tiap render, state hilang, performa drop. Define di top-level file.
• Lupa import — pakai <Button /> tanpa import Button from "./Button" = ReferenceError. Build tool (Vite/CRA) gak auto-import.

🎯 Pecah komponen — kapan dan seberapa kecil?

• Bisa dipake ulang di tempat lain → wajib pisahin (<Button>, <Card>, <Avatar>)
• Punya state/logika sendiri → pisahin biar gak gemuk parent (<SearchBox>, <Modal>)
• JSX > 150 baris → tanda harus dipecah (kebanyakan tanggung jawab)
• Cuma 5 baris JSX simple yang gak dipake ulang → biarin inline, jangan over-engineer

Aturan praktis: pecah saat reuse + saat ukuran membesar. JANGAN pecah cuma karena "biar rapi" — terlalu banyak komponen kecil = navigasi file ribet.

TL;DR: Komponen = building block UI di React, bisa dipake ulang. Function component = fungsi JS yang return JSX. Nama WAJIB PascalCase (<Button> ✓, <button> ✗ — React anggap HTML). Single Responsibility — satu komponen, satu tugas. Define di top-level file (jangan nest komponen dalam komponen lain — bug + perf). Pecah saat reuse atau saat membesar > ~150 baris JSX.