🚀 React Project Setup Guide

Panduan ini menjelaskan cara membuat project React menggunakan metode Vite (modern & cepat).

---

🔧 Persiapan

Pastikan kamu sudah menginstal:

• Node.js versi terbaru
• npm (biasanya otomatis terinstal bersama Node.js)

Cek versi dengan:

node -v
npm -v

✅ Cara 1: Membuat Project React dengan Vite (Rekomendasi)

1. Buat project baru

npm create vite@latest nama-project

📌 Alternatif jika perintah di atas tidak tersedia:

npm install -g create-vite
create-vite nama-project

Atau:

npm init vite@latest nama-project

📌 Catatan:

• Project name: isi dengan nama-project
• Select a framework: pilih React
• Select a variant: pilih JavaScript (atau TypeScript jika kamu ingin)

2. Masuk ke folder project

cd nama-project

3. Install dependencies

npm install

4. Jalankan Project

npm run dev

Akses di browser: http://localhost:5173

📁 Struktur Folder (Vite)

nama-project/
├── public/
├── src/
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

📦 Menambahkan Library Tambahan

Install library tambahan sesuai kebutuhan. Contoh:

npm install react-router-dom
npm install axios

🛠️ Konfigurasi Proxy (Opsional)

Jika kamu memakai backend lokal (misal port 3000), tambahkan di vite.config.js:

export default defineConfig({
  server: {
    proxy: {
      "/api": "http://localhost:3000",
    },
  },
});

📤 Build untuk Production

Untuk membuat versi produksi dari aplikasi:

npm run build

Hasil build ada di folder /dist.

🧠 Tips Pengembangan

• Gunakan VS Code sebagai editor utama
• Tambahkan React DevTools di browser untuk debugging lebih mudah
• Inisialisasi Git dan tambahkan .gitignore:

git init

Contoh isi .gitignore:

node_modules
dist
.env

🧪 (Opsional) Prettier & Eslint

Untuk merapikan kode, tambahkan:

npm install --save-dev prettier eslint

Contoh script di package.json:

"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"format": "prettier --write ."
}

🧯 Troubleshooting

❗ Port already in use

Jika port default 5173 sudah dipakai, ubah di vite.config.js:

server: {
  port: 3001,
}

🔗 Dokumentasi Resmi

• React Documentation
• Vite Documentation
• React Router
• Axios
• Prettier
• ESLint

🎉 Penutup

🚀 Sekarang kamu siap membangun aplikasi React dengan kecepatan tinggi menggunakan Vite! Selamat berkarya dan ngoding! 😎