Membuat Reusable Component - Perwira Learning Center

  

Membuat Reusable Component

 

1. Latar Belakang 

    Salah satu keunggulan utama React JS adalah kemampuannya memecah antarmuka pengguna (UI) menjadi komponen-komponen kecil yang mandiri. Daripada menulis kode panjang yang berulang-ulang di setiap halaman (seperti kode untuk header, footer, atau tombol), kita bisa membuat satu Reusable Component (komponen yang dapat digunakan kembali).

    Prinsip ini dikenal dengan istilah DRY (Don't Repeat Yourself). Komponen navigasi utama atau Navbar adalah kandidat yang paling tepat untuk diubah menjadi reusable component. Dengan membuat Navbar yang dinamis, Anda bisa menggunakan struktur kode yang sama persis, tetapi menampilkan menu yang berbeda-beda tergantung dari properti (props) yang diberikan kepadanya.

 

2. Alat dan Bahan

a. Perangkat Lunak

    - Terminal / Command Prompt

    - Text Editor (VS Code)

    - Web Browser (Firefox) 

    - Node js (untuk runtime JS) 

b. Perangkat Keras

     - Laptop / Komputer.   

3. Pembahasan 

3.1 Apa Itu Reusable Component?

    Reusable component adalah komponen yang dirancang cukup fleksibel untuk dipakai di banyak tempat, dengan tampilan atau perilaku yang bisa disesuaikan lewat props tanpa harus menulis ulang logika yang sama dari nol.

Intinya sederhana: tulis sekali, pakai berkali-kali.

3.2 Kenapa Ini Penting?

Berikut beberapa alasan mengapa reusable component penting saat membangun website:  

1. Konsistensi tampilan 

2, Hemat waktu, kamu tidak perlu menulis ulang struktur HTML dan logika yang sama berulang kali.

3. Mudah diperbaiki. Ketika ada bug,  cukup perbaiki di satu tempat.

4. Kode lebih bersih.

3.3 Contoh Reusable Component

1. Komponen Button

Ini adalah contoh paling klasik. Daripada membuat tombol baru setiap saat, kita buat satu komponen Button yang bisa berubah warna, ukuran, dan teks-nya.

src/components/Button.jsx

function Button({ label, variant = "primary", size = "md", onClick }) {
  const baseStyle = "rounded font-semibold transition-all duration-200";

  const variants = {
    primary: "bg-blue-500 text-white hover:bg-blue-600",
    danger:  "bg-red-500 text-white hover:bg-red-600",
    ghost:   "bg-transparent border border-gray-400 hover:bg-gray-100",
  };

  const sizes = {
    sm: "px-3 py-1 text-sm",
    md: "px-5 py-2 text-base",
    lg: "px-7 py-3 text-lg",
  };

  return (
    <button
      className={`${baseStyle} ${variants[variant]} ${sizes[size]}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

export default Button;

Cara pakainya di halaman lain:

<Button label="Mulai Sekarang" variant="primary" size="lg" />
<Button label="Hapus Akun" variant="danger" size="sm" />
<Button label="Batal" variant="ghost" />

2. Komponen Card

Card adalah wadah konten yang hampir selalu muncul berulang di halaman produk, artikel, profil pengguna, dan sebagainya.

src/components/Card.jsx

function Card({ title, description, imageUrl, footer }) {
  return (
    <div className="rounded-xl shadow-md overflow-hidden bg-white">
      {imageUrl && (
        <img src={imageUrl} alt={title} className="w-full h-48 object-cover" />
      )}
      <div className="p-4">
        <h2 className="text-lg font-bold">{title}</h2>
        <p className="text-gray-500 mt-1 text-sm">{description}</p>
      </div>
      {footer && (
        <div className="px-4 py-3 border-t border-gray-100">{footer}</div>
      )}
    </div>
  );
} 

export default Card;

Perhatikan dua hal di sini. Pertama, imageUrl dan footer bersifat opsional — kalau tidak diberikan, bagian itu tidak akan dirender sama sekali. Ini membuat komponen jauh lebih fleksibel. Cara pakainya:

<Card
  title="Belajar React"
  description="Panduan lengkap untuk pemula."
  imageUrl="/images/react.png"
  footer={<Button label="Baca Selengkapnya" variant="primary" size="sm" />}
/>

3.4 Kesimpulan

    Konsep reusable component merupakan fondasi penting dalam React JS yang mengandalkan prinsip DRY (Don't Repeat Yourself) untuk memecah antarmuka pengguna menjadi potongan kode kecil yang mandiri, dinamis, dan fleksibel. Pendekatan "tulis sekali, pakai berkali-kali" ini tidak hanya mempercepat proses pengembangan dan menjaga konsistensi visual aplikasi, tetapi juga sangat meningkatkan kemudahan pemeliharaan (maintainability) karena basis kode menjadi lebih bersih dan perbaikan bug cukup difokuskan pada satu titik komponen saja, menjadikannya standar wajib untuk membangun aplikasi web yang efisien dan berskala profesional.

4. Daftar Pustaka

Petani Kode. (2020). Belajar ReactJS: Membuat dan menggunakan komponen pada React. https://www.petanikode.com/reactjs-komponen/

SantriKoding. (2021). Belajar React Dasar: Mengenal component di React JS. https://santrikoding.com/belajar-react-dasar-mengenal-component

Malas Ngoding. (2021). Pengertian dan cara membuat component di ReactJS. https://www.malasngoding.com/pengertian-dan-cara-membuat-component-di-reactjs/

Duniailkom. (2022). Tutorial ReactJS: Cara membuat dan menggunakan component React. https://www.duniailkom.com/tutorial-reactjs-cara-membuat-dan-menggunakan-component-react/