BAB 1: Pengenalan React

Sebelum ada React, membangun antarmuka web yang dinamis terasa seperti gulat dengan tali yang terus memanjang. Kamu mengubah satu bagian halaman, lalu harus memastikan dua belas bagian lainnya ikut berubah dengan benar. Tidak ada satu cara pun yang dianggap standar — setiap tim punya pendekatan sendiri, dan hasilnya sering berakhir dengan kode yang sulit diprediksi dan lebih sulit dipelihara.

React lahir dari kebutuhan nyata, bukan dari teori. Dan memahami latar belakang itu akan membantumu mengerti mengapa React dirancang seperti sekarang — bukan hanya tahu caranya, tapi paham alasannya.

Dari Newsfeed Facebook ke Library Dunia

Tahun 2011, tim Facebook menghadapi masalah yang terdengar sederhana tapi berdampak besar: bagaimana memperbarui Newsfeed secara real-time — notifikasi, komentar, like, pesan — tanpa membuat halaman terasa lambat atau kodenya menjadi mimpi buruk?

Seorang engineer bernama Jordan Walke mulai bereksperimen dengan pendekatan berbeda. Alih-alih memperbarui DOM secara langsung setiap kali ada perubahan data, ia mencoba membuat representasi antarmuka dalam bentuk struktur yang bisa dibandingkan dan diperbarui secara cerdas. Eksperimen itu berkembang menjadi apa yang kita kenal sebagai React.

React pertama kali digunakan secara internal di Facebook pada 2011. Instagram, yang diakuisisi Facebook, menjadi aplikasi publik pertama yang menggunakannya pada 2012. Baru pada Juli 2013, Facebook merilis React sebagai proyek open source — versi 0.3.0 — dan industri web tidak pernah lagi sama setelah hari itu.

Hari ini, React digunakan oleh perusahaan dari berbagai ukuran: dari startup yang baru launching hingga Netflix, Airbnb, dan tentu saja Facebook/Meta sendiri. Versi terbaru saat ebook ini ditulis adalah React 19 (Desember 2024), yang membawa sejumlah perubahan besar — termasuk React Compiler yang mengotomasi optimasi performa.

Apa Sebenarnya React Itu?

React adalah JavaScript library untuk membangun antarmuka pengguna (user interface). Bukan framework — library. Perbedaan ini penting: framework mendikte struktur keseluruhan aplikasimu, sementara library memberi satu kemampuan spesifik dan membiarkan kamu memutuskan sisanya.

Kemampuan spesifik yang React berikan adalah satu hal: membangun komponen UI yang bisa dikomposisi.

Komponen adalah unit dasar React. Setiap tombol, setiap kartu produk, setiap dropdown — semuanya bisa menjadi komponen tersendiri yang punya logika dan tampilannya sendiri, bisa dipakai ulang, dan bisa digabung membentuk halaman yang kompleks. Kamu tidak lagi berpikir dalam satuan “halaman”, tapi dalam satuan “komponen yang saling menyusun”.

Bagaimana React Bekerja: Virtual DOM

Ini adalah konsep yang membedakan React dari pendekatan manipulasi DOM konvensional.

Browser menyimpan struktur halaman web dalam bentuk pohon node yang disebut DOM (Document Object Model). Ketika kamu mengubah sesuatu di halaman — misalnya memperbarui teks sebuah paragraf — browser harus menghitung ulang layout, menggambar ulang elemen terkait, dan kadang mempengaruhi elemen-elemen di sekitarnya. Proses ini mahal secara komputasi, terutama kalau dilakukan berkali-kali dalam waktu singkat.

React menggunakan strategi yang lebih cerdas melalui apa yang disebut Virtual DOM:

Virtual DOM adalah representasi antarmuka dalam bentuk objek JavaScript — bukan elemen HTML sungguhan. Ketika state atau data berubah, React tidak langsung menyentuh DOM browser. Ia lebih dulu membuat Virtual DOM baru, membandingkannya dengan Virtual DOM sebelumnya (proses ini disebut diffing), lalu menerapkan perubahan seminimal mungkin ke DOM yang sesungguhnya.

