Setiap halaman web yang Anda buka tersusun sebagai DOM (Document Object Model). Bentuknya berupa pohon elemen yang bisa dibaca dan diubah oleh JavaScript. Selama bertahun-tahun, membuat halaman menjadi interaktif berarti memerintahkan JavaScript mengubah elemen DOM satu per satu. Anda mencari sebuah elemen, mengganti isinya, menyembunyikan elemen lain, lalu memperbarui angka di pojok layar.

Pendekatan ini bekerja dengan baik selama halaman masih sederhana. Masalahnya muncul ketika tampilan punya banyak bagian yang saling bergantung. Sebuah tombol "hapus" mungkin harus memperbarui daftar, mengubah jumlah item, menonaktifkan tombol lain, sekaligus menampilkan notifikasi. Kode Anda perlahan berubah menjadi rangkaian instruksi panjang, dan satu langkah yang terlewat membuat tampilan tidak lagi cocok dengan data sebenarnya.

React JS adalah jawaban atas persoalan tersebut. Alih-alih memerintahkan perubahan langkah demi langkah, Anda cukup menjelaskan bentuk tampilan untuk setiap kondisi data, lalu React yang mengurus bagaimana layar menyesuaikan diri.

React JS Adalah Library, Bukan Framework

React JS adalah library JavaScript bersifat open source untuk membangun antarmuka pengguna (user interface) yang tersusun dari komponen. React dikembangkan dan dipakai oleh Meta, perusahaan induk Facebook, bersama komunitas pengembang di seluruh dunia. Fokusnya sempit dan disengaja: React hanya mengurus apa yang tampil di layar.

Satu hal kecil yang kerap membingungkan pemula adalah penamaannya. React adalah nama resmi yang dipakai dokumentasinya, sedangkan React JS dan ReactJS adalah sebutan populer untuk pustaka yang sama persis. Ketiganya merujuk hal yang identik, jadi Anda tidak perlu mencari perbedaan di antaranya.

Pertanyaan yang hampir selalu muncul di titik ini adalah apakah React JS adalah framework. Jawabannya tidak, dan perbedaan keduanya terletak pada siapa yang memegang kendali. Saat memakai library, Andalah yang memanggil kode orang lain kapan pun dibutuhkan. Saat memakai framework, kerangkanya yang memanggil kode Anda dan menentukan struktur proyek dari awal. Perbedaan ini kami bahas lebih dalam di artikel tentang apa itu framework.

Konsekuensinya nyata dan sering mengejutkan pemula. React tidak menyediakan sistem routing (pengaturan halaman berdasarkan alamat URL). React tidak menyediakan cara baku mengambil data dari server. React juga tidak mengatur validasi form atau penyimpanan data global antar halaman. Semua itu tetap menjadi keputusan Anda, entah dengan memilih pustaka tambahan atau menumpang pada framework yang sudah merangkumnya.

Karena React ditulis sepenuhnya dengan JavaScript, penguasaan bahasa dasarnya jauh lebih menentukan daripada hafalan sintaks React itu sendiri. Jika Anda pernah mengenal pola MVC (Model-View-Controller), React kira-kira hanya mengisi peran View. Bagian Model dan Controller dalam pola MVC tidak disentuh sama sekali.

Dari News Feed Facebook ke Separuh Developer Dunia

React lahir dari kebutuhan internal, bukan dari ambisi membuat produk populer. Jordan Walke, seorang engineer di Facebook, membangun prototipe bernama FaxJS untuk mengatasi kerumitan tampilan yang terus berubah. Hasilnya dipakai di News Feed Facebook pada 2011, lalu menyusul di Instagram pada 2012. Facebook merilisnya sebagai proyek open source pada Mei 2013 dalam acara JSConf US.

Perjalanannya tidak selalu mulus. Antara Oktober 2014 sampai September 2017, React memakai lisensi BSD yang disertai berkas PATENTS. Klausul di dalamnya dianggap memberi Facebook celah mencabut izin pemakaian jika penggunanya bersengketa paten dengan mereka. Kekhawatiran itu cukup serius sampai Apache Software Foundation menyatakannya tidak sejalan dengan kebijakan mereka.

