Inisialisasi Aplikasi

Kenapa ini penting

Sebelum menulis komponen pertama, kamu butuh "dapur" yang siap pakai: tempat kode JSX diterjemahkan menjadi JavaScript yang dimengerti browser, server lokal yang otomatis me-refresh saat file disimpan, dan perintah untuk membuat versi produksi yang ringan. Di masa lalu orang memakai Create React App (CRA). Sejak 14 Februari 2025, tim React resmi menyatakan CRA deprecated untuk aplikasi baru dan menyarankan framework atau build tool seperti Vite. Jadi kalau kamu menemukan tutorial lama yang memakai npx create-react-app, lewati saja.

Vite (dibaca "vit", bahasa Prancis untuk "cepat") terkenal karena dev server-nya menyala dalam hitungan detik dan Hot Module Replacement (HMR) yang langsung memperbarui tampilan tanpa reload penuh.

Konsep inti

Versi yang dipakai

Dicek dengan npm view saat materi ini ditulis:

Paket	Versi
`react` / `react-dom`	19.3.1
`vite`	8.3.5
`create-vite` (pembuat proyek)	9.3.1
`@vitejs/plugin-react`	6.1.2

Vite membutuhkan Node.js versi 20.19+ atau 22.12+ (field engines di paket vite: ^20.19.0 || >=22.12.0). Cek dengan node -v. Kalau versimu lebih lama, perbarui dulu lewat situs nodejs.org atau nvm.

Membuat proyek

Perintahnya npm create vite@latest. Kamu bisa menjawab pertanyaan interaktif, atau langsung menyebut nama proyek dan template. Pada npm 7 ke atas, perlu tanda -- tambahan sebelum --template. Template React yang tersedia antara lain react, react-ts (TypeScript), react-compiler, dan react-compiler-ts. Di materi ini kita pakai react (JavaScript biasa).

Struktur folder hasil template

Isi template React dari create-vite 9.3.1 (dicek langsung dari paketnya):

my-app/
├── index.html          ← halaman HTML tunggal, titik masuk
├── package.json        ← daftar dependency & script
├── vite.config.js      ← konfigurasi Vite (memakai plugin React)
├── .gitignore
├── .oxlintrc.json      ← konfigurasi linter oxlint
├── public/             ← file statis yang disalin apa adanya (favicon.svg, icons.svg)
└── src/
    ├── main.jsx        ← entry point JavaScript: memasang React ke halaman
    ├── App.jsx         ← komponen utama
    ├── App.css
    ├── index.css       ← CSS global
    └── assets/         ← gambar yang di-import dari kode (react.svg, vite.svg, hero.png)

Perhatikan: berbeda dengan CRA, index.html ada di root proyek, bukan di folder public. Vite memperlakukan index.html sebagai titik masuk, dan di dalamnya ada <script type="module" src="/src/main.jsx">.

Template terbaru memakai oxlint (linter yang sangat cepat) untuk script npm run lint, bukan ESLint seperti template lama. Fungsinya sama: memberi peringatan kode yang berpotensi bermasalah.

main.jsx, createRoot, dan StrictMode

main.jsx adalah jembatan antara HTML dan React:

createRoot(elemen) dari react-dom/client membuat "akar" React di sebuah elemen DOM, biasanya <div id="root">.
.render(<App />) menyuruh React menggambar komponen App di dalam akar itu.
<StrictMode> adalah pembungkus khusus untuk mode pengembangan. Ia tidak menampilkan apa pun, tapi menyalakan pemeriksaan tambahan: komponen dirender dua kali dan effect dijalankan-dibersihkan-dijalankan ulang satu kali ekstra, supaya bug seperti effect tanpa cleanup cepat ketahuan. Pemeriksaan ini hanya terjadi saat development, tidak di build produksi.

Analogi StrictMode: seperti guru yang sengaja mengecek pekerjaanmu dua kali saat latihan, supaya kesalahan tidak terbawa ke ujian.

Script di package.json

Perintah	Fungsi
`npm run dev`	Menjalankan dev server (default `http://localhost:5173`) dengan HMR
`npm run build`	Membuat versi produksi yang dioptimasi ke folder `dist/`
`npm run preview`	Menjalankan server lokal untuk mencoba hasil `dist/`
`npm run lint`	Menjalankan oxlint

Contoh kode

Langkah lengkap dari nol:

# 1. Cek versi Node (harus 20.19+ atau 22.12+)
node -v
# → v22.x.x

