Apa itu React JS? Pengertian, Sejarah, Fitur, dan Cara Kerjanya

React JS adalah library JavaScript open source untuk membangun antarmuka pengguna (UI) yang interaktif. Dengan React, tampilan sebuah website atau aplikasi dipecah menjadi komponen-komponen kecil yang bisa dipakai ulang, lalu React memperbarui bagian layar yang berubah secara otomatis ketika data berubah.

React awalnya dikembangkan di Facebook (kini Meta) dan sekarang dipelihara oleh Meta bersama komunitas pengembang di seluruh dunia. React dipakai untuk membuat aplikasi web satu halaman (single page application), website yang dirender di server melalui framework seperti Next.js, hingga aplikasi seluler melalui React Native.

Artikel ini membahas pengertian React JS, sejarahnya, fitur utama, kelebihan, cara kerja, cara memulai proyek, serta perbedaannya dengan React Native.

Apa itu React JS?

React JS (sering ditulis React atau ReactJS) adalah library, bukan framework lengkap. Fokus React adalah lapisan tampilan: menentukan apa yang muncul di layar berdasarkan data, lalu memperbaruinya ketika data berubah. Kebutuhan lain seperti routing (perpindahan halaman), pengambilan data, atau rendering di server biasanya ditangani oleh library tambahan atau framework berbasis React seperti Next.js dan React Router.

Agar lebih mudah dipahami, bayangkan sebuah unggahan di Instagram. Satu unggahan terdiri atas beberapa bagian: foto, tombol suka, jumlah suka, kolom komentar, dan tombol bagikan. Di React, setiap bagian itu bisa dibuat sebagai komponen tersendiri. Ketika Anda menekan tombol suka, hanya komponen jumlah suka yang diperbarui. Halaman tidak perlu dimuat ulang, dan bagian lain tetap seperti semula.

Pendekatan berbasis komponen inilah yang membuat React populer untuk membangun antarmuka yang kompleks namun tetap rapi.

Sejarah React JS

React dibuat oleh Jordan Walke, seorang software engineer di Facebook. React mulai dipakai di News Feed Facebook pada 2011, lalu di Instagram pada 2012. Pada Mei 2013, Facebook merilis React sebagai proyek open source di ajang JSConf US.

Sejak itu React terus berkembang. Beberapa tonggak pentingnya antara lain:

• 2015: React Native dirilis untuk membangun aplikasi seluler dengan konsep yang sama.
• 2019 (React 16.8): Hooks diperkenalkan sehingga komponen fungsi bisa memiliki state dan logika lain tanpa kelas. Sejak saat itu, komponen fungsi dengan Hooks menjadi cara standar menulis React.
• 2022 (React 18): hadir concurrent rendering yang membuat pembaruan tampilan lebih responsif.
• 2024 (React 19): React Server Components dan Actions menjadi bagian dari versi stabil, umumnya dipakai melalui framework seperti Next.js.

Baca Juga: Apa itu DOM?

Fitur Utama React JS

(Foto: Unsplash)

1. Berbasis Komponen

Antarmuka dipecah menjadi komponen yang terpisah dan dapat digunakan kembali, misalnya tombol, formulir, kartu produk, atau menu navigasi. Komponen kecil digabung menjadi komponen yang lebih besar hingga membentuk satu halaman utuh. Setiap komponen memiliki logika dan tampilannya sendiri sehingga kode lebih mudah dirawat.

2. JSX

JSX adalah ekstensi sintaksis yang memungkinkan Anda menulis struktur mirip HTML langsung di dalam kode JavaScript. Dengan JSX, logika dan tampilan sebuah komponen berada di satu tempat sehingga lebih mudah dibaca. Contoh sederhana:

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

3. Virtual DOM

React menyimpan representasi ringan dari tampilan di memori yang disebut Virtual DOM. Ketika data berubah, React membandingkan versi lama dan versi baru, lalu hanya menerapkan perubahan yang diperlukan ke DOM sebenarnya. Cara ini membuat pembaruan tampilan lebih efisien.

4. State dan Props

Props adalah data yang dikirim dari komponen induk ke komponen anak, sedangkan state adalah data milik komponen yang dapat berubah, misalnya isi kolom input atau jumlah suka. Pemisahan ini membuat alur data dalam aplikasi lebih jelas.

5. Aliran Data Satu Arah

Data di React mengalir dari komponen induk ke komponen anak (one-way data flow). Pola ini memudahkan Anda melacak dari mana sebuah data berasal dan mengapa tampilan berubah.

6. Hooks

Hooks adalah fungsi khusus seperti useState dan useEffect yang memungkinkan komponen fungsi menyimpan state, menjalankan efek samping (misalnya mengambil data dari API), dan mengakses fitur React lainnya. Hooks menggantikan pola lama berupa lifecycle method pada komponen kelas seperti componentDidMount() dan componentDidUpdate(), yang kini hanya ditemui di kode lama.

7. Rendering di Server

Melalui framework seperti Next.js, komponen React bisa dirender di server (Server-Side Rendering) atau menggunakan React Server Components. Hasilnya, halaman tampil lebih cepat dan kontennya lebih mudah dibaca mesin pencari, karena HTML sudah tersedia sejak awal.

Kelebihan React JS

