Komponen di React: Buat sekali, pakai berkali-kali!

Udah kenalan sama JSX yang bikin kita bisa nulis "HTML" di JavaScript? Keren! Sekarang, kita bakal masuk ke salah satu konsep paling inti dan paling powerful di React: Komponen (Components).

Kalau JSX itu cara kita "ngegambar" potongan UI, maka Komponen itu adalah "kepingan LEGO" yang udah jadi, yang bisa kita susun-susun buat ngebentuk keseluruhan tampilan website atau aplikasi kita.

Apa Sih Komponen React Itu?

Bayangin lagi kamu lagi ngebangun sesuatu pake LEGO. Kamu gak mungkin kan ngebangun semuanya dari kepingan 1x1 yang paling kecil terus-terusan? Pasti kamu bakal bikin "sub-rakitan" dulu, misalnya:

• Satu set roda yang udah jadi.
• Satu blok dinding yang udah ada jendelanya.
• Satu bagian atap.

Nah, Komponen React itu mirip kayak "sub-rakitan" LEGO itu. Dia adalah:

• Bagian UI yang independen dan bisa dipake ulang (reusable).
• Tiap komponen punya logika dan tampilannya (JSX) sendiri.
• Komponen bisa sederhana (kayak satu tombol atau satu input field) atau kompleks (kayak satu halaman penuh atau satu bagian website yang rumit, yang sebenernya juga disusun dari komponen-komponen lain yang lebih kecil).

Tujuan Utama Komponen:

• Modularitas: Mecah UI yang gede jadi bagian-bagian kecil yang lebih gampang di-manage, di-debug, dan dipahami.
• Reusabilitas: Komponen yang sama bisa dipake berkali-kali di berbagai tempat di aplikasimu, bahkan di proyek lain. Gak perlu nulis ulang kode yang sama!
• Separation of Concerns (Pemisahan Kepentingan): Tiap komponen fokus ngurusin satu bagian UI aja.

Dua Jenis Utama Komponen (Fokus ke Functional!)

Dulu, ada dua cara utama buat bikin komponen di React: Class Components dan Functional Components. Tapi, sejak dikenalinnya React Hooks (yang bakal kita pelajari nanti), Functional Components jadi cara yang jauh lebih modern, lebih simpel, dan lebih direkomendasikan buat hampir semua kasus.

Jadi, di panduan ini kita bakal fokus penuh ke Functional Components. (Class Components mungkin masih kamu temuin di proyek lama, tapi buat proyek baru, functional udah jadi standar).

Membuat Functional Component Pertamamu

Bikin Functional Component itu sebenernya gampang banget! Dia cuma fungsi JavaScript biasa yang nge-return elemen React (biasanya ditulis pake JSX).

• Aturan Main Functional Component:
  1. Nama fungsinya WAJIB diawali huruf besar (PascalCase). Ini penting biar React bisa bedain antara komponen React (kayak <TombolSaya />) sama tag HTML biasa (kayak <button>).
  2. Fungsi ini harus nge-return SATU elemen React root (bisa JSX, atau null kalau gak mau nampilin apa-apa). Kalau mau nge-return beberapa elemen sejajar, bungkus pake <div> atau React Fragment (<>...</>).

Contoh Functional Component Sederhana:

// File: Salam.jsx (atau bisa juga di App.jsx)
 
// Ini adalah Functional Component bernama Salam
function Salam() {
  // Fungsi ini nge-return JSX
  return <h1>Halo, Selamat Datang di Komponen React Pertamaku!</h1>;
}
 
// Jangan lupa di-export biar bisa dipake di file lain (kalau beda file)
// export default Salam; 

Di contoh ini:

• Salam adalah nama komponen kita (diawali huruf besar).
• Dia nge-return satu elemen <h1> yang isinya teks.

Menggunakan (Merender) Komponen

Setelah kamu bikin komponen, gimana cara nampilinnya di halaman? Kamu tinggal "manggil" komponen itu di dalem JSX lain (misalnya, di komponen App atau komponen parent lainnya) pake sintaks yang mirip tag HTML biasa.

