Bikin Proyek React Pertamamu: "Hello World" Versi Modern Pake Vite!

Udah siap semua bekalnya? JavaScript dasar udah lumayan, Node.js dan npm juga udah nangkring di komputermu. Sekarang, saatnya kita bikin proyek React pertama kita! Rasanya pasti bakal beda banget sama bikin halaman HTML biasa.

Dulu, setup proyek React itu kadang agak ribet. Tapi sekarang, ada alat bantu keren namanya Vite (dibacanya /viːt/, kayak "veet", artinya "cepat" dalam bahasa Prancis) yang bikin proses ini jadi super gampang dan super cepat!

Kenapa Pake Vite Buat Proyek React?

Cepat Banget: Vite pake teknologi modern (ES Modules bawaan browser) buat ngejalanin development server. Jadi, pas kamu mulai proyek atau ada perubahan kode, dia nge-refreshnya cepet banget, gak pake nunggu lama.
Setup Minimalis: Gak banyak konfigurasi ribet di awal. Cukup satu perintah, proyek React-mu udah siap.
Hot Module Replacement (HMR) yang Oke: Pas kamu ngedit kode komponen, perubahannya bisa langsung keliatan di browser tanpa nge-refresh seluruh halaman dan tanpa ngilangin state komponen lain. Keren!
Dukungan Banyak Framework: Selain React, Vite juga bisa dipake buat Vue, Svelte, dan lainnya.
Jadi Pilihan Populer: Banyak developer React sekarang lebih milih Vite daripada Create React App (CRA) yang lebih tua karena kecepatannya.

Langkah-Langkah Membuat Proyek React dengan Vite

Siapin terminalmu, kita mulai!

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: › React
```
```
- 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
```
```
Vite bakal ngelakuin proses setup sebentar. Kalau berhasil, kamu bakal liat pesan kayak gini:
bash
```
Done. Now run:
 
cd react-pertamaku
npm install
npm run dev
```
Dia ngasih tau langkah selanjutnya!
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: use --host to expose
  ➜  press h + enter to show help
```
(Nomor port 5173 itu bisa beda-beda ya).
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.

Struktur Folder Proyek Vite + React (Gambaran Umum)

Sekarang, coba buka folder proyekmu (react-pertamaku) pake VS Code (code . di terminal pas lagi di dalem folder itu). Kamu bakal liat struktur folder kurang lebih kayak gini:

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.

Jangan pusing dulu liat banyak file. Fokus utama kita nanti bakal ada di dalem folder src/, terutama file .jsx (tempat kita nulis komponen React) dan .css (buat styling).

Langkah awal ini mungkin kerasa banyak perintahnya, tapi Vite udah bikin semuanya jadi jauh lebih simpel dibanding dulu. Kamu udah berhasil ngelewatin tahap setup!

Di materi berikutnya, kita bakal mulai ngebongkar "sihir" di balik tampilan React: JSX (JavaScript XML), sintaks mirip HTML yang dipake buat nulis UI di React. Siap buat liat kode React yang sebenernya?

Kuis Membuat Proyek React Pertama (Vite)

Pertanyaan 1 dari 5

Manakah perintah `npm` yang digunakan untuk membuat proyek React baru menggunakan template Vite terbaru?