Cara Mudah Instal React dengan Vite

Kalau kamu lagi mau bikin project React yang baru, Vite bisa jadi pilihan keren buat memulainya. Selain cepat, Vite juga punya setup yang lebih ringan dibandingkan dengan tool lain seperti Create React App. Di sini, kita bakal bahas langkah-langkah cara install React pakai Vite. Simpel dan gampang, kok!

1. Pastikan Node.js Udah Terinstal

Sebelum mulai, pastikan dulu di komputer kamu sudah terinstal Node.js. Kalau belum, kamu bisa download dan install dari situs resmi Node.js. Pilih versi LTS biar lebih stabil.

2. Buat Project Baru

Setelah Node.js terinstall, buka terminal atau command prompt di komputer kamu. Lalu, masuk ke folder di mana kamu mau bikin project React. Di sini, kita akan pakai perintah dari Vite buat bikin project baru.

npm create vite@latest my-react-app

Nah, my-react-app itu nama project kamu. Kamu bisa ganti dengan nama yang lain kalau mau.

3. Pilih Template React

Setelah kamu jalankan perintah di atas, Vite bakal nanya template apa yang mau dipakai. Karena kita mau bikin project React, pilih saja template react dengan cara mengetik react dan tekan Enter.

Setelah itu, Vite bakal nanya lagi apakah kamu mau pakai TypeScript. Kalau mau pakai, pilih react-ts, tapi kalau cuma mau pakai JavaScript, cukup pilih react lagi.

4. Install Dependencies

Setelah template dipilih, masuk ke folder project yang baru dibuat.

cd my-react-app

Sekarang, kita perlu menginstall dependencies-nya. Kamu bisa pakai perintah berikut:

npm install

Kalau kamu lebih suka pakai Yarn, kamu bisa ketik:

yarn

5. Jalankan Project

Setelah semua dependencies selesai diinstall, saatnya menjalankan project kamu. Masih di dalam folder project, ketik perintah berikut:

npm run dev

Atau kalau kamu pakai Yarn:

yarn dev

Ini akan menjalankan server pengembangan dan secara otomatis membuka browser ke alamat http://localhost:5173/ (atau port lain yang dikasih tau di terminal). Di situ, kamu bisa lihat halaman React yang pertama kali kamu buat.

6. Mulai Koding!

Sekarang, project React kamu sudah siap dan bisa langsung kamu koding. Setiap kali kamu melakukan perubahan di kode, Vite bakal otomatis nge-refresh browser kamu biar kamu bisa langsung lihat hasilnya.

Gampang banget, kan? Dengan Vite, kamu bisa langsung mulai bikin project React dengan cepat dan mudah. Happy coding!