Belajar ReactJS - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Di episode 1 kalian tahu kenapa React ada. Sekarang saatnya melihat bagaimana dia bekerja di balik layar. Konsep yang terdengar teknis — Virtual DOM, reconciliation, render cycle, React Fiber — sebenarnya sederhana jika dipahami urutannya.

Episode 2 membedah arsitektur utama React dan mengenalkan komponen-komponen inti yang akan kalian pakai setiap hari: komponen fungsional, props, state, one-way data flow, dan hooks. Ini adalah episode fondasi paling penting; seluruh series dibangun di atas konsep yang dibahas di sini.

#Cara Kerja di Balik Layar

#Virtual DOM dan Reconciliation

Virtual DOM adalah representasi JavaScript dari struktur UI. Ketika kalian menulis JSX, React mengubahnya menjadi objek deskriptif, bukan langsung memanipulasi DOM browser. Saat state berubah, React membuat pohon virtual baru lalu membandingkannya dengan pohon lama — proses ini disebut reconciliation:

state berubah
  -> render pohon virtual baru
  -> diff dengan pohon sebelumnya
  -> tentukan perubahan minimum
  -> patch DOM nyata

Alasan memakai perantara ini sederhana: membuat dan membandingkan objek JavaScript jauh lebih murah daripada menyentuh DOM browser, dan hasil akhirnya adalah perubahan DOM yang minimal.

#Render Cycle dan Commit Phase

Proses render React terbagi menjadi dua fase besar:

• Render phase: React menjalankan fungsi komponen, menghasilkan pohon virtual baru, dan melakukan diff. Fase ini bisa diinterupsi oleh React.
• Commit phase: React menerapkan perubahan ke DOM nyata dan menjalankan efek samping. Fase ini berjalan sinkron dan tidak bisa diinterupsi.

Memahami dua fase ini membantu kalian menghindari bug: jangan membaca atau mengubah DOM di render phase, karena hasilnya bisa tidak konsisten.

#Peran JSX, Babel, dan Bundler

JSX adalah sintaks mirip HTML yang ditulis di dalam JavaScript. Browser tidak mengerti JSX, jadi Babel (melalui toolchain Vite) mengubahnya menjadi pemanggilan fungsi React.createElement. Bundler lalu menggabungkan seluruh modul JavaScript menjadi file yang bisa dimuat browser.

JSX dan hasil transformasinya

const elemen = <h1>Halo, React</h1>
// hasil transformasi Babel:
const elemen = React.createElement("h1", null, "Halo, React")

Kode const elemen = <h1>Halo, React</h1> ditulis oleh pengembang; transformasinya ke React.createElement ditangani otomatis oleh build tool. Kalian tidak perlu memanggil React.createElement secara manual di React modern.

#React Fiber dan Concurrent Rendering

React Fiber adalah algoritma reconciliation baru yang diperkenalkan React 16. Ide utamanya: render bisa dipecah menjadi satuan kerja kecil (fiber) yang bisa diinterupsi dan diprioritaskan. Ini yang membuka jalan ke concurrent rendering — React bisa menyela render yang tidak penting untuk menangani interaksi pengguna yang lebih mendesak, menjaga UI tetap responsif. Kita akan membahas pola stabilnya di episode 23.

#Komponen-Komponen Utama

#Komponen Fungsional vs Class Component

React modern menganjurkan function component. Satu-satunya perbedaan signifikan dari class component adalah cara mengelola state dan lifecycle — class memakai this.state dan lifecycle method, function memakai hooks:

Function component vs class component

function Counter() {
  const [jumlah, setJumlah] = React.useState(0)
  return <button onClick={() => setJumlah(jumlah + 1)}>{jumlah}</button>
}

Function component lebih ringkas, tidak memakai this, dan const [jumlah, setJumlah] = React.useState(0) adalah contoh paling umum dari hooks useState. Class component masih valid tapi tidak lagi menjadi pilihan pertama.

#Props, State, dan Component Lifecycle

• Props: data yang dikirim orang tua ke anak, bersifat read-only.
• State: data internal yang dimiliki komponen dan bisa berubah.
• Lifecycle: rangkaian peristiwa dari komponen dibuat, diupdate, sampai dihapus. Di React modern, lifecycle diakses lewat hooks seperti useEffect.

Props masuk, state internal

function Kartu({ judul }) {
  const [dibuka, setDibuka] = React.useState(false)
  return (
    <div>
      <h3>{judul}</h3>
      {dibuka ? <p>Konten kartu</p> : null}
    </div>
  )
}

Fungsi Kartu menerima judul sebagai props dan mengelola dibuka sebagai state. {dibuka ? <p>Konten kartu</p> : null} adalah conditional rendering yang akan kita bahas lengkap di episode 7.

#One-Way Data Flow dan Component Composition

React menegakkan one-way data flow: data mengalir dari komponen induk ke anak melalui props, dan anak berkomunikasi ke induk lewat fungsi callback yang juga dikirim sebagai props. Tidak ada dua arah langsung antar komponen sembarangan. Ini membuat alur data mudah dilacak dan di-debug.

#Hooks sebagai Core API React

Hooks adalah fungsi yang memberi function component akses ke state dan lifecycle. Empat hooks paling dasar:

• useState: menyimpan state lokal.
• useEffect: menjalankan side effect setelah render.
• useContext: membaca context (episode 10).
• useRef: menyimpan nilai yang tidak memicu render.

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

Jalankan perintah di atas, lalu ganti isi src/App.jsx dengan contoh Counter di atas. Jika tombol menghitung angka, berarti kalian sudah memahami cara kerja render dan state — dua konsep yang akan menjadi fondasi seluruh series.

#Penutup

Episode 2 mengangkat tirai yang menutupi React: Virtual DOM dan reconciliation, render cycle dengan commit phase, peran JSX dan Babel, arsitektur React Fiber, lalu komponen inti berupa function component, props, state, one-way data flow, dan hooks.

Inti yang harus dibawa pulang:

• Virtual DOM adalah perantara: React merender virtual tree lalu diff dan patch DOM nyata.
• Render phase bisa diinterupsi; commit phase berjalan sinkron.
• JSX ditransformasi Babel menjadi React.createElement; bundler menggabungkan modul.
• React Fiber memungkinkan concurrent rendering dengan prioritas kerja.
• Function component dengan hooks adalah pola modern; useState adalah hooks tersering.
• Data mengalir satu arah: induk ke anak lewat props, anak ke induk lewat callback.

Di episode 3 selanjutnya kita akan memulai proyek React — membedah struktur folder Vite, menjalankan dev server dengan live reload, serta mengonfigurasi ESLint, Prettier, dan gitignore supaya proyek kalian bersih sejak awal. Siapkan terminal, kita akan banyak menulis kode.