Hasilnya: perubahan yang terasa instan bagi pengguna, tanpa membebani browser dengan operasi DOM yang tidak perlu.

React Bukan Satu-satunya, Tapi Ada Alasannya

Ada banyak library dan framework JavaScript lain yang bisa kamu gunakan: Vue, Angular, Svelte, Solid. Masing-masing punya filosofi dan kelebihannya sendiri. Tapi beberapa alasan mengapa React tetap menjadi pilihan yang solid — terutama untuk pemula yang ingin memasuki pasar kerja:

• Ekosistem yang matang — ribuan library pendukung, dari routing, manajemen state, hingga UI component library
• Komunitas besar — dokumentasi berkualitas tinggi di react.dev, forum, dan sumber belajar dalam berbagai bahasa
• Permintaan pasar yang tinggi — React konsisten masuk daftar skill yang paling banyak dicari di job posting frontend
• Fondasi untuk framework modern — memahami React membuka pintu ke Next.js, Remix, dan framework-framework yang dibangun di atasnya

Ini bukan berarti React sempurna. Kurva belajarnya nyata, terutama di bagian hooks dan manajemen state. Tapi justru itulah yang akan kita lalui bersama di ebook ini — satu langkah pada satu waktu.

Apa yang Perlu Kamu Siapkan

React ditulis dalam JavaScript. Sebelum belajar React, kamu perlu merasa nyaman dengan fondasi berikut:

HTML dan CSS — kamu harus bisa menulis struktur halaman dan menstyle elemen. Tidak perlu ahli, tapi paham dasar-dasarnya.

JavaScript — ini yang paling krusial. React menggunakan banyak fitur JavaScript modern: arrow function, destructuring, spread operator, array methods seperti .map() dan .filter(), dan modul ES. Jika istilah-istilah ini asing, sebaiknya perkuat JavaScript-mu dulu sebelum lanjut.

Satu hal yang tidak perlu kamu khawatirkan sekarang: kamu tidak perlu belajar TypeScript untuk memulai. Ebook ini menggunakan JavaScript biasa. TypeScript akan lebih masuk akal setelah kamu memahami React itu sendiri.

Latihan

Sebelum masuk ke kode React di bab selanjutnya, luangkan waktu untuk refleksi singkat:

1. Buka satu website yang kamu sering gunakan — bisa Twitter/X, Tokopedia, atau aplikasi apapun. Coba identifikasi bagian-bagian antarmuka yang kira-kira bisa dijadikan “komponen” tersendiri (tombol, kartu produk, navigasi, dll). Berapa banyak komponen yang kamu temukan?

2. Di browser kamu, buka DevTools (F12), pilih tab “Elements”, dan coba ubah teks sebuah elemen secara langsung. Perhatikan apa yang terjadi di halaman. Inilah yang dimaksud manipulasi DOM — sesuatu yang React lakukan secara otomatis dan terkelola.

3. Jika kamu belum pernah menggunakan terminal, coba buka terminal di komputermu dan jalankan node -v. Jika muncul nomor versi, Node.js sudah terpasang — kita butuh ini di bab selanjutnya.

Penutup

React bukan sekedar cara baru menulis JavaScript — ia memperkenalkan cara berpikir yang berbeda tentang antarmuka. Bukan lagi “halaman yang perlu diperbarui”, tapi “komponen yang merespons perubahan data”. Pergeseran pola pikir ini yang akan menjadi teman kamu sepanjang perjalanan belajar React.

Di bab selanjutnya, kita akan berhenti berbicara tentang React dan mulai benar-benar menggunakannya. Kamu akan menyiapkan lingkungan pengembangan, membuat proyek React pertama dengan Vite, dan melihat sendiri seperti apa struktur proyek React yang sesungguhnya — lengkap dengan penjelasan untuk setiap file yang Vite buat secara otomatis.

Referensi

1. 1Dokumentasi Resmi React — react.dev
2. 2Virtual DOM dan Internal — Dokumentasi React (Bahasa Indonesia)
3. 3React 19 — Blog Resmi React