Coba buka Tokopedia, Gojek, atau Instagram di browser. Klik tombol — UI langsung respon, gak ada reload halaman. Tambahin item ke keranjang — counter di pojok atas update otomatis. Ribuan elemen yang sinkron sama data, mulus kayak aplikasi native. Itu React kerja di balik layar. Library JavaScript yang dibuat Meta (2013) buat ngebangun UI yang reaktif — sekarang jadi salah satu skill paling dicari di pasar kerja Indonesia, dari startup kecil sampai perusahaan unicorn.
💡 Investasi karier yang masuk akal. Cek lowongan dev di LinkedIn/Glints/Kalibrr — "React" muncul di hampir tiap job description frontend. Belajar React bukan tren sesaat; udah jadi standar industri 10+ tahun terakhir. Skill yang transferable ke React Native (mobile), Next.js (fullstack), bahkan kerangka berpikir-nya nempel di Vue/Svelte/Solid.
Kenapa React?
1. Komponen — UI sebagai Lego
Daripada nulis satu file HTML raksasa 5000 baris, kamu pecah UI jadi komponen kecil yang bisa dipakai ulang: <Button>, <Card>, <Navbar>. Halaman akhir adalah gabungan komponen, persis kayak ngerakit Lego — banyak balok kecil yang nempel jadi bangunan kompleks.
2. Deklaratif — Bukan Imperatif
Bandingkan dua cara nampilin pesan "Halo, Budi" di layar:
// Vanilla JS (imperatif) — kasih instruksi step-by-step
const div = document.querySelector("#app");
div.innerHTML = "";
const h1 = document.createElement("h1");
h1.textContent = "Halo, " + nama;
div.appendChild(h1);
// React (deklaratif) — bilang KONDISI AKHIR yang kamu mau
return <h1>Halo, {nama}!</h1>
Yang kedua bukan cuma lebih pendek — pikirannya juga beda. Imperatif = "cara dapetinnya gimana". Deklaratif = "hasil akhirnya kayak apa". React urus jurus DOM manipulation di belakang layar.
3. State yang Terkontrol
UI berubah karena data berubah. React maksa kamu manage data yang bisa berubah (state) secara eksplisit, terus otomatis re-render pas state berubah. Gak ada lagi document.getElementById() yang nyebar di mana-mana, gak ada "kenapa value-nya gak update padahal udah dikasih event listener".
Komponen Pertama
function App() {
return <h1>Halo React!</h1>
}
Kode di atas adalah function component — fungsi JavaScript yang return JSX (syntax HTML-like di dalam JavaScript). Cuma 3 baris tapi udah cukup buat ngebangun pondasi.
🎭 Analogi sehari-hari
React itu kayak dapur restoran fast-food modern. Customer kasih order ("burger keju, gak pake bawang, nasi goreng pedas") — bukan instruksi step-by-step ("ambil roti, panggang 30 detik, taro keju..."). Customer cuma deklarasiin hasil akhir, kepala dapur (React) yang ngatur urutan masak, alokasi koki, koordinasi penyajian. Hasilnya konsisten + cepat. Vanilla JS lebih kayak masak sendiri di rumah — kamu yang harus mikirin tiap langkah, salah urutan = telur gosong.
Ekosistem yang Matang
Kamu gak akan sendirian — pas React makin dipake, library pendamping pun muncul:
- React Router / TanStack Router — routing antar halaman
- TanStack Query — data fetching + caching
- Zustand / Redux — state global
- Next.js / Remix — SSR + fullstack framework
Fokus lesson ini: paham React murni dulu. Ekosistem datang belakangan pas dasar udah kuat.
⚠️ Jebakan yang sering ditemui pemula
- "React framework, kayak Laravel ya?" — BUKAN. React = library (cuma buat UI). Framework = Next.js/Remix yang opinionated soal routing, data fetching, build setup. Beda level abstraksi.
- Belajar Next.js sebelum kuat React — bisa, tapi banyak yang bingung "mana React mana Next.js". Kuasai React fundamentals dulu, baru naik ke framework di atasnya.
- Bayangin React = jQuery 2.0 — beda paradigma total. jQuery imperatif (cari elemen, ubah). React deklaratif (deklarasiin UI, biarkan React yang urus). Mindset baru.
- Ngira virtual DOM = sihir performa — virtual DOM bantu React tau "apa yang berubah", tapi bukan jaminan auto-cepat. Re-render gak terkendali tetep bisa lambat.
TL;DR: React = library JavaScript dari Meta buat bangun UI komponen-based + deklaratif. Pecah UI jadi komponen kecil reusable (<Button>, <Card>). Deklarasiin "UI mau kayak apa", React urus DOM manipulation. State berubah → komponen auto re-render. Dipake Tokopedia/Gojek/Instagram. Bukan framework — Next.js/Remix yang framework. Skill paling dicari di lowongan frontend Indonesia.
