Belajar ReactJS - Memulai Proyek React

#Pendahuluan

Teori di episode 2 sudah cukup. Sekarang kalian akan membangun proyek React sungguhan dan memahami setiap bagiannya. Episode 3 fokus pada satu hal yang sering diabaikan: struktur proyek yang rapi dan tooling yang benar sejak hari pertama.

Kalian akan membuat proyek dengan Vite, membedah arti setiap folder dan file, menjalankan dev server dengan live reload, lalu memasang ESLint, Prettier, dan gitignore agar proyek bersih. Awal yang baik di episode ini akan menyelamatkan kalian dari banyak sakit kepala di episode 19-20.

#Membuat Aplikasi dengan Vite

#Scaffold Proyek Baru

Create React App masih menjadi pilihan populer, tapi tim React sendiri merekomendasikan Vite karena lebih cepat dan ringan. Mulai dengan:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Setelah npm run dev, Vite menampilkan http://localhost:5173 dan halaman boilerplate terbuka di browser. Jika kalian mengubah isi src/App.jsx dan menyimpannya, browser langsung memperbarui tampilan tanpa reload manual — inilah live reload yang dijanjikan.

#Struktur Project Modern

#Membaca Peta Proyek

Mari bedah struktur yang dihasilkan Vite:

my-app/
├── index.html
├── package.json
├── vite.config.js
├── eslint.config.js
├── .gitignore
├── public/
│   └── vite.svg
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    └── index.css

#index.html, public, dan package.json

index.html adalah satu-satunya file HTML yang disajikan server. Di dalamnya ada <div id="root"> yang menjadi tempat React menempel:

<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>

Folder public/ menyimpan aset statis seperti gambar logo dan favicon, disalin apa adanya ke hasil build. package.json berisi daftar dependency dan script. Cek bagian scripts-nya:

npm run

Output npm run menampilkan semua script yang tersedia: dev, build, lint, dan preview. Masing-masing dijalankan dengan npm run <nama>.

#src, main.jsx, dan App.jsx

Semua kode aplikasi tinggal di src/. src/main.jsx adalah titik masuk yang menempelkan React ke DOM:

main.jsx dari Vite

import ReactDOM from "react-dom/client"
import App from "./App.jsx"
 
ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
)

Perintah ReactDOM.createRoot(document.getElementById("root")).render(...) mencari elemen root di index.html lalu merender komponen App ke dalamnya. App.jsx adalah komponen akar yang berisi seluruh halaman.

#Menjalankan Dev Server dan Live Reload

#Alur Kerja Development

npm run dev menjalankan dev server dengan dua fitur utama: HMR (Hot Module Replacement) yang memperbarui modul yang berubah tanpa kehilangan state, dan error overlay yang menampilkan kesalahan langsung di browser. Biasakan alur ini:

edit kode -> simpan -> browser ter-update -> cek di React DevTools

Buka tab browser lalu coba ubah teks <h1> di App.jsx. Perhatikan bagaimana browser bereaksi tanpa reload — inilah alur kerja React modern.

#Konfigurasi Dasar ESLint, Prettier, dan Gitignore

#Menambahkan Prettier

Vite sudah menyertakan ESLint di eslint.config.js. Untuk format kode yang konsisten, tambahkan Prettier:

npm install -D prettier

Buat file .prettierrc di akar proyek dengan isi:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

Konfigurasi { "semi": false, "singleQuote": true } mematikan titik koma dan memakai tanda kutip tunggal — gaya yang konsisten dengan contoh kode di series ini. Di VS Code, aktifkan Format on Save agar Prettier merapikan kode otomatis.

#Menjalankan Lint

ESLint dari Vite sudah mengatur beberapa aturan. Jalankan:

npm run lint

Tanpa error, output hanya menampilkan pesan sukses. Coba tambahkan const x = 1 yang tidak dipakai untuk melihat ESLint bereaksi dengan peringatan is defined but never used.

#Memeriksa .gitignore

.gitignore bawaan Vite sudah mencakup node_modules, dist, log, dan file environment. Pastikan file environment seperti .env.local tetap ter-ignore — di episode 20 kita akan melihat kenapa ini penting untuk keamanan.

#Penutup

Episode 3 membangun dan merapikan proyek React pertama: scaffold Vite, struktur src, public, dan package.json, alur dev server dengan live reload, plus konfigurasi ESLint, Prettier, dan gitignore. Sekarang kalian punya panggung yang bersih untuk mulai menulis UI.

Inti yang harus dibawa pulang:

• Vite adalah pilihan utama: npm create vite@latest my-app -- --template react.
• index.html memuat #root, main.jsx menempelkan React ke DOM.
• src/ berisi kode aplikasi; public/ berisi aset statis.
• npm run dev memberi live reload; npm run build menghasilkan build production.
• Prettier dipasang terpisah untuk format kode konsisten.
• ESLint dan gitignore sudah tersedia di template Vite.

Di episode 4 selanjutnya kita akan membuat component & JSX — menulis komponen fungsional, sintaks JSX dengan ekspresi JavaScript, styling dengan CSS Modules dan styled-components, serta pola composition lewat props dan children. Sekarang saatnya mulai merancang UI.