Introduction

Hai! Selamat datang di My Komponent Library. Ini adalah pustaka komponen UI yang dirancang untuk memudahkan kamu membangun antarmuka pengguna yang menarik dan responsif. Komponen di dalam pustaka ini dibuat dengan prinsip desain modern dan mengikuti praktik terbaik dalam pengembangan frontend.

Menurut React.dev, komponen adalah blok UI yang dapat digunakan kembali dan ditulis sebagai fungsi atau kelas. Komponen dapat menerima input melalui props dan mengembalikan elemen React yang menjelaskan tampilan antarmuka.

"Komponen React adalah fungsi JavaScript yang dapat Anda tambahkan markup di dalamnya. Namanya selalu dimulai dengan huruf kapital dan mengembalikan markup JSX."

Saat ini tersedia banyak pustaka UI populer seperti Chakra UI, Mantine, Ant Design, dan lainnya. Mereka menyediakan berbagai komponen siap pakai sehingga kamu bisa langsung menggunakannya sesuai kebutuhan.
Tapi, jika kamu membuat komponen sendiri, ada banyak keuntungan tambahan yang bisa didapatkan, lho!

Perbandingan: Buat Komponen Sendiri vs Pakai Library

Aspek	Buat Sendiri	Pakai Library
🎨 Kontrol Desain	100% kamu yang atur	Tergantung fitur & tema bawaan
⚙️ Performa	Ringan (jika dirancang baik)	Bisa berat karena banyak fitur bawaan
🔄 Fleksibilitas	Sangat fleksibel	Kadang terbatas pada API mereka
🧱 Konsistensi UI	Harus kamu jaga sendiri	Sudah built-in dan konsisten
🕒 Waktu Pengembangan	Lebih lama	Lebih cepat karena komponen siap pakai
🧪 Testing	Harus kamu uji sendiri	Sudah stabil dan battle-tested
🎯 Learning Curve	Tidak perlu belajar API baru	Harus mempelajari struktur & props library

Tapi jangan salah, membuat komponen sendiri juga memberikan banyak manfaat, lho! Seperti yang akan kita lihat berikut ini:

Manfaat Membuat Komponen Sendiri (Untuk Developer)

No	Manfaat	Penjelasan Singkat
1	🧠 Memahami UI Lebih Dalam	Belajar membangun UI dari nol, termasuk struktur, perilaku, dan aksesibilitas.
2	🛠️ Meningkatkan Skill Frontend	Melatih pola pikir 'thinking in components' yang penting untuk technical test.
3	💼 Portfolio Kuat dan Unik	Menjadi nilai tambah saat melamar kerja dan bisa dipakai ulang di proyek lain.
4	🧩 Fleksibilitas Tanpa Batas	Tidak terikat oleh batasan library atau desain yang sudah jadi.
5	🧪 Belajar Testing	Komponen kecil cocok untuk latihan unit testing maupun integration testing.
6	🧠 Mandiri dan Adaptif	Meningkatkan pemahaman dasar sehingga tidak bergantung pada framework.

Sekarang, mari kita mulai dari awal untuk membangun komponen kita sendiri. Aku juga akan membagikan beberapa contoh penggunaannya agar kamu bisa langsung mencoba dan memahami konsepnya dengan mudah.

1. `Tailwind CSS`

Sebelum membuat komponen UI yang bisa dipakai ulang, kita mulai dulu dari Tailwind CSS. Tailwind adalah utility-first CSS framework yang memungkinkan kita membangun desain antarmuka langsung di dalam elemen HTML atau JSX dengan class-class seperti px-4, text-center, bg-blue-500, dan sebagainya.

Tailwind membuat kita bisa mendesain UI dengan cepat tanpa harus menulis CSS secara manual. Tapi, ketika komponen makin kompleks, kita akan sering menulis class secara dinamis. Nah, di sinilah clsx dan tailwind-merge sangat berguna — dan akan dibahas di poin berikutnya. silahkan install tailwind terlebih dulu dengan mengunjungi website nya Tailwind Css

2. `clsx` dan `tailwind-merge`

Mengapa kita membutuhkan clsx dan tailwind-merge? Karena saat membangun komponen UI yang fleksibel, sering kali kita perlu mengatur class Tailwind secara dinamis berdasarkan kondisi tertentu.
clsx membantu kita menggabungkan class secara kondisional dengan cara yang rapi dan efisien. Sementara itu, tailwind-merge berguna untuk menyatukan class Tailwind yang mungkin saling bertentangan (seperti p-2 dan p-4), sehingga hanya class terakhir yang relevan yang akan digunakan.

Code:

DummyComponent.jsx

npm install clsx tailwind-merge

Jika sudah, Sekarang kita buka VScode nya

Buat fungsi ini. tujuan nya adalah Menyederhanakan dan menstandarkan cara menggabungkan className di seluruh komponen React, supaya lebih bersih, fleksibel, dan bebas bug konflik class Tailwind.

lib/utils.ts

utils.ts

export function Twc(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
}

Button.jsx

import { Twc } from "@/lib/utils";
import React, { forwardRef } from "react";
            
const baseStyles = "inline-flex items-center justify-center font-medium rounded transition-colors  disabled:opacity-50 disabled:pointer-events-none"; 

const variantClasses = {
  filed: "bg-[#0079f8] text-white hover:bg-blue-600 ",
  default: "bg-white text-gray-900 rounded-md border border-gray-300 hover:border-gray-50",
  outline:  "border bg-transparent border-gray-600 border-2 text-gray-900 rounded-md",
};

const sizeClasses = {
  sm: "px-3 py-1 text-sm",
  md: "px-4 py-2 text-base",
  lg: "px-5 py-3 text-lg",
};
            
export type ButtonProps = React.ComponentPropsWithRef<"button"> & {
  as?: React.ElementType;
  variant?: keyof typeof variantClasses;
  size?: keyof typeof sizeClasses;
  className?: string;
  children?: React.ReactNode;
};

  export const Button: React.FC<ButtonProps> = forwardRef(
    (
      {
        as: Component = "button",
        variant = "default",
        size = "md",
        className,
        children,
        ...props
      },
      ref
    ) => {
      return (
        <Component
          ref={ref}
          className={Twc(
            baseStyles,
            variantClasses[variant],
            sizeClasses[size],
            className
          )}
          {...props}
        >
          {children}
        </Component>
      );
    }
  );
  
  Button.displayName = "Button";
  

Button.jsx

const CobaButton = () => {
    return <Button variant="default"> Default </Button>;
  };

Button

Introduction

Perbandingan: Buat Komponen Sendiri vs Pakai Library

Manfaat Membuat Komponen Sendiri (Untuk Developer)

1. Tailwind CSS

2. clsx dan tailwind-merge

1. `Tailwind CSS`

2. `clsx` dan `tailwind-merge`