• Kode dapat digunakan kembali. Komponen yang sudah dibuat bisa dipakai di banyak halaman, sehingga pengembangan lebih cepat dan tampilan lebih konsisten.
• Mudah dipelajari bagi yang menguasai JavaScript. React pada dasarnya adalah JavaScript, sehingga pengembang yang sudah memahami JavaScript modern dapat beradaptasi dengan cepat.
• Fleksibel. React tidak memaksakan arsitektur tertentu. Anda bebas memilih library pendamping untuk routing, manajemen state (misalnya Redux atau Zustand), maupun styling.
• Bisa diadopsi bertahap. React dapat ditambahkan ke sebagian halaman website yang sudah ada tanpa harus membangun ulang seluruhnya.
• Open source. React dirilis dengan lisensi MIT sehingga bebas dipakai untuk proyek pribadi maupun komersial.
• Ekosistem dan komunitas besar. Tersedia banyak dokumentasi, tutorial, komponen siap pakai, dan alat bantu yang memudahkan pengembangan.
• Satu konsep untuk web dan seluler. Pemahaman React dapat dibawa ke pengembangan aplikasi seluler melalui React Native.

Cara Kerja React JS

Secara garis besar, cara kerja React dapat dijelaskan dalam beberapa langkah berikut.

1. Membuat Komponen

Pengembang menulis komponen sebagai fungsi JavaScript yang mengembalikan JSX. Komponen bisa sederhana, seperti tombol, atau kompleks, seperti tabel data dengan filter.

2. Render Awal

Saat aplikasi pertama kali dimuat, React memanggil komponen-komponen tersebut dan membangun pohon Virtual DOM berdasarkan JSX yang dikembalikan. Dari pohon itu, React membuat elemen DOM yang sebenarnya di browser.

3. Perubahan State Memicu Render Ulang

Ketika state atau props berubah, misalnya karena pengguna mengklik tombol, React memanggil ulang komponen yang terdampak untuk menghasilkan tampilan versi terbaru.

4. Membandingkan Versi Lama dan Baru

React membandingkan Virtual DOM yang baru dengan versi sebelumnya. Proses ini disebut reconciliation atau diffing, yaitu mencari bagian mana saja yang benar-benar berubah.

5. Memperbarui DOM Seperlunya

React hanya menerapkan perubahan minimal ke DOM sebenarnya. Bagian halaman yang tidak berubah dibiarkan apa adanya sehingga kinerja tetap terjaga.

6. Menangani Interaksi dan Efek

Interaksi pengguna seperti klik atau input formulir ditangani lewat event handler. Sementara itu, efek samping seperti mengambil data dari server atau memasang langganan data dijalankan melalui Hooks seperti useEffect.

Cara Memulai Proyek React JS

1. Coba Secara Online

Cara tercepat untuk mencoba React adalah melalui playground online seperti CodeSandbox atau StackBlitz. Anda bisa langsung menulis komponen di browser tanpa memasang apa pun.

2. Membuat Proyek dengan Vite

Create React App (create-react-app) sudah dinyatakan usang (deprecated) sejak Februari 2025 dan tidak disarankan lagi untuk proyek baru. Untuk proyek React murni, Anda dapat memakai build tool seperti Vite.

Pastikan Node.js versi LTS terbaru sudah terpasang di komputer Anda, lalu jalankan perintah berikut di terminal:

npm create vite@latest proyek-baru -- --template react

Setelah proyek dibuat, masuk ke folder proyek, pasang dependensi, lalu jalankan server pengembangan:

cd proyek-baru
npm install
npm run dev

Perhatikan bahwa nama proyek sebaiknya ditulis dengan huruf kecil dan tanda hubung, karena npm tidak menerima nama paket dengan huruf kapital.

3. Menggunakan Framework React

Untuk aplikasi yang lebih lengkap, dokumentasi resmi React menyarankan framework seperti Next.js atau React Router. Framework ini sudah menyediakan routing, pengambilan data, dan rendering di server. Contoh membuat proyek Next.js:

npx create-next-app@latest proyek-baru

Perbedaan React JS dan React Native

React JS dan React Native sama-sama memakai konsep komponen, JSX, props, state, dan Hooks. Perbedaannya terletak pada platform tujuan dan hasil akhirnya.

Aspek	React JS	React Native
Platform	Browser (website dan aplikasi web)	Aplikasi seluler Android dan iOS
Elemen tampilan	Elemen HTML seperti <div> dan <p>	Komponen native seperti <View> dan <Text>
Styling	CSS	Objek gaya JavaScript yang mirip CSS
Hasil akhir	Halaman web yang berjalan di browser	Aplikasi yang memakai komponen antarmuka native

Dengan React Native, Anda menulis kode JavaScript yang dirender menjadi komponen antarmuka native di perangkat. React Native juga bisa diintegrasikan ke aplikasi Android atau iOS yang sudah ada, sehingga tidak harus dipakai hanya untuk aplikasi baru. Dokumentasi resmi React Native menyediakan panduan khusus untuk integrasi tersebut.

Kesimpulan

React JS adalah library JavaScript untuk membangun antarmuka pengguna berbasis komponen. Dengan JSX, Virtual DOM, Hooks, dan dukungan rendering di server melalui framework seperti Next.js, React membantu pengembang membuat website yang interaktif, cepat, dan mudah dirawat.

Jika Anda ingin membangun website yang responsif, dinamis, dan mudah dipelihara untuk bisnis atau instansi Anda, tim Sitespirit siap membantu dari perencanaan hingga peluncuran.

Konsultasikan kebutuhan Anda!