COMPONENT REACT

Komponen adalah blok bangunan utama di React. Mereka seperti “lego” kecil yang menyusun tampilan aplikasi.

🧠 Apa Itu Komponen?

Di React, komponen adalah fungsi (atau class) yang menampilkan bagian dari antarmuka pengguna (UI). Komponen bisa berupa tombol, form, header, atau bagian lain dari halaman web.

Komponen memungkinkan kamu untuk:

• Memecah UI jadi bagian-bagian kecil dan terpisah
• Mengelola kode yang lebih rapi dan terorganisir
• Menggunakan ulang bagian UI yang sama di berbagai tempat

🧩 Komponen Function (Modern)

Ini cara paling umum dan modern membuat komponen:

function Header() {
  return <h1>Selamat Datang di React</h1>;
}

Kamu bisa juga menulisnya sebagai arrow function:

const Header = () => <h1>Selamat Datang di React</h1>;

Cara Menggunakan Komponen

Setelah membuat komponen, kamu bisa memanggilnya seperti tag HTML:

function App() {
  return (
    <div>
      <Header />
      <p>Ini adalah aplikasi React pertamaku.</p>
    </div>
  );
}

Komponen Harus Huruf Kapital

Nama komponen harus dimulai dengan huruf kapital. Contoh: ✅ Header, ❌ header Ini penting agar React bisa membedakan antara tag HTML dan komponen buatanmu.

📦 Satu File, Satu Komponen

Biasanya tiap komponen ditulis di file terpisah:

📁 src/Header.jsx

function Header() {
  return <h1>Halo dari Header</h1>;
}

export default Header;

📁 src/App.jsx

import Header from './Header';

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