Facebook akhirnya melisensikan ulang React di bawah MIT bersamaan dengan rilis React 16.0.0 pada 26 September 2017. Sejak itu urusan lisensi tidak lagi menjadi penghalang. Anda bisa membaca konsep lisensi terbuka semacam ini di artikel tentang open source.

Hari ini React sudah sampai di versi 19.2, dengan rilis mayor React 19 yang keluar pada 5 Desember 2024. Berdasarkan Stack Overflow Developer Survey 2025 yang melibatkan lebih dari 49.000 responden, React dipakai oleh 44,7 persen developer. Angka itu menempatkannya sebagai teknologi web paling banyak dipakai kedua setelah Node.js.

Cara Kerja React JS

Inti cara kerja React bisa diringkas dalam satu kalimat: Anda mendeskripsikan tampilan sebagai fungsi dari data, dan React menjaga agar layar selalu cocok dengan data tersebut. Empat konsep di bawah ini yang membuatnya berjalan.

Diagram alur cara kerja React JS dari perubahan state hingga pembaruan DOM asli.Diagram alur cara kerja React JS dari perubahan state hingga pembaruan DOM asli.

Satu siklus render React. Yang perlu diperhatikan: React menyusun ulang gambaran tampilan secara utuh, tetapi yang benar-benar menyentuh DOM asli hanya selisihnya.

Komponen: Potongan Antarmuka yang Bisa Dipakai Ulang

Komponen adalah unit terkecil pembangun tampilan di React. Bentuknya sekadar fungsi JavaScript yang mengembalikan gambaran tampilan. Tombol, kartu produk, kolom pencarian, hingga seluruh halaman semuanya adalah komponen.

Berikut contoh komponen sederhana yang menampilkan sapaan:

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

Nilai nama di atas disebut props, yaitu data yang dikirim dari komponen induk ke komponen anak, mirip parameter pada fungsi biasa. Komponen yang sama bisa dipanggil berkali-kali dengan props berbeda.

JSX: Menulis Tampilan di Dalam JavaScript

Perhatikan bahwa contoh tadi menaruh <h1> di tengah kode JavaScript. Sintaks ini bernama JSX (JavaScript XML), dan ia bukan HTML meskipun sangat mirip. Sebelum dijalankan, JSX dikompilasi menjadi pemanggilan fungsi JavaScript biasa oleh perkakas build.

Kemiripan dengan HTML memang disengaja agar mudah dibaca, tetapi ada beberapa perbedaan yang perlu diperhatikan. Atribut class menjadi className, dan setiap kurung kurawal berisi ekspresi JavaScript yang akan dievaluasi. JSX sebenarnya opsional, namun hampir semua proyek React memakainya karena alternatifnya jauh lebih melelahkan untuk dibaca.

State dan Alur Data Satu Arah

Props hanya mengalir dari induk ke anak dan tidak bisa diubah oleh penerimanya. Untuk data yang berubah seiring interaksi, React menyediakan state, semacam ingatan yang dimiliki sebuah komponen. Setiap kali state berubah, React otomatis menjalankan ulang komponen tersebut agar tampilannya menyesuaikan.

Aliran data di React berjalan satu arah, dari komponen di atas menuju komponen di bawahnya. Pola ini kadang terasa bertele-tele karena data harus diturunkan lewat beberapa lapis komponen. Imbalannya sepadan: ketika ada nilai yang salah di layar, Anda hanya perlu menelusuri satu jalur ke atas untuk menemukan sumbernya.

Virtual DOM: Menebus Biaya Model Deklaratif

Virtual DOM sering diperkenalkan sebagai alasan React "lebih cepat", padahal itu bukan gambaran yang tepat. Memanipulasi DOM secara langsung dan cermat justru selalu lebih cepat daripada melalui React.

