BAB 2: Memulai React

Di bab sebelumnya, kita membahas React sebagai konsep — dari asal-usulnya di Facebook hingga cara kerjanya lewat Virtual DOM. Kamu sudah paham mengapa React dibuat dan apa yang membuatnya berbeda. Sekarang saatnya berhenti berbicara tentang React dan mulai menggunakannya.

Langkah pertama adalah menyiapkan lingkungan pengembangan. Ini bukan bagian yang glamor, tapi fondasi yang benar sejak awal akan menghindarkan kamu dari banyak masalah di kemudian hari.

Node.js: Fondasi yang Kamu Butuhkan

React sendiri berjalan di browser, tapi proses pengembangan React — mulai dari build tools, package manager, hingga dev server — semuanya bergantung pada Node.js. Tanpa Node.js, kamu tidak bisa menjalankan Vite, tidak bisa menginstal paket dari npm, dan tidak bisa memulai project React.

Cek apakah Node.js sudah terpasang dengan menjalankan ini di terminal:

node -v

v22.14.0

Jika muncul nomor versi seperti di atas, kamu siap. Vite versi terbaru membutuhkan Node.js 20.19+ atau 22.12+, jadi pastikan versimu memenuhi syarat itu.

Jika Node.js belum terpasang atau versinya terlalu lama, unduh installer terbaru dari nodejs.org — pilih versi LTS (Long Term Support) yang ditandai sebagai “Recommended For Most Users”.

Mengapa Vite, Bukan Create React App?

Kamu mungkin pernah mendengar create-react-app — tool yang dulu menjadi cara standar memulai project React. Kabar penting: Create React App sudah tidak lagi direkomendasikan. Pengembangannya berhenti, dan komunitas React resmi beralih ke tool-tool yang lebih modern.

Pilihan yang direkomendasikan dokumentasi resmi React untuk project baru adalah framework seperti Next.js atau Remix — tapi untuk belajar React murni tanpa lapisan tambahan, Vite adalah pilihan terbaik.

Vite jauh lebih cepat karena menggunakan pendekatan yang berbeda:

Untuk project kecil perbedaannya mungkin tidak terasa. Tapi saat project berkembang, kamu akan sangat bersyukur memilih Vite dari awal.

Membuat Project React Pertama

Buka terminal, navigasi ke direktori tempat kamu ingin menyimpan project, lalu jalankan:

npm create vite@latest daftar-tugas -- --template react

Perintah ini membuat project baru bernama daftar-tugas menggunakan template React. Kita akan menggunakan skenario aplikasi daftar tugas sebagai konteks belajar sepanjang ebook ini — sederhana tapi cukup untuk mendemonstrasikan hampir semua konsep React yang perlu kamu pelajari.

Setelah perintah selesai, terminal akan menampilkan instruksi selanjutnya:

Done. Now run:

  cd daftar-tugas
  npm install
  npm run dev

Ikuti instruksi itu:

cd daftar-tugas
npm install

Proses npm install akan mengunduh semua dependencies yang dibutuhkan project. Ini mungkin memakan waktu beberapa menit tergantung koneksi internet. Setelah selesai, jalankan dev server:

npm run dev

  VITE v8.0.0  ready in 312 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Buka browser dan akses http://localhost:5173. Kamu akan disambut halaman default React + Vite — dengan logo React yang berputar dan penghitung klik. Itu pertanda project-mu berjalan dengan benar.

Memahami Struktur Project

Sebelum mengubah apapun, luangkan waktu untuk memahami apa yang Vite buat. Struktur direktori project terlihat seperti ini:

daftar-tugas/
├── node_modules/       <-- dependencies terinstal (jangan disentuh)
├── public/             <-- file statis yang tidak diproses Vite
│   └── vite.svg
├── src/                <-- kode React kamu ada di sini
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx         <-- komponen utama aplikasi
│   ├── index.css
│   └── main.jsx        <-- titik masuk aplikasi
├── .gitignore
├── eslint.config.js
├── index.html          <-- HTML shell aplikasi
├── package.json        <-- konfigurasi project dan daftar dependencies
├── package-lock.json
└── vite.config.js      <-- konfigurasi Vite

File yang paling penting untuk dipahami sekarang:

index.html adalah shell HTML aplikasimu. Perhatikan satu baris penting di dalamnya:

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

Div dengan id root adalah tempat React akan “menanamkan” seluruh antarmukanya. Semua komponen yang kamu buat nanti akan dirender di dalam div ini.

src/main.jsx adalah titik masuk aplikasi — file pertama yang dieksekusi:

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

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

createRoot mengambil div #root dari HTML, lalu me-render komponen App di dalamnya. StrictMode adalah wrapper bawaan React yang membantu mendeteksi potensi masalah saat development — tidak mempengaruhi hasil production.

src/App.jsx adalah komponen utama yang kamu lihat di browser — itulah yang mengandung logo berputar dan penghitung klik. Ini yang akan kita ubah selanjutnya.

Membersihkan Template Default

Template bawaan Vite berisi kode demo yang tidak kita butuhkan. Mari bersihkan dan mulai dari titik yang lebih sederhana.

Buka src/App.jsx dan ganti seluruh isinya dengan:

// src/App.jsx
function App() {
  return (
    <div>
      <h1>Daftar Tugas</h1>
    </div>
  )
}

export default App

Simpan file. Karena Vite punya fitur Hot Module Replacement (HMR), browser akan otomatis memperbarui tampilan tanpa perlu refresh manual. Kamu akan langsung melihat tulisan “Daftar Tugas” di browser.

Kamu bisa juga kosongkan src/App.css dan src/index.css untuk saat ini — kita akan menangani styling di bab yang khusus membahasnya.

Latihan

Sebelum lanjut ke bab berikutnya, coba beberapa hal ini:

1. Ubah teks <h1> di App.jsx menjadi nama kamu sendiri. Perhatikan bagaimana browser langsung berubah tanpa perlu refresh — itulah HMR yang bekerja.

2. Buka index.html dan cari elemen <title>. Ubah judulnya dari Vite + React menjadi sesuatu yang lebih deskriptif. Perhatikan apa yang berubah di tab browser.

3. Coba buat kesalahan sengaja: hapus tanda > penutup dari tag <h1> di App.jsx, lalu simpan. Perhatikan pesan error yang muncul di browser — biasakan diri dengan tampilan error React karena kamu akan sering bertemu ini.

Penutup

Project React pertamamu sudah berjalan — dan kamu sudah mengerti apa fungsi setiap file yang ada di dalamnya. Ini bukan detail kecil: developer yang paham struktur project-nya sendiri jauh lebih efektif daripada yang hanya copy-paste dan berharap semuanya berjalan.

Tapi sejauh ini, yang kita tulis hanyalah HTML biasa di dalam sebuah fungsi JavaScript. Sintaks aneh yang kamu lihat di App.jsx — penggabungan HTML dan JS itu — punya nama sendiri: JSX. Dan memahami JSX adalah kunci untuk benar-benar bisa menulis React. Itulah yang akan kita bedah di bab selanjutnya.

Referensi

1. 1Getting Started — Dokumentasi Resmi Vite
2. 2Start a New React Project — Dokumentasi Resmi React
3. 3Node.js Downloads — nodejs.org