• Apa Itu Components?
• Membuat Functional Component
• Component Bisa Dipakai Ulang
• Component Harus Diawali Huruf Besar
• Component Bisa Disimpan di File Terpisah
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah membahas tentang JSX, yaitu sintaks khusus di React yang memungkinkan kita menulis HTML di dalam JavaScript.

Pada artikel kali ini, kita akan membahas Components. Konsep ini sangat penting karena hampir seluruh aplikasi React dibangun dengan komponen.

Dengan memahami components, kita akan lebih mudah menyusun aplikasi menjadi potongan-potongan kecil yang bisa digunakan kembali (reusable).

Apa Itu Components?

Component adalah bagian kecil dari UI yang bisa kita buat, gunakan kembali, dan gabungkan untuk membentuk aplikasi yang lebih besar.

Jika diibaratkan, sebuah website adalah rumah, maka component adalah bagian-bagian penyusunnya seperti pintu, jendela, atau meja. Semua bagian itu bisa dipakai ulang di ruangan lain.

React mendukung dua jenis komponen:

• Functional Component (paling umum digunakan di React modern).
• Class Component (lebih lama, jarang digunakan di React terbaru).

Dalam seri ini kita akan fokus pada Functional Component.

Membuat Functional Component

Silakan buka file src/App.jsx dan ubah menjadi seperti berikut:

function Welcome() {
  return <h1>Halo, ini adalah component Welcome!</h1>;
}

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

export default App;

Pada contoh di atas:

• Kita membuat component bernama Welcome.
• Component Welcome digunakan di dalam component App dengan cara <Welcome />.

Component Bisa Dipakai Ulang

Kelebihan utama dari component adalah bisa dipakai berkali-kali.

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

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

export default App;

Jika dijalankan, maka teks Selamat Datang di React! akan tampil tiga kali.

Component Harus Diawali Huruf Besar

Di React, nama component harus diawali huruf besar.

• Jika huruf kecil → dianggap elemen HTML biasa.
• Jika huruf besar → dianggap sebagai component.

// ❌ Salah
function welcome() {
  return <h1>Hello</h1>;
}

// ✅ Benar
function Welcome() {
  return <h1>Hello</h1>;
}

Component Bisa Disimpan di File Terpisah

Supaya kode lebih rapi, biasanya setiap component disimpan di file terpisah.

Contoh: buat file baru src/components/Header.jsx

function Header() {
  return <h1>Ini adalah Header</h1>;
}

export default Header;

Lalu gunakan di src/App.jsx:

import Header from "./components/Header";

function App() {
  return (
    <div>
      <Header />
      <p>Halo, ini halaman utama React.</p>
    </div>
  );
}

export default App;

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Components, pondasi utama dalam membangun aplikasi React.

Kita sudah mencoba membuat functional component, menggunakan kembali component berkali-kali, memahami aturan penamaan, hingga menyimpan component di file terpisah agar lebih rapi.

Di artikel berikutnya, kita akan membahas tentang Props, yaitu cara mengirim data ke dalam component.

Terima kasih