Proyek React Pertama (Vite) | Dasar ReactJS untuk Pemula | Mahir.dev | Mahir.dev Academy

Proyek React Pertama (Vite) | Dasar ReactJS untuk Pemula | Mahir.dev | Mahir.dev Academy

Buka Terminalmu: Buka terminal atau command prompt di komputermu. (Review Dasar Command Line kalau lupa caranya).
Pilih Lokasi Folder Proyek: Pake perintah cd buat navigasi ke direktori tempat kamu mau nyimpen semua proyek React-mu. Misalnya, kalau mau disimpen di folder ProyekReact di Desktop:
bash
```
cd ~/Desktop  # Atau path Desktop-mu
mkdir ProyekReact # Bikin folder ProyekReact kalau belum ada
cd ProyekReact
```
Jalankan Perintah create-vite: Ini perintah ajaib buat bikin proyek Vite baru. Kita bakal pake npm (yang udah keinstal bareng Node.js).
bash
```
npm create vite@latest
```
- npm create vite@latest: Perintah ini nyuruh npm buat nge-download dan ngejalanin package create-vite versi terbaru.
bash
```
Need to install the following packages:
create-vite@6.5.0
Ok to proceed? (y) 
```
- y: Ketik y dan tekan Enter untuk mengonfirmasi. Vite bakal nge-download semua package yang dibutuhkan dan nge-setup proyek React-mu.
Isi Beberapa Pertanyaan dari Vite: Setelah kamu jalanin perintah di atas, Vite bakal nanya beberapa hal:
- Project name:: Ketik nama proyek React-mu. Gak boleh ada spasi, biasanya pake huruf kecil semua dan tanda hubung (-). Misalnya, kita kasih nama react-pertamaku. Tekan Enter.
  bash
```
✔ Project name: … react-pertamaku
```
```
- Select a framework:: Vite bakal ngasih pilihan framework. Pake tombol panah atas/bawah buat milih React, terus tekan Enter.
  bash
```
✔ Select a framework: ›
```
Masuk ke Folder Proyek dan Instal Dependensi: Ikutin instruksi dari Vite:
- Pindah ke folder proyek yang baru aja dibikin:
  bash
```
cd react-pertamaku
```
- Instal semua package (dependensi) yang dibutuhin sama proyek React-mu:
  bash
```
npm install
```
  Perintah ini bakal ngebaca file package.json yang udah dibikinin Vite, terus nge-download semua library yang diperluin (kayak react, react-dom, dan Vite sendiri sebagai dev dependency) ke dalem folder node_modules/ di proyekmu. Proses ini mungkin butuh beberapa saat tergantung koneksi internetmu.
Jalankan Development Server: Setelah npm install selesai, saatnya ngejalanin "mesin" proyek React-mu!
bash
```
npm run dev
```
Perintah ini bakal ngejalanin development server Vite. Terminalmu bakal nampilin sesuatu kayak gini:
bash
```
  VITE v6.x.x  ready in xxx ms
 
  ➜  Local:   http://localhost:5173/ 
  ➜  Network:
```
Buka Proyek di Browser: Buka browser web-mu, terus ketik alamat Local URL yang dikasih Vite (misalnya, http://localhost:5173/). Taraaa! Kamu bakal liat halaman "Hello World" versi React dari Vite, biasanya ada logo React yang muter-muter dan link ke dokumentasi.

Edit src/App.jsx and save to test HMR

Selamat! Kamu baru aja berhasil bikin dan ngejalanin aplikasi React pertamamu! 🎉
Menghentikan Development Server: Kalau kamu mau nge-stop development server-nya, balik lagi ke terminal tempat kamu ngejalanin npm run dev, terus tekan Ctrl + C.

bash

react-pertamaku/
├── README.md           # File dokumentasi proyek
├── node_modules/       # Folder tempat semua package/library diinstal (gede banget, biasanya di-.gitignore)
├── public/             # Folder buat aset statis (gambar, favicon, dll. yang gak diproses Vite)
│   └── vite.svg
├── src/                # INI FOLDER UTAMA TEMPAT KITA NGODING!
│   ├── assets/         # Aset yang diimpor ke komponen (misal, logo React)
│   │   └── react.svg
│   ├── App.css         # CSS buat komponen App
│   ├── App.jsx         # Komponen utama aplikasi kita (root component)
│   ├── index.css       # CSS global
│   └── main.jsx        # File JavaScript "pintu masuk" aplikasi React kita
├──  eslint.config.js   # Konfigurasi ESLint (buat ngecek kualitas kode)
├── .gitignore          # File buat ngasih tau Git mana yang harus diabaikan
├── index.html          # File HTML "kerangka" utama (beda sama HTML biasa, isinya simpel)
├── package-lock.json   # Nyatet versi persis package yang diinstal
├── package.json        # Metadata proyek, skrip, dan daftar dependensi
└── vite.config.js      # File konfigurasi Vite (kalau perlu kustomisasi)

public/: File di sini bakal langsung disalin ke folder output pas build, tanpa diproses Vite. Cocok buat favicon.ico atau gambar yang gak perlu diimpor ke JS.
src/: Ini "jantung" aplikasimu. Semua kode komponen React, CSS modul, aset yang diimpor, bakal ada di sini.
- main.jsx: File ini yang "nempel"-in komponen React utamamu (App) ke elemen HTML di index.html.
- App.jsx: Ini komponen React pertamamu! Coba buka dan liat isinya.

index.html: Ini file HTML utama yang diliat browser. Tapi, isinya biasanya cuma satu <div> dengan id="root". React yang bakal "nyuntikkin" semua UI-nya ke dalem div itu.

html

    <!-- Isi index.html biasanya simpel gini: -->
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite + React</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/src/main.jsx"></script>
    </body>
    </html>

package.json: mencatat semua "bahan baku" (dependencies) dan "resep" (scripts) proyekmu.

Select a variant:: Pilih varian React-nya. Biasanya ada pilihan kayak JavaScript dan TypeScript. Buat belajar awal, pilih JavaScript (atau JavaScript + SWC jika ada, SWC itu compiler yang lebih cepat). Tekan Enter.

bash

✔ Select a variant: › JavaScript
```