Pengenalan React & Cara Berpikir Komponen

Apa itu React?

React adalah library JavaScript untuk membangun antarmuka pengguna (UI). Dibuat oleh Facebook (Meta) tahun 2013 dan kini dipakai oleh banyak produk besar. React tidak mengatur seluruh aplikasimu; ia fokus pada satu hal: menggambar UI dan memperbaruinya saat data berubah.

Masalah yang diselesaikan React

Tanpa React, kamu menulis kode seperti ini untuk memperbarui halaman:

const el = document.querySelector("#jumlah");
el.textContent = Number(el.textContent) + 1;

Semakin besar aplikasinya, makin sulit melacak bagian layar mana yang perlu diubah ketika data berubah. React membalik caranya: kamu mendeskripsikan seperti apa UI seharusnya untuk data saat ini, dan React yang mengurus perubahan di layar.

> UI = f(state): tampilan adalah fungsi dari data.

Tiga ide utama

1. Komponen — UI dipecah menjadi potongan kecil yang bisa dipakai ulang (tombol, kartu, daftar, halaman).
2. Deklaratif — kamu menulis apa yang ingin ditampilkan, bukan langkah-langkah mengubah DOM.
3. Satu arah (one-way data flow) — data mengalir dari komponen induk ke anak lewat props.

Virtual DOM (gambaran singkat)

React menyimpan salinan ringan struktur UI di memori. Saat data berubah, React membandingkan versi lama dan baru, lalu hanya mengubah bagian DOM yang benar-benar berbeda. Hasilnya cepat tanpa kamu mengatur detailnya.

Komponen pertama

Komponen React adalah function yang mengembalikan UI (ditulis dengan JSX):

function App() {
  return (
    <div>
      <h1>Halo, React!</h1>
    </div>
  );
}

Nama komponen harus diawali huruf besar (App, bukan app) agar React membedakannya dari tag HTML.

Menampilkan komponen ke halaman

Di proyek nyata, kamu memasang komponen ke elemen HTML dengan createRoot:

import { createRoot } from "react-dom/client";

createRoot(document.getElementById("root")).render(<App />);

Di latihan KelasIT, komponen App dirender otomatis ke elemen #root, jadi kamu cukup fokus menulis komponennya.

Ekosistem React

Yang perlu kamu kuasai sebelum ini

JavaScript dasar: variable, function, array, object, arrow function, destructuring, dan map. Jika masih ragu, ulangi course JavaScript Dasar di KelasIT.