React + Vite + TypeScript: Kenapa dan Bagaimana Memulainya

Mengapa Memilih Vite untuk React?

Selama beberapa tahun terakhir, banyak developer yang beralih dari Create React App (CRA) ke Vite. Alasannya sederhana:

• Cepat 🚀 – Vite menggunakan ESBuild di belakang layar, membuat waktu startup dan hot reload jauh lebih singkat.
• Ringan – Tanpa konfigurasi yang terlalu kompleks, kamu bisa langsung mulai coding.
• Modular – Cocok untuk project kecil maupun skala besar.

Kalau dulu CRA jadi standar, sekarang banyak yang merekomendasikan Vite sebagai "default choice" untuk project React baru.

Kelebihan TypeScript di React

Menggunakan TypeScript (TS) bersama React memberikan banyak keuntungan:

1. Type Safety – mengurangi bug dengan memastikan tipe data konsisten.
2. Auto-completion – editor seperti VSCode jadi lebih pintar dalam memberi saran kode.
3. Refactor lebih mudah – perubahan struktur data lebih aman karena compiler memberi peringatan.
4. Kode lebih terstruktur – cocok untuk project jangka panjang.

Setup Project React + Vite + TS

Cara paling cepat memulai:

# Buat project baru dengan template React + TS
npm create vite@latest my-app -- --template react-ts

cd my-app
npm install
npm run dev

Buka browser ke http://localhost:5173 dan project sudah jalan 🎉

Struktur Project

Setelah setup, kira-kira foldernya seperti ini:

my-app/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── components/
│   └── styles/
├── index.html
├── tsconfig.json
└── vite.config.ts

• App.tsx: komponen utama React
• main.tsx: entry point aplikasi
• vite.config.ts: konfigurasi Vite
• tsconfig.json: konfigurasi TypeScript

Contoh Komponen dengan TypeScript

Misalnya kita mau bikin komponen Button:

type ButtonProps = {
  label: string;
  onClick: () => void;
};

export function Button({ label, onClick }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
    >
      {label}
    </button>
  );
}

Dengan TypeScript, kalau kamu lupa mengirim onClick, maka compiler langsung kasih peringatan.

Integrasi dengan Tailwind & Shadcn

Untuk styling, banyak developer menggabungkan Tailwind CSS dengan Shadcn UI agar cepat bikin tampilan modern.

• Tailwind → utilitas styling fleksibel
• Shadcn → kumpulan koremponen siap pakai

Instalasi bisa dilakukan langsung dengan command dari dokumentasi resmi, lalu digunakan di App.tsx.

Kesimpulan

Menggunakan React + Vite + TypeScript memberikan pengalaman development yang:

• Cepat
• Aman
• Skalabel

Kalau kamu ingin membangun project modern, ini kombinasi yang sangat direkomendasikan.