React Setup
Persiapan
Sebelum memulai, pastikan Anda telah menginstal Node.js. Vite membutuhkan Node.js versi 12.2.0 atau lebih baru.
- Instal Node.js:
- Kunjungi situs web Node.js dan unduh versi LTS.
- Jalankan installer yang diunduh dan ikuti langkah-langkahnya untuk menginstal.
- Untuk memeriksa instalasi, buka Command Prompt atau PowerShell dan jalankan perintah berikut:
node -v npm -v
- Pastikan kedua perintah menampilkan versi, yang menandakan bahwa Node.js dan npm (Node Package Manager) telah berhasil diinstal.
Membuat Proyek React dengan Vite
- Buka Command Prompt atau PowerShell sebagai Administrator.
- Buat Folder Proyek:
- Gunakan perintah
cd
untuk berpindah ke direktori di mana Anda ingin membuat proyek. - Buat direktori baru dengan perintah:
mkdir nama-proyek
- Berpindah ke direktori proyek:
cd nama-proyek
- Gunakan perintah
- Inisialisasi Proyek React dengan Vite:
- Jalankan perintah berikut untuk membuat proyek React baru:
npm create vite@latest
- Ikuti petunjuk di layar, pilih template
react
ataureact-ts
(untuk TypeScript) ketika diminta. - Setelah selesai, berpindah ke direktori proyek yang telah dibuat:
cd nama-proyek-yang-dibuat
- Jalankan perintah berikut untuk membuat proyek React baru:
- Instal Dependensi:
- Jalankan perintah berikut untuk menginstal dependensi yang diperlukan:
npm install
- Jalankan perintah berikut untuk menginstal dependensi yang diperlukan:
- Jalankan Server Pengembangan:
- Untuk memulai server pengembangan dan melihat aplikasi React Anda, jalankan:
npm run dev
- Buka browser dan akses
http://localhost:3000
untuk melihat aplikasi Anda.
- Untuk memulai server pengembangan dan melihat aplikasi React Anda, jalankan:
Konfigurasi Lanjutan
- Mengatur Linting dan Formatting:
- Untuk meningkatkan kualitas kode, Anda bisa menambahkan ESLint dan Prettier:
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev
- Buat file konfigurasi
.eslintrc
dan.prettierrc
di root proyek Anda dan konfigurasikan sesuai kebutuhan.
- Untuk meningkatkan kualitas kode, Anda bisa menambahkan ESLint dan Prettier:
- Git:
- Inisialisasi Git (jika belum) dengan
git init
dan buat file.gitignore
untuk mengabaikan direktorinode_modules
dan file lain yang tidak perlu di-commit.
- Inisialisasi Git (jika belum) dengan