BAB 3: Aplikasi React Pertama

Di bab sebelumnya, kamu berhasil membuat project daftar-tugas, menjalankan dev server, dan membersihkan template default Vite. Hasilnya: sebuah halaman kosong dengan tulisan “Daftar Tugas”. Terlihat sederhana — tapi ada mekanisme yang cukup menarik di baliknya.

Sebelum kita mulai menambahkan fitur, penting untuk benar-benar paham apa yang terjadi saat React merender sesuatu ke browser. Pemahaman ini akan membuat segalanya terasa lebih masuk akal ketika nanti kita bekerja dengan komponen yang lebih kompleks.

Alur Render React ke Browser

Bayangkan React sebagai sistem percetakan. Ada tiga aktor dalam proses ini: template HTML (cetakan kosong), instruksi render (perintah cetak), dan komponen App (konten yang dicetak). Ketiganya bekerja berurutan setiap kali aplikasimu dibuka di browser.

index.html menyediakan wadah kosong. main.jsx menentukan komponen mana yang mengisi wadah itu. App.jsx mendefinisikan tampilan yang sesungguhnya.

Menelusuri main.jsx

Buka src/main.jsx. Setelah kamu bersihkan di bab sebelumnya, isinya seperti ini:

// 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>,
)

Ada dua baris import yang menarik untuk dipahami. import { StrictMode } from 'react' mengambil StrictMode dari package React itu sendiri. import { createRoot } from 'react-dom/client' mengambil createRoot dari package terpisah bernama react-dom — ini adalah jembatan antara React (yang bekerja di memori) dan DOM browser (yang nyata).

Baris createRoot(document.getElementById('root')) mengambil div #root dari index.html dan menjadikannya “akar” aplikasi React. Setelah itu, .render(...) memasukkan komponen App ke dalam akar tersebut.

StrictMode membungkus App tapi tidak menghasilkan elemen HTML apapun di browser. Fungsinya murni untuk development: ia menjalankan beberapa pengecekan tambahan dan memperingatkan kamu jika ada pola kode yang berpotensi masalah.

Anatomi Komponen App

Sekarang buka src/App.jsx. Saat ini isinya minimalis:

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

export default App

Ini adalah komponen React dalam bentuk paling sederhana: sebuah fungsi JavaScript biasa yang mengembalikan sesuatu yang terlihat seperti HTML. Kata “terlihat seperti” itu penting — yang kamu tulis bukan HTML sungguhan, melainkan JSX. Perbedaannya akan kita bahas di bab berikutnya.

Yang perlu kamu perhatikan sekarang adalah tiga hal. Pertama, nama fungsi diawali huruf kapital (App, bukan app) — ini bukan sekadar konvensi gaya, tapi aturan wajib React untuk membedakan komponen dari elemen HTML biasa. Kedua, fungsi ini mengembalikan satu elemen div yang membungkus semua konten — React mengharuskan setiap komponen mengembalikan satu elemen root. Ketiga, export default App membuat komponen ini bisa diimpor dari file lain — itulah yang dilakukan main.jsx dengan baris import App from './App.jsx'.

Mengembangkan App.jsx

Sejauh ini komponen App hanya menampilkan judul. Mari kita tambahkan struktur awal untuk aplikasi daftar tugas yang akan kita kembangkan sepanjang ebook.

// src/App.jsx
function App() {
  return (
    <div>
      <h1>Daftar Tugas</h1>
      <p>Kelola aktivitas harianmu di sini.</p>
      <ul>
        <li>Belajar React</li>
        <li>Membuat komponen pertama</li>
        <li>Memahami JSX</li>
      </ul>
    </div>
  )
}

export default App

Simpan file dan lihat browser — daftar tugas sederhana langsung muncul berkat HMR. Ini masih data statis yang kita tulis langsung ke JSX, tapi nanti kita akan membuatnya dinamis menggunakan state.

export default vs export Biasa

Satu hal yang sering membingungkan pemula: ada dua cara mengekspor sesuatu dari file JavaScript/JSX.

export default digunakan untuk ekspor utama dari sebuah file. Satu file hanya boleh punya satu export default. Saat mengimpornya, kamu bebas memberi nama apapun:

// mengimpor export default — nama bebas
import App from './App.jsx'
import AppKomponen from './App.jsx'  // ini juga valid

export biasa (named export) digunakan untuk mengekspor beberapa hal sekaligus dari satu file. Saat mengimpornya, nama harus sama persis:

// named export
export function hitungTotal() { ... }
export const BATAS_TUGAS = 10

// mengimpornya — nama harus sama
import { hitungTotal, BATAS_TUGAS } from './utils.js'

Komponen React hampir selalu menggunakan export default karena setiap file biasanya hanya mengekspor satu komponen. Kita akan tetap dengan pola ini sepanjang ebook.

Latihan

Sebelum lanjut, coba dua latihan ini:

1. Tambahkan deskripsi singkat di bawah <h1> menggunakan tag <p>. Ubah teks deskripsinya menjadi sesuatu yang relevan dengan cara kerjamu sehari-hari.

2. Coba hapus export default App dari App.jsx dan simpan. Perhatikan error yang muncul di browser. Kemudian tambahkan kembali dan pastikan error hilang — ini cara cepat memahami mengapa baris itu wajib ada.

3. Tantangan: Buat file baru bernama src/Header.jsx yang berisi fungsi Header dengan export default. Isi dengan elemen <header> yang berisi <h2> bertuliskan “Daftar Tugas Harian”. Belum perlu menggunakannya di App.jsx — cukup pastikan file tersimpan tanpa error. Kita akan belajar cara menggunakannya saat membahas komponen.

Penutup

Kamu sekarang tidak hanya bisa menjalankan React — kamu paham kenapa setiap baris di main.jsx dan App.jsx ada di sana. Pemahaman tentang alur index.html → main.jsx → App.jsx → DOM ini adalah fondasi yang akan kamu gunakan terus-menerus.

Tapi ada satu pertanyaan yang mungkin sudah mengganjal sejak tadi: mengapa kita menulis HTML di dalam fungsi JavaScript? Apakah itu valid? Bagaimana browser bisa memahaminya? Jawabannya ada di JSX — sintaks khusus yang menjadi jantung dari cara React bekerja. Itulah yang akan kita bedah habis di bab selanjutnya.

Referensi

1. 1Your First Component — Dokumentasi Resmi React
2. 2createRoot — Referensi API React DOM