Bagi-Bagi Tugas: Reusable Component di ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu Reusable Component?

Dalam React, kita bisa membuat komponen yang dapat digunakan kembali di berbagai bagian aplikasi. Komponen ini disebut Reusable Component karena memungkinkan kita menulis kode sekali dan menggunakannya berulang kali tanpa perlu menduplikasi logika yang sama.

Bayangkan kalau setiap kali butuh tombol, kita harus menulis ulang kode HTML dan CSS-nya—cape deh! Dengan Reusable Component, kita cukup membuatnya sekali dan menggunakannya kapan pun dibutuhkan.

2. Membuat Reusable Component

Misalkan kita ingin membuat tombol yang bisa digunakan di berbagai tempat. Berikut adalah cara membuat Reusable Button Component.

Contoh Reusable Component

const Button = ({ text, onClick }) => {
  return <button onClick={onClick}>{text}</button>;
};

Cara menggunakannya:

<Button text="Klik Aku!" onClick={() => alert("Halo!")} />

3. Reusable Component dengan Props

Props memungkinkan kita mengirim data ke dalam komponen sehingga komponen bisa fleksibel dan digunakan dalam berbagai kasus.

Contoh komponen kartu sederhana:

const Card = ({ title, description }) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
};

Cara menggunakannya:

<Card title="Judul Keren" description="Ini adalah deskripsi kartu." />

4. Styling dalam Reusable Component

Kita bisa memberikan gaya menggunakan CSS biasa, Styled Components, atau inline styling di JSX.

Menggunakan CSS Module

import styles from "./Button.module.css";

const Button = ({ text, onClick }) => {
  return <button className={styles.button} onClick={onClick}>{text}</button>;
};

5. Manfaat Menggunakan Reusable Component

•  Mengurangi kode duplikat – Tidak perlu menulis kode yang sama berulang kali. 
• Lebih mudah dikelola – Jika ingin mengubah tampilan tombol, cukup edit satu file. 
•  Meningkatkan efisiensi – Kode lebih bersih dan mudah dipahami.

6. Kesimpulan

Reusable Component adalah konsep penting dalam React yang memungkinkan kita membuat UI yang modular dan efisien. Dengan menggunakan props dan styling yang fleksibel, kita bisa membangun komponen yang dapat digunakan di banyak tempat tanpa perlu menulis ulang kode.