# 2. Buat proyek bernama toko-kopi dengan template React
npm create vite@latest toko-kopi -- --template react

# 3. Masuk ke folder dan install dependency
cd toko-kopi
npm install

# 4. Jalankan dev server
npm run dev
# → VITE v8.3.5  ready in ... ms
# → ➜  Local:   http://localhost:5173/

# 5. Saat siap rilis, buat build produksi
npm run build
# → file hasil ada di folder dist/

# 6. Coba hasil build secara lokal
npm run preview

Isi index.html dari template:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <!-- React akan "menempel" di div ini -->
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Isi src/main.jsx dari template (sudah diberi komentar):

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';      // CSS global, Vite yang mengurus penyisipannya
import App from './App.jsx';

// Ambil <div id="root"> lalu jadikan akar React
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

vite.config.js dari template:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// Plugin React mengaktifkan JSX dan Fast Refresh (HMR untuk komponen)
export default defineConfig({
  plugins: [react()],
});

Sekarang ganti isi src/App.jsx dengan komponen paling sederhana untuk memastikan semuanya jalan:

export default function App() {
  return (
    <main>
      <h1>Toko Kopi Nusantara</h1>
      <p>Proyek React pertamaku jalan!</p>
    </main>
  );
}
// Simpan file → browser otomatis menampilkan judul baru tanpa reload manual (HMR)

Kesalahan umum

Memakai Create React App dari tutorial lama. CRA sudah deprecated. Pakai npm create vite@latest.
Lupa -- sebelum --template di npm 7+. Tanpa itu, npm menelan flag-nya dan kamu malah ditanya template secara interaktif. Yang benar: npm create vite@latest nama -- --template react.
Lupa npm install lalu langsung npm run dev. Hasilnya error vite: command not found. Install dependency dulu.
Node.js terlalu lama. Vite 8 butuh Node 20.19+ atau 22.12+. Kalau muncul error aneh saat start, cek node -v lebih dulu.
Mengira StrictMode bug karena log muncul dua kali. console.log di komponen tercetak dua kali saat development itu disengaja. Di build produksi hanya sekali.

Latihan

Mudah, Buat proyek profil-saya dengan Vite template react, jalankan dev server, dan ubah App.jsx sehingga menampilkan nama dan kotamu.
Sedang, Jalankan npm run build, lalu lihat isi folder dist/. Catat file apa saja yang dihasilkan dan jalankan npm run preview untuk membuktikan hasil build berfungsi.
Menantang, Ubah main.jsx agar React dipasang ke elemen dengan id app (bukan root). Sesuaikan index.html-nya juga. Lalu tambahkan console.log('render App') di App dan jelaskan kenapa log muncul dua kali di console saat development.

Lihat solusi

npm create vite@latest profil-saya -- --template react
cd profil-saya
npm install
npm run dev

// src/App.jsx
export default function App() {
  return (
    <main>
      <h1>Halo, saya Rina</h1>
      <p>Tinggal di Bandung</p>
    </main>
  );
}

npm run build
ls dist
# → index.html  assets/  favicon.svg  icons.svg
ls dist/assets
# → index-<hash>.js  index-<hash>.css  (nama file berisi hash agar cache browser aman)
npm run preview
# → ➜  Local:   http://localhost:4173/

Nama file berisi hash acak supaya setiap rilis baru punya nama berbeda, jadi browser tidak memakai file lama dari cache.

<!-- index.html -->
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

// src/main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('app')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

// src/App.jsx
export default function App() {
  console.log('render App'); // → tercetak 2x di development
  return <h1>Dipasang di #app</h1>;
}

Log muncul dua kali karena StrictMode sengaja merender komponen dua kali di development untuk mendeteksi komponen yang tidak murni (punya efek samping saat render). Di build produksi, render hanya sekali.

Ringkasan

Create React App sudah deprecated (Februari 2025); proyek React baru dibuat dengan Vite: npm create vite@latest nama -- --template react.
Versi materi ini: React 19.3.1, Vite 8.3.5, create-vite 9.3.1; Vite butuh Node 20.19+ atau 22.12+.
index.html di root memuat src/main.jsx, yang memanggil createRoot(...).render(<App />).
StrictMode menambah pemeriksaan khusus development (render ganda, effect dijalankan ulang) tanpa memengaruhi produksi.
npm run dev untuk development, npm run build menghasilkan dist/, npm run preview untuk mencoba hasil build.