React: Membangun Antarmuka Pengguna · 1/9

Kenapa React ada

Masalah dengan pembaruan DOM manual, dan ide yang menggantikannya.

Baca 20 menit

Setelah pelajaran ini kamu bisa

Menjelaskan masalah yang membuat React dibangun
Menjelaskan bedanya UI imperatif dan deklaratif
Menjelaskan arti "UI adalah function dari state"
Menyebutkan apa yang tidak diselesaikan React

Kamu bisa membangun antarmuka apa pun dengan DOM API dari modul sebelumnya. Masalahnya bukan soal kemampuan — tapi soal menjaga layar dan datanya tetap sepakat saat ada yang berubah.

Bayangkan daftar booking di mana seorang guest bisa dihapus. Dengan DOM API kamu harus mengingat: hapus barisnya, perbarui hitungan di header, sembunyikan list dan tampilkan empty state kalau itu yang terakhir, aktifkan atau matikan tombol "hapus semua", dan perbarui total harganya. Lima pembaruan untuk satu aksi — dan kamu harus menemukan semuanya, setiap kali, untuk setiap aksi.

Coba sendiri

Fitur yang sama dengan dua cara. Hitung ada berapa tempat yang bisa salah di masing-masingnya.

// ---------- imperative: you describe the STEPS ----------
const screen = { rows: ["Ana", "Budi", "Citra"], count: 3, emptyShown: false, clearEnabled: true };

function removeImperative(name) {
  screen.rows = screen.rows.filter((r) => r !== name);   // 1. the row
  screen.count = screen.rows.length;                      // 2. the counter
  screen.emptyShown = screen.rows.length === 0;           // 3. the empty state
  screen.clearEnabled = screen.rows.length > 0;           // 4. the button
  // 5. ...and whatever gets added next month, which you must remember
}

removeImperative("Budi");
console.log("imperative:", JSON.stringify(screen));

// ---------- declarative: you describe the RESULT ----------
let guests = ["Ana", "Budi", "Citra"];

// One function. Given the data, what should the screen be?
function render(guests) {
  return {
    rows: guests,
    count: guests.length,
    emptyShown: guests.length === 0,
    clearEnabled: guests.length > 0,
  };
}

guests = guests.filter((g) => g !== "Budi");   // change the DATA only
console.log("declarative:", JSON.stringify(render(guests)));

guests = [];
console.log("empty case:  ", JSON.stringify(render(guests)));
console.log("");
console.log("The declarative version cannot forget a step, because there are no steps.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Itu seluruh idenya, dan tugas React adalah bagian yang tidak ditampilkan: mengambil output render lalu membuat DOM sungguhan cocok dengannya, secara efisien.

Slogannya adalah UI adalah function dari state: UI = f(state). Kamu tidak pernah menulis "ubah teks ini". Kamu menulis "untuk state ini, teksnya adalah ini", lalu mengubah state-nya.

Bagaimana React membuatnya cepat

Mendeskripsikan ulang seluruh layar di setiap perubahan terdengar boros, dan menyentuh DOM sungguhan sebanyak itu memang boros. Jadi React membangun deskripsi ringan dari pohonnya di memori, membandingkannya dengan yang sebelumnya, lalu menerapkan hanya selisihnya. Perbandingan itu disebut reconciliation.

Apa yang tidak diselesaikan React

Ia bukan framework. Tidak ada routing, tidak ada pengambilan data, tidak ada penyiapan build. Itu yang ditambahkan Next.js, di modul berikutnya.
Ia tidak membuatmu cepat. Me-render list raksasa dengan buruk juga lambat di React.
Ia tidak memperbaiki desain state. State yang dimodelkan buruk justru lebih sulit dikerjakan di React, bukan lebih mudah — itu sebabnya pelajaran discriminated union di modul TypeScript penting di sini.
Ia tidak wajib. Banyak situs bagus yang tidak memakai framework apa pun. React sepadan dengan biayanya saat sebuah UI benar-benar punya state yang interaktif.

Tugas praktik

Tulis file HTML biasa berisi sebuah list, sebuah tombol "tambah", dan sebuah penghitung yang menampilkan jumlah item — hanya dengan document.createElement dan event listener, tanpa framework. Lalu tambahkan tombol "hapus semua" yang harus mematikan dirinya sendiri saat list-nya kosong. Perhatikan berapa banyak tempat yang harus kamu sentuh hanya untuk satu syarat tambahan itu. Simpan file-nya; kamu akan menghargainya nanti di modul ini.

Hasil yang diharapkan

Berfungsi, dan kodenya lebih banyak dari dugaanmu untuk syarat terakhir itu.