Duduk perkaranya begini. Karena Anda hanya mendeskripsikan bentuk akhir tampilan, React perlu menggambar ulang seluruh gambaran itu setiap kali data berubah. Menerapkan seluruh gambaran ke DOM asli akan sangat mahal, sebab perubahan DOM memicu perhitungan tata letak dan penggambaran ulang oleh browser.

Di sinilah Virtual DOM masuk. React menyimpan salinan ringan struktur tampilan dalam bentuk objek JavaScript di memori. Saat state berubah, React membuat salinan baru, membandingkannya dengan yang lama, lalu menghitung perbedaan minimal di antara keduanya. Proses pembandingan ini disebut rekonsiliasi. Hanya selisih itulah yang benar-benar diterapkan ke DOM asli.

Jadi Virtual DOM bukan trik untuk mengalahkan DOM biasa. Ia adalah cara React membayar ongkos dari kenyamanan yang ditawarkannya, sehingga model deklaratif tetap masuk akal dari sisi performa. Yang React jual sesungguhnya adalah kemudahan berpikir, bukan kecepatan mentah.

Fungsi React JS dan Kapan Sebaiknya Dipakai

Dalam praktik, React paling banyak dipakai untuk membangun SPA (Single Page Application). Aplikasi jenis ini memuat halaman sekali di awal, lalu memperbarui isinya tanpa reload. Dashboard admin, aplikasi chat, marketplace, dan panel analitik adalah contoh yang cocok. Ciri umumnya sama: banyak bagian layar yang berubah cepat mengikuti tindakan pengguna.

React juga menjadi fondasi untuk membangun aplikasi mobile lewat React Native, sehingga cara berpikir yang sudah Anda kuasai dapat dipakai lintas platform. Di sisi data, React biasanya berpasangan dengan API yang disediakan backend, entah itu Laravel, Node.js, atau layanan lain.

Namun React tidak selalu jawaban yang tepat. Untuk landing page statis, blog sederhana, atau situs profil perusahaan yang isinya jarang berubah, React justru menambah beban tanpa memberi manfaat setimpal. Halaman semacam itu lebih baik dibangun dengan HTML dan CSS biasa, atau dengan CMS yang sudah matang. Ukuran kasarnya: jika tampilan Anda tidak punya banyak kondisi yang berubah-ubah, kerumitan React tidak akan terbayar.

Kelebihan React JS

  1. Komponen yang bisa dipakai ulang: Sekali sebuah tombol atau kartu produk dibuat dengan benar, ia dapat dipanggil di mana saja dengan props berbeda. Perbaikan di satu tempat langsung berlaku di seluruh aplikasi.
  2. Model deklaratif yang mudah dilacak: Anda mendeskripsikan tampilan untuk tiap kondisi data, bukan menyusun urutan perubahan. Bug "tampilan tidak sesuai data" jauh lebih jarang terjadi karena tidak ada langkah yang bisa terlewat.
  3. Ekosistem dan lapangan kerja yang luas: Dengan pemakaian 44,7 persen menurut Stack Overflow Developer Survey 2025, hampir setiap kebutuhan umum sudah ada pustaka siap pakainya.
  4. Satu konsep untuk web dan mobile: Komponen, props, dan state bekerja dengan cara yang sama di React Native. Pengetahuan Anda tidak hangus saat berpindah platform.
  5. Pengembangan yang masih aktif: React Compiler v1.0 yang dirilis pada 7 Oktober 2025 adalah contohnya. Perkakas ini mengurus optimasi memoization (penyimpanan hasil perhitungan agar tidak diulang) secara otomatis, pekerjaan yang sebelumnya harus ditulis tangan. Di Meta Quest Store, pemakaiannya menghasilkan perbaikan 12 persen pada pemuatan awal dan interaksi 2,5 kali lebih cepat.

Kelemahan dan Hal yang Perlu Anda Pertimbangkan

