Alfaruq Asri, S.Pd.
Alfaruq Asri, S.Pd.

Selama beberapa tahun terakhir, banyak developer yang beralih dari Create React App (CRA) ke Vite. Alasannya sederhana:
Kalau dulu CRA jadi standar, sekarang banyak yang merekomendasikan Vite sebagai "default choice" untuk project React baru.
Menggunakan TypeScript (TS) bersama React memberikan banyak keuntungan:
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 ๐
Setelah setup, kira-kira foldernya seperti ini:
my-app/
โโโ src/
โ โโโ App.tsx
โ โโโ main.tsx
โ โโโ components/
โ โโโ styles/
โโโ index.html
โโโ tsconfig.json
โโโ vite.config.tsApp.tsx: komponen utama Reactmain.tsx: entry point aplikasivite.config.ts: konfigurasi Vitetsconfig.json: konfigurasi TypeScriptMisalnya 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.
Untuk styling, banyak developer menggabungkan Tailwind CSS dengan Shadcn UI agar cepat bikin tampilan modern.
Instalasi bisa dilakukan langsung dengan command dari dokumentasi resmi, lalu digunakan di App.tsx.
Menggunakan React + Vite + TypeScript memberikan pengalaman development yang:
Kalau kamu ingin membangun project modern, ini kombinasi yang sangat direkomendasikan.