Contoh Penggunaan Komponen Salam di App.jsx:

// File: App.jsx
 
// Impor komponen Salam kalau dia ada di file beda
// import Salam from './Salam'; // (Anggap Salam.jsx ada di folder yang sama)
 
// Komponen Salam (kita definisiin di sini aja biar simpel buat contoh)
function Salam() {
  return <h1>Halo, Selamat Datang di Komponen React Pertamaku!</h1>;
}
 
// Komponen TombolSederhana
function TombolSederhana() {
  return <button>Klik Aku!</button>;
}
 
// Komponen App (komponen utama kita)
function App() {
  return (
    <div> {/* Satu elemen root */}
      <Salam /> {/* Manggil/render komponen Salam */}
      <p>Ini paragraf di bawah komponen Salam.</p>
      <TombolSederhana /> {/* Manggil/render komponen TombolSederhana */}
      <TombolSederhana /> {/* Bisa dipake berkali-kali! */}
    </div>
  );
}
 
export default App;

Kalau kamu jalanin ini (dengan asumsi App dirender ke DOM di main.jsx), kamu bakal liat:

1. Teks dari komponen Salam.
2. Paragraf.
3. Dua buah tombol dari komponen TombolSederhana.

Keren kan? Kamu bisa "nyusun" UI-mu dari komponen-komponen kayak gini!

Komponen Bisa "Nesting" (Komponen di Dalem Komponen)

Sama kayak elemen HTML, komponen React juga bisa di-"nesting". Artinya, satu komponen bisa ngerender komponen lain di dalemnya. Ini yang bikin kita bisa ngebangun UI yang kompleks dari potongan-potongan kecil.

Contoh di atas (App ngerender Salam dan TombolSederhana) itu udah nunjukin nesting komponen.

// File: KartuProfil.jsx
function FotoProfil() {
  return <img src="https://via.placeholder.com/100" alt="foto" style={{ borderRadius: '50%' }} />;
}
 
function InfoPengguna() {
  return (
    <div>
      <h2>Budi Doremi</h2>
      <p>Web Developer</p>
    </div>
  );
}
 
// Komponen KartuProfil ngerender FotoProfil dan InfoPengguna
function KartuProfil() {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', width: '200px' }}>
      <FotoProfil />
      <InfoPengguna />
    </div>
  );
}
 
export default KartuProfil;
 
// Nanti di App.jsx atau komponen lain:
// import KartuProfil from './KartuProfil';
// ...
// return <KartuProfil />;

Di sini, KartuProfil itu "tersusun" dari komponen FotoProfil dan InfoPengguna.

Properti Komponen (props) - Ngasih "Bekal" ke Komponen

Seringkali, kita pengen komponen kita itu bisa nampilin data yang beda-beda, atau perilakunya bisa diubah dari luar. Misalnya, komponen Salam tadi, gimana kalau kita mau dia bisa nyapa nama yang beda-beda?

Di sinilah Props (Properties) masuk. Props itu cara kita ngirim data dari komponen parent (yang manggil) ke komponen child (yang dipanggil). Props ini mirip kayak atribut di tag HTML.

Kita bakal bahas Props lebih detail di materi berikutnya ya! Untuk sekarang, yang penting kamu ngerti dulu kalau komponen itu bisa dikasih "bekal" dari luar.

Komponen adalah konsep PONDASI di React. Dengan mecah UI jadi komponen-komponen kecil yang reusable dan independen, kodemu jadi lebih:

• Terbaca: Tiap komponen punya tanggung jawab jelas.
• Terstruktur: Gampang di-manage dan dinavigasi.
• Reusable: Gak perlu nulis ulang kode yang sama.
• Gampang Dites: Kamu bisa ngetes tiap komponen secara terpisah.

Mulai sekarang, pas kamu liat desain UI website, coba deh bayangin gimana kamu bisa mecahnya jadi komponen-komponen React. Ini bakal ngebantu banget cara berpikirmu sebagai React developer!