Menurut dokumentasi resminya di react.dev, React adalah library JavaScript untuk membangun antarmuka pengguna (UI). Kata kuncinya ada dua: library dan UI.

React hanya mengurus satu lapisan aplikasi, yaitu tampilan. React tidak punya fitur bawaan untuk pindah halaman (routing), memanggil API, atau menyimpan data ke server. Untuk hal-hal itu kamu memilih sendiri pustaka tambahan dari ekosistemnya.

Bedanya library dan framework sering dijelaskan begini:

• Library: kamu yang memanggil kode library saat butuh. Kamu memegang kendali struktur aplikasi.
• Framework: framework yang memanggil kodemu. Framework menentukan struktur folder, cara routing, cara mengambil data, dan seterusnya.

Analogi gampangnya: library itu seperti kotak perkakas. Kamu ambil obeng saat perlu obeng. Framework itu seperti rumah siap huni dengan denah yang sudah ditentukan; kamu tinggal mengisi kamarnya.

Inti cara berpikir React ada tiga:

1. Berbasis komponen. UI dipecah jadi potongan kecil yang mandiri, misalnya Navbar, KartuProduk, Tombol. Potongan ini bisa dipakai berulang.
2. Deklaratif. Kamu menulis "tampilannya harus seperti apa untuk data ini", bukan "langkah-langkah mengubah DOM".
3. Tampilan mengikuti data. Saat data (state) berubah, React memperbarui bagian layar yang terdampak secara otomatis.

Contoh kecil supaya kamu punya gambaran. Ini sebuah komponen React:

function Sapaan({ nama }) {
  return <h1>Halo, {nama}!</h1>;
}

// Dipakai di komponen lain:
<Sapaan nama="Rina" />
// Tampil di layar: Halo, Rina!

Sintaks yang mirip HTML di dalam JavaScript itu namanya JSX. Tenang, JSX dibahas tuntas di bab berikutnya. Untuk sekarang cukup tahu: satu komponen itu cuma fungsi yang mengembalikan tampilan.

React lahir dari masalah nyata di Facebook. News feed mereka makin rumit, dan menjaga tampilan tetap sinkron dengan data yang terus berubah jadi sumber bug. Berikut perjalanannya:

Titik balik terbesar adalah Hooks di awal 2019. Sebelumnya, komponen yang butuh state wajib ditulis sebagai class component dengan this.state dan method lifecycle seperti componentDidMount. Setelah Hooks, cukup fungsi biasa plus useState atau useEffect.

// Cara modern: function component + hook
import { useState } from "react";

function Penghitung() {
  const [angka, setAngka] = useState(0);
  return <button onClick={() => setAngka(angka + 1)}>Klik: {angka}</button>;
}

Di kelas ini kita hanya memakai function component dan hooks. Class component masih bisa kamu temui di kode lama, tapi bukan cara menulis proyek baru.

Ada banyak alasan React jadi salah satu skill front-end paling dicari:

• Komponen bisa dipakai ulang. Bikin KartuProduk sekali, pakai di halaman beranda, pencarian, dan keranjang. Mengubah desainnya cukup di satu tempat.
• Performa terjaga. React membandingkan tampilan lama dan baru di memori dulu (Virtual DOM), lalu hanya mengubah bagian DOM yang benar-benar berbeda.
• Ekosistem luas. Mau routing, form, fetching data, animasi, sampai testing, pustakanya sudah matang.
• Cukup JavaScript. Tidak ada bahasa template khusus. Perulangan pakai map, percabangan pakai if atau ternary. Skill JavaScript kamu langsung terpakai.
• Sekali belajar, banyak platform. Konsep yang sama dipakai di web, mobile lewat React Native, bahkan desktop.
• Komunitas dan karier. Banyak perusahaan, dari Meta, Netflix, Airbnb sampai startup lokal, memakai React. Lowongan kerja dan materi belajarnya melimpah.

Satu catatan jujur: karena React cuma library, kamu harus membuat lebih banyak keputusan sendiri (pakai router apa, state management apa). Buat pemula ini bisa terasa membingungkan. Kabar baiknya, ada pilihan "default" yang umum dipakai, dan kita bahas di bawah.

Tiga nama ini paling sering dibandingkan. Ketiganya sama-sama mampu membangun aplikasi modern.

Cara membaca tabel ini:

• Angular memberi paket lengkap: routing, HTTP client, form, dependency injection. Cocok untuk tim enterprise yang ingin semua orang menulis dengan pola yang sama.
• Vue terkenal ramah pemula dengan template mirip HTML dan dokumentasi yang rapi.
• React paling fleksibel dan ekosistemnya paling besar, tapi kamu yang merakit potongannya.

Jangan terjebak debat "mana yang terbaik". Pilihan teknologi ditentukan kebutuhan proyek, keahlian tim, dan dukungan jangka panjang. Konsep seperti komponen, props, dan state ada di ketiganya, jadi ilmu dari kelas ini tetap berguna kalau suatu saat kamu pindah.

React inti sengaja dibuat minimal. Kekuatannya justru ada di alat-alat sekitarnya. Empat yang paling penting untuk pemula:

Masih ada yang lain: TypeScript untuk tipe data, Tailwind CSS untuk styling, Redux Toolkit untuk state global yang besar, MUI untuk komponen siap pakai, serta Vitest/Jest dan React Testing Library untuk pengujian.

Peta sederhananya: belajar React dasar dulu dengan Vite, lalu tambahkan React Router saat butuh banyak halaman, TanStack Query saat sering mengambil data API, dan Next.js saat butuh SEO atau render di server.

Penting: create-react-app (CRA) sudah usang dan tidak direkomendasikan lagi oleh tim React. Kalau menemukan tutorial lama yang memakai npx create-react-app, ganti dengan Vite atau Next.js.

• Menganggap React framework lengkap, lalu bingung kenapa tidak ada fitur routing atau HTTP bawaan.
• Belajar dari tutorial lama yang masih memakai class component atau create-react-app.
• Langsung lompat ke Next.js sebelum paham komponen, props, dan state. Next.js menambah banyak konsep sekaligus.
• Lompat ke React sebelum JavaScript kuat. React sangat bergantung pada arrow function, destructuring, spread, map, dan filter.
• Terlalu lama memilih framework. Konsepnya mirip; yang penting mulai membangun sesuatu.