Kenapa Butuh React?

Di Buku 2 kamu sudah bisa bikin halaman yang "hidup" pakai JavaScript. Klik tombol, angka bertambah. Ketik tugas, tugas muncul di daftar. Rasanya keren.

Tapi coba bayangkan aplikasinya membesar. Ada daftar tugas, penghitung tugas selesai, filter, tombol hapus, dan pesan "belum ada tugas". Setiap kali satu data berubah, kamu harus ingat semua bagian layar yang ikut berubah. Lupa satu saja, tampilannya jadi tidak sinkron.

Masalah inilah yang ingin diselesaikan React. Di bab ini kita belum menulis aplikasi React. Kita fokus dulu ke pertanyaan paling penting: kenapa React ada?

Mengubah DOM secara manual

Ingat lagi: browser mengubah HTML menjadi pohon objek yang bisa diatur lewat JavaScript. Pohon ini namanya DOM. Selama ini, kalau mau mengubah tampilan, kamu mencari elemen lalu mengubahnya langsung.

Yuk lihat contoh daftar tugas sederhana dengan JavaScript biasa:

const daftar = document.querySelector("#daftar");
const jumlah = document.querySelector("#jumlah");
const kosong = document.querySelector("#kosong");
let totalTugas = 0;

function tambahTugas(teks) {
  const li = document.createElement("li");
  li.textContent = teks;
  daftar.appendChild(li);        // 1. ubah daftar

  totalTugas = totalTugas + 1;
  jumlah.textContent = totalTugas; // 2. ubah penghitung
  kosong.hidden = true;            // 3. sembunyikan pesan kosong
}

Kodenya jalan, dan untuk aplikasi sekecil ini masih wajar. Tapi perhatikan: satu aksi "tambah tugas" butuh tiga perubahan di tiga tempat berbeda. Kamu yang harus mengingat semuanya.

Sekarang tambahkan fitur hapus. Kamu harus menghapus <li>, mengurangi angka, lalu memeriksa apakah pesan kosong perlu muncul lagi. Tambah fitur filter "selesai/belum", dan jumlah kemungkinan langkahnya meledak.

Cara imperatif: memberi perintah langkah demi langkah

Gaya kode di atas disebut imperatif. Kamu menulis bagaimana caranya: buat elemen ini, sisipkan di sana, ubah teks itu, sembunyikan yang ini.

Imperatif itu tidak salah. Masalahnya muncul saat aplikasi membesar. Data dan tampilan disimpan di dua tempat: di variabel JavaScript dan di DOM. Kamu harus menjaga keduanya tetap sama, secara manual, setiap saat.

Bug paling umum di aplikasi seperti ini terdengar sepele: "angkanya bilang 3 tugas, tapi di layar ada 4". Itu tanda data dan tampilan sudah tidak sinkron.

Cara deklaratif: cukup gambarkan hasil akhirnya

Cara kedua disebut deklaratif. Kamu tidak menulis langkah-langkah mengubah layar. Kamu cukup menjelaskan: "kalau datanya seperti ini, tampilannya harus seperti itu."

Ini contoh daftar tugas yang sama dengan React. Jangan khawatir kalau sintaksnya masih asing. Kita akan membedahnya pelan-pelan di bab 5 sampai 7.

import { useState } from "react";

export default function DaftarTugas() {
  const [tugas, setTugas] = useState([]);

  function tambahTugas() {
    setTugas([...tugas, "Tugas ke-" + (tugas.length + 1)]);
  }

  return (
    <div>
      <p>Jumlah tugas: {tugas.length}</p>
      {tugas.length === 0 && <p>Belum ada tugas.</p>}
      <ul>
        {tugas.map((t) => <li key={t}>{t}</li>)}
      </ul>
      <button onClick={tambahTugas}>Tambah</button>
    </div>
  );
}

Perhatikan fungsi tambahTugas. Isinya cuma satu hal: memperbarui data. Tidak ada perintah "ubah angka" atau "sembunyikan pesan kosong".

Bagian return adalah denahnya. Jumlah tugas selalu diambil dari tugas.length. Pesan kosong muncul hanya kalau daftarnya kosong. Setiap kali data berubah, React menggambar ulang sesuai denah, lalu mengubah bagian DOM yang benar-benar berbeda saja.

Jadi, apa itu React?

React adalah library JavaScript untuk membangun UI (tampilan antarmuka). Satu kalimatnya begini: kamu menggambarkan tampilan berdasarkan data, React yang menjaga layar tetap sesuai.

Selain gaya deklaratif, React punya satu ide besar lagi: tampilan dipecah jadi potongan kecil yang bisa dipakai ulang. Potongan ini disebut komponen. Tombol, kartu produk, navbar, semuanya bisa jadi komponen. Kita kenalan dengan komponen di bab 5.

React dibuat oleh tim di Meta dan dipakai sangat luas, dari aplikasi web sampai aplikasi mobile lewat React Native. Buku ini memakai React 19, versi utama terbaru saat buku ditulis.

Kapan kamu butuh React?

React bukan jawaban untuk semua hal. Halaman profil statis atau landing page sederhana cukup dengan HTML, CSS, dan sedikit JavaScript.

React mulai terasa manfaatnya kalau tampilanmu sering berubah karena data. Contohnya dasbor, aplikasi catatan, keranjang belanja, atau aplikasi chat. Makin banyak bagian layar yang bergantung pada data yang sama, makin besar manfaatnya.

Sebelum menulis React, kita perlu menyiapkan dapurnya dulu, jadi di bab berikutnya kita berkenalan dengan Node.js dan npm.