DOM (Document Object Model) adalah representasi halaman web yang dipegang browser. Setiap kali kamu mengubah DOM, misalnya mengganti teks atau menambah elemen, browser mungkin harus menghitung ulang posisi elemen (layout) lalu menggambar ulang layar (repaint). Kalau perubahan kecil terjadi berkali-kali dan tersebar, proses ini bisa berat dan kodenya gampang berantakan.

React mengatasi ini dengan satu ide: jangan sentuh DOM sebelum tahu persis apa yang berubah.

Virtual DOM adalah gambaran tampilan dalam bentuk objek JavaScript biasa. Objek di memori jauh lebih murah dibuat dan dibandingkan daripada elemen DOM asli.

Alurnya ada empat langkah:

1. State berubah. Misalnya pengguna menekan tombol dan setAngka dipanggil.
2. Render ulang. React memanggil lagi fungsi komponen dan mendapat pohon elemen baru.
3. Diffing. Pohon baru dibandingkan dengan pohon sebelumnya untuk mencari perbedaan.
4. Commit ke DOM. Hanya bagian yang berbeda yang diubah di DOM asli.

Proses mencocokkan pohon lama dan baru ini disebut reconciliation. Ada dua aturan penting yang dipakai React:

• Elemen dengan tipe sama di posisi yang sama (misalnya <p> tetap <p>) dipertahankan; React cuma memperbarui atribut atau teksnya.
• Elemen dengan tipe berbeda (misalnya <p> berganti <div>) dibuang beserta seluruh isinya, lalu dibuat ulang dari nol.

Untuk daftar item, React memakai atribut key untuk tahu item mana yang sama, mana yang baru, dan mana yang dihapus. Itu sebabnya key sangat penting, dan kita bahas di bab props dan list.

Contoh konkret. Misal komponen ini dirender dengan angka 3, lalu berubah jadi 4:

function Skor({ angka }) {
  return (
    <div className="skor">
      <h2>Skor kamu</h2>
      <p>{angka}</p>
    </div>
  );
}
// Render 1: <div><h2>Skor kamu</h2><p>3</p></div>
// Render 2: <div><h2>Skor kamu</h2><p>4</p></div>
// Hasil diffing: hanya teks di dalam <p> yang diganti dari "3" ke "4".
// <div> dan <h2> tidak disentuh sama sekali.

Analogi: Virtual DOM itu seperti menulis draf revisi di kertas buram, mencoret bagian yang beda, lalu menyalin hanya bagian yang dicoret ke dokumen asli. Kamu tidak mengetik ulang seluruh dokumen.

Satu koreksi mitos: Virtual DOM tidak membuat React "lebih cepat dari JavaScript murni". Manipulasi DOM manual yang ditulis sangat hati-hati tetap bisa lebih cepat. Keunggulan React adalah kamu mendapat pembaruan yang cukup efisien secara otomatis tanpa harus memikirkan setiap perubahan DOM sendiri.

Bandingkan dua cara membuat tombol penghitung.

Imperatif dengan JavaScript biasa. Kamu menulis setiap langkah:

const btn = document.querySelector("#btn");
let count = 0;

btn.addEventListener("click", () => {
  count = count + 1;
  btn.textContent = "Nilai: " + count;
});
// Kamu sendiri yang mencari elemen, menyimpan angka,
// dan mengganti teks tombol setiap kali diklik.

Deklaratif dengan React. Kamu cukup menjelaskan tampilan untuk setiap nilai data:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Nilai: {count}
    </button>
  );
}
// Klik 3 kali -> tombol menampilkan "Nilai: 3"

Di versi React tidak ada querySelector atau textContent. Kamu bilang "tombol ini menampilkan Nilai: {count}", lalu React yang memastikan layar selalu cocok dengan count.

Kenapa ini penting? Bayangkan angka yang sama juga tampil di header, di badge notifikasi, dan di judul tab. Dengan gaya imperatif, kamu harus ingat memperbarui tiga tempat setiap kali data berubah, dan lupa satu saja berarti tampilan tidak sinkron. Dengan gaya deklaratif, ketiganya membaca count yang sama dan otomatis ikut berubah.

Rumus yang sering dipakai: UI = f(state). Tampilan adalah hasil fungsi dari data.

Yang kamu butuhkan:

Cek instalasi di terminal:

node -v   # contoh: v22.11.0
npm -v    # contoh: 10.9.0

# 1. Buat proyek baru
npm create vite@latest aplikasi-saya
# pilih framework: React
# pilih varian: JavaScript

# 2. Masuk folder dan pasang dependensi
cd aplikasi-saya
npm install

# 3. Jalankan server pengembangan
npm run dev
#   VITE ready
#   Local: http://localhost:5173/

Buka http://localhost:5173 di browser. Coba ubah teks di src/App.jsx lalu simpan: halaman langsung berubah tanpa refresh. Fitur ini disebut Hot Module Replacement (HMR), dan state di halaman biasanya tetap terjaga.

Skrip lain yang tersedia di package.json:

• npm run build membuat versi produksi yang sudah dioptimasi ke folder dist/.
• npm run preview menjalankan hasil build secara lokal untuk dicek.
• npm run lint memeriksa kode dengan ESLint.

aplikasi-saya/
├── node_modules/     # pustaka yang terpasang, jangan diedit
├── public/           # aset statis, disalin apa adanya
├── src/
│   ├── assets/       # gambar yang di-import dari kode
│   ├── App.jsx       # komponen root
│   ├── App.css
│   ├── index.css     # gaya global
│   └── main.jsx      # titik masuk aplikasi
├── index.html        # template HTML
├── package.json      # dependensi dan skrip
└── vite.config.js    # konfigurasi Vite

Urutan file yang dijalankan saat aplikasi dibuka:

1. Browser memuat index.html. Di dalamnya ada <div id="root"></div> dan <script type="module" src="/src/main.jsx">. Di Vite, index.html ada di akar proyek, bukan di public/.
2. src/main.jsx mencari elemen #root lalu menempelkan komponen App ke sana:

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>
);

3. src/App.jsx adalah komponen paling atas. Dari sinilah semua komponen lain dirangkai.

StrictMode hanya aktif saat development. Ia sengaja menjalankan beberapa hal dua kali untuk membantu menemukan bug, jadi jangan kaget kalau console.log di komponen muncul dua kali.

Folder public/ cocok untuk file yang dipanggil lewat URL tetap, misalnya favicon.svg yang diakses sebagai /favicon.svg. Gambar yang di-import dari kode taruh di src/assets/. package.json mencatat dependensi seperti react dan react-dom, serta skrip dev, build, preview, dan lint.

Saat proyek membesar, banyak tim menambah folder components/, pages/, hooks/, dan services/ di dalam src/. React tidak memaksa struktur tertentu; yang penting konsisten.

• Memakai create-react-app, padahal sudah usang. Pakai Vite.
• Lupa npm install setelah membuat proyek atau meng-clone repo, sehingga npm run dev gagal.
• Mengubah DOM langsung dengan document.querySelector di dalam komponen React. Biarkan React yang mengurus DOM.
• Mengira Virtual DOM mengganti seluruh halaman setiap render. Yang diganti hanya bagian yang berbeda.
• Mengedit isi node_modules/ atau meng-commit folder itu ke Git.