Sisi lain React justru berakar pada sifatnya sebagai library, dan penting Anda ketahui sebelum memilihnya.

  1. React hanya sepotong dari yang Anda butuhkan: Karena routing, pengambilan data, dan pengelolaan state global tidak disediakan, keputusan teknis menumpuk sejak hari pertama. Dua proyek React bisa terlihat sangat berbeda hanya karena pilihan pustaka pendukungnya.
  2. Kesulitannya ada di ekosistem, bukan di React: Konsep inti React sebenarnya bisa dipahami dalam hitungan hari. Yang memakan waktu berbulan-bulan adalah memahami perkakas di sekitarnya, mulai dari build tool, manajemen paket, sampai pola pengambilan data.
  3. Proyek tidak bisa sekadar dibuka di browser: JSX harus dikompilasi lebih dulu, sehingga Anda selalu membutuhkan proses build. Kemewahan menyunting satu berkas HTML lalu langsung menyegarkan browser tidak berlaku di sini.
  4. Beban awal lebih berat: Pengguna harus mengunduh berkas JavaScript React sebelum melihat apa pun. Pada koneksi lambat atau perangkat kelas bawah, halaman yang dibangun dengan HTML biasa akan tampil lebih dulu.
  5. Perkakasnya berubah cukup cepat: Cara yang dianggap benar tiga tahun lalu belum tentu masih dianjurkan hari ini. Tutorial lama yang tidak diperbarui berisiko menyesatkan, sebagaimana akan Anda lihat pada bagian berikutnya.

React JS, React Native, dan Next.js: Tiga Nama yang Sering Tertukar

Ketiganya sering disebut dalam satu tarikan napas, padahal kedudukannya berbeda. Kekeliruan yang cukup umum adalah menganggap React Native sebagai salah satu fitur React JS. Anggapan itu tidak tepat, dan perbedaan React JS dan React Native justru terletak pada hasil akhir yang dibangun keduanya.

React JS adalah library untuk membangun antarmuka yang berjalan di browser. React Native adalah framework terpisah untuk membangun aplikasi Android dan iOS. React Native memakai React sebagai library-nya, tetapi hasil akhirnya bukan elemen HTML melainkan komponen antarmuka asli milik sistem operasi. Anda menulis <View> dan <Text>, bukan <div> dan <p>.

Next.js adalah framework web yang dibangun di atas React JS. Ia mengisi tepat bagian-bagian yang sengaja tidak disediakan React: routing berbasis struktur folder, rendering di sisi server, serta pengaturan build. Karena itu Next.js bukan pesaing React, melainkan pelengkapnya. Perbandingan "React atau Next.js" sebenarnya adalah pertanyaan tentang seberapa banyak keputusan teknis yang ingin Anda ambil sendiri.

Diagram perbandingan React JS, React Native, dan Next.js dengan lapisan React sebagai dasar.Diagram perbandingan React JS, React Native, dan Next.js dengan lapisan React sebagai dasar.

React Native dan Next.js sama-sama berdiri di atas React, sehingga keduanya bukan pengganti React melainkan pelengkap untuk kebutuhan yang berbeda.

Cara Mulai Menggunakan React JS

Perintah npx create-react-app yang dulu menjadi pintu masuk standar sekarang tidak layak dipakai untuk proyek baru. Tim React resmi mempensiunkan Create React App pada 14 Februari 2025. Perkakas itu nyaris tidak dirawat sejak 2021, dan pemasangannya gagal di React 19 akibat bentrok peer dependency dengan pustaka pengujian bawaannya. Jika sebuah tutorial masih mengajarkan perintah tersebut, materinya sudah tertinggal.

Untuk proyek baru, dokumentasi resmi React menganjurkan memulai dari framework seperti Next.js atau React Router v7. Jika Anda ingin belajar React JS murni tanpa lapisan tambahan, cara install React JS yang paling ringan saat ini adalah lewat Vite. Tiga langkah di bawah ini cukup untuk sampai ke aplikasi yang berjalan.

Langkah #1: Siapkan Node.js

Pastikan Node.js sudah terpasang, karena seluruh perkakas React berjalan di atasnya. Pemasangannya sekaligus menyertakan npm sebagai pengelola paket. Periksa versinya dengan perintah berikut:

Bash
node -v
npm -v

Jika keduanya menampilkan nomor versi, Anda siap melanjutkan.

Langkah #2: Install React JS dengan Vite

Jalankan perintah di bawah ini, lalu pilih React sebagai kerangka dan JavaScript sebagai varian saat ditanya:

Bash
npm create vite@latest proyek-react-pertama

Perintah ini menyiapkan struktur proyek beserta konfigurasi build yang sudah sesuai dengan React versi terbaru.

Langkah #3: Pasang Dependensi dan Jalankan

Masuk ke folder proyek, pasang seluruh paket yang dibutuhkan, lalu nyalakan server pengembangan:

Bash
cd proyek-react-pertama
npm install
npm run dev

Alamat lokal akan muncul di terminal, biasanya http://localhost:5173. Buka alamat itu di browser dan aplikasi React pertama Anda sudah berjalan. Setiap kali berkas disimpan, tampilan di browser ikut diperbarui tanpa perlu menyegarkan halaman.

Langkah #4: Pahami Hasil Buildnya

Ketika aplikasi siap dipublikasikan, jalankan perintah build:

Bash
npm run build

Hasilnya berupa folder berisi HTML, CSS, dan JavaScript statis. Karena tidak ada proses server yang perlu berjalan, berkas ini dapat ditaruh di layanan web hosting biasa seperti halnya website statis. Berbeda ceritanya jika Anda memakai Next.js dengan rendering di sisi server, sebab Node.js harus tetap hidup untuk melayani permintaan. Kebutuhan seperti itu menuntut lingkungan dengan akses root, misalnya VPS Indonesia.

Sebelum menekuni React, pastikan dasar JavaScript Anda kokoh, khususnya fungsi, array method seperti map dan filter, destructuring, serta konsep asynchronous. Sebagian besar rasa frustrasi saat belajar React sebenarnya berasal dari JavaScript yang belum matang, bukan dari React itu sendiri.

Pertanyaan yang Sering Muncul Seputar React JS

Apakah React JS termasuk front-end atau back-end? React sepenuhnya berada di sisi front-end, yaitu bagian yang dilihat dan disentuh pengguna. Data tetap harus disediakan oleh backend melalui API.

Apakah harus mahir JavaScript dulu sebelum belajar React? Tidak harus mahir, tetapi dasarnya wajib kuat. Menguasai fungsi, array method, dan konsep asynchronous akan memangkas waktu belajar React secara signifikan.

Berapa lama waktu yang dibutuhkan untuk belajar React JS? Konsep inti seperti komponen, props, dan state umumnya bisa dipahami dalam satu sampai dua minggu bagi yang sudah menguasai JavaScript. Untuk siap mengerjakan proyek nyata beserta ekosistemnya, siapkan waktu sekitar tiga sampai enam bulan.

Apakah React masih relevan atau sudah tergantikan? Masih sangat relevan. Pemakaiannya tercatat 44,7 persen pada Stack Overflow Developer Survey 2025, dan pengembangannya tetap aktif dengan rilis React 19.2 serta React Compiler v1.0 pada Oktober 2025.

Apakah React gratis untuk proyek komersial? Gratis sepenuhnya. React berlisensi MIT sejak September 2017, yang mengizinkan pemakaian komersial tanpa biaya maupun kewajiban membuka kode Anda.

Kesimpulan

React JS adalah library JavaScript untuk membangun antarmuka pengguna berbasis komponen, bukan framework yang menyediakan segalanya. Kekuatannya terletak pada model komponen yang bisa dipakai ulang dan pendekatan deklaratif yang membuat tampilan selalu cocok dengan data. Konsekuensinya, urusan routing, pengambilan data, dan perkakas build tetap menjadi tanggung jawab Anda.

Pilih React ketika Anda membangun antarmuka dengan banyak bagian yang berubah mengikuti interaksi pengguna. Lewatkan React ketika halaman Anda pada dasarnya statis, sebab HTML dan CSS biasa akan lebih cepat dan lebih ringan. Jika memutuskan untuk mulai, mulailah dari Vite atau Next.js, dan tinggalkan panduan yang masih mengandalkan Create React App.

Semoga artikel ini membantu.