Apa Itu React? Konsep Utama dan Perbedaannya dengan jQuery

React adalah pustaka JavaScript untuk membangun antarmuka pengguna (UI). Sementara jQuery fokus pada pemilihan dan perubahan elemen halaman secara langsung, React fokus pada mendeskripsikan antarmuka untuk keadaan data tertentu. Memahami komponen dan state mempermudah membandingkan kedua alat dan memutuskan kapan menggunakannya.

Apa itu React?

Di React, Anda membangun bagian-bagian dari antarmuka, seperti tombol, kotak pencarian, dan kartu artikel, sebagai komponen. Setiap komponen menggabungkan penampilan dan perilaku terkaitnya. Anda dapat menggabungkan komponen menjadi sebuah halaman dan menggunakan ulang sebuah kartu dengan memberikan judul dan penulis yang berbeda untuk setiap artikel.

React menggunakan JavaScript, dan HTML serta CSS tetap berguna untuk memahami struktur dan tampilan antarmuka web. Menginstal React tidak otomatis menyediakan server login, basis data, atau navigasi antar URL. Anda masih perlu memilih dan mengimplementasikan bagian lain dari aplikasi Anda. Artikel ini berfokus pada antarmuka dasar yang berjalan di browser; React Quick Start resmi memperkenalkan blok pembangunannya.

Konsep inti dari React

Komponen: unit tampilan dan perilaku

Komponen fungsi adalah fungsi JavaScript yang mengembalikan konten untuk ditampilkan. Nama komponen yang Anda definisikan dimulai dengan huruf kapital, seperti ProductCard, sedangkan elemen HTML seperti button menggunakan nama dengan huruf kecil. Komponen berikut mendefinisikan sebuah kartu satu kali sehingga Anda dapat menggunakan kembali strukturnya dengan data produk yang berbeda.

function ProductCard({ name, price }) {
  return (
    <article className="product-card">
      <h3>{name}</h3>
      <p>KRW {price}</p>
    </article>
  );
}

JSX: mengekspresikan markup di dalam JavaScript

JSX adalah ekstensi sintaks yang memungkinkan Anda menulis markup mirip HTML di dalam file JavaScript. Bagian <article> di atas adalah JSX. Kurung kurawal memungkinkan Anda menyisipkan ekspresi JavaScript seperti name dan price. Menempelkan komponen ini ke dalam file HTML biasa tidak cukup untuk menjalankannya.

JSX menggunakan className sebagai pengganti class dan memerlukan tag yang ditutup secara eksplisit, seperti <img />. Beberapa elemen tingkat atas harus dibungkus dalam elemen induk atau Fragment. JSX umum digunakan dalam contoh dan proyek pengantar, walaupun React bisa digunakan tanpa JSX. Lihat aturan React untuk menulis JSX untuk sintaksnya.

Props: data yang diberikan oleh induk

Props, singkatan dari properties, adalah nilai yang diberikan oleh komponen induk ke komponen anak. Props memungkinkan kartu yang sama menampilkan nama dan harga yang berbeda, atau tombol yang sama menampilkan label yang berbeda. Sebuah prop dapat berisi string, angka, objek, atau fungsi. Berikut adalah contoh produk dengan harga dalam won Korea (KRW):

<ProductCard name="Beginner keyboard" price={35000} />

Komponen anak membaca props-nya untuk membangun output-nya. Perlakukan props sebagai hanya-baca: jika nilainya perlu diubah, perbarui data di komponen induk sehingga mengirimkan nilai baru. Komponen induk juga dapat mengirimkan fungsi callback agar komponen anak memanggilnya setelah aksi pengguna. Mengirim props ke komponen menjelaskan aliran data ini.

State: mengingat nilai-nilai yang berubah

State adalah informasi yang perlu diingat oleh sebuah komponen, seperti nilai input, pilihan, atau jumlah klik. Memanggil useState mengembalikan nilai saat ini dan fungsi untuk memperbaruinya. useState adalah sebuah Hook, sebuah fungsi yang memberi komponen akses ke fitur-fitur React; panggil itu di tingkat atas dari fungsi komponen.

const [count, setCount] = useState(0);

Nilai awal adalah 0, count adalah keadaan saat ini, dan setCount meminta pembaruan. Mengubah variabel biasa saja tidak memberi tahu React untuk memperbarui antarmuka. Nilai-nilai yang menggerakkan tampilan memerlukan struktur state yang sesuai. State: memori dari sebuah komponen menjelaskan bagaimana state berbeda dari variabel lokal.

Bagaimana React memperbarui antarmuka?

Dalam sebuah penghitung, mengklik tombol meminta pembaruan state. React kemudian menghitung output untuk state tersebut dan menerapkan perubahan yang diperlukan ke DOM. Document Object Model (DOM) adalah representasi objek dari dokumen oleh browser, termasuk elemen dan teksnya.

1. Aksi pengguna: klik tombol menjalankan event handler.
2. Permintaan pembaruan: setCount menentukan nilai berikutnya.
3. Render: React memanggil komponen untuk menghitung output mereka.
4. Commit: React menerapkan perubahan yang diperlukan ke DOM.
5. Paint: browser menggambar hasilnya.

Rendering berarti menghitung output dengan memanggil komponen. Ini tidak berarti memuat ulang seluruh halaman atau menghapus dan membuat ulang setiap elemen HTML. Jika output tidak berubah, render mungkin tidak memerlukan perubahan DOM. Dokumentasi render dan commit React membedakan tahap-tahap ini.

Memanggil setCount tidak segera menggantikan nilai count di dalam event handler yang sedang berjalan. Ini meminta status untuk render berikutnya, dan React dapat mengelompokkan beberapa pembaruan. Ketika nilai baru bergantung pada nilai sebelumnya, nyatakan hubungan itu dengan fungsi updater:

setCount(previousCount => previousCount + 1);

Fungsi ini menerima status yang tertunda dan mengembalikan status berikutnya. Ini berguna ketika beberapa kenaikan antre, karena setiap pembaruan dihitung dari hasil sebelumnya. Referensi useState menjelaskan fungsi updater dan persyaratannya.

Apa perbedaan antara React dan jQuery?

jQuery juga merupakan pustaka JavaScript. Ini menyediakan selektor, penanganan peristiwa, perubahan konten dan gaya, serta permintaan Ajax. Ajax, singkatan dari Asynchronous JavaScript and XML, adalah teknik untuk bertukar data dengan server tanpa memuat ulang seluruh halaman; data yang ditukar tidak harus berupa XML. pengantar resmi jQuery mencantumkan manipulasi DOM dan penanganan peristiwa sebagai salah satu fitur utamanya.

Pertimbangkan menambahkan produk ke keranjang. Dengan jQuery, kode Anda mungkin memasukkan item daftar, memperbarui jumlah dan total, serta menyembunyikan pesan keranjang kosong. Dengan React, Anda dapat menggambarkan tampilan ini berdasarkan keadaan keranjang. Kedua pendekatan tidak secara otomatis menangani kesalahan server atau memvalidasi semua data yang masuk.

React tidak selalu lebih cepat, dan kode jQuery tidak selalu lebih sulit untuk dipelihara. Hasilnya bergantung pada antarmuka, implementasi, kode yang dimuat, dan tindakan pengguna. Interaksi kecil tunggal dan antarmuka yang mensinkronkan banyak status menciptakan kebutuhan pemeliharaan yang berbeda, jadi evaluasilah mereka dalam konteks masing-masing.

Bangun penghitung yang sama dengan jQuery dan React

Kedua contoh dimulai dari 0 dan meningkatkan jumlah sebanyak 1 setiap kali tombol diaktifkan. Judul mereka mengidentifikasi pustaka; selain perbedaan judul, fungsi dan tata letaknya setara. Bandingkan di mana setiap implementasi memperbarui angka yang ditampilkan. Contoh di bawah ini diperiksa dengan React 19.3.0, jQuery 4.0.0, Vite 8.3.4, Node.js 24.19.0, dan Microsoft Edge 154, termasuk klik mouse, aktivasi keyboard, dan pemuatan ulang halaman.

Contoh jQuery: mengubah teks dari elemen yang dipilih

Simpan kode lengkap di bawah ini sebagai jquery-counter.html dengan encoding UTF-8, lalu buka di browser. Ini memuat jQuery 4.0.0 dari Content Delivery Network (CDN) resmi, jadi Anda memerlukan koneksi internet. Periksa rilis jQuery resmi untuk versi dan file yang tersedia.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery counter</title>
  <style>
body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }
  </style>
</head>
<body>
  <main class="counter">
    <h1>jQuery counter</h1>
    <p>Click count: <span id="count" aria-live="polite">0</span></p>
    <button type="button" id="increase">Add 1</button>
  </main>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
    let count = 0;

    $('#increase').on('click', function () {
      count += 1;
      $('#count').text(count);
    });
  </script>
</body>
</html>

$("#increase") memilih tombol, dan .on("click", ...) menempelkan handler. Setelah mengubah variabel, kode memanggil $("#count").text(count) untuk memperbarui teks yang ditampilkan. Lihat referensi jQuery .on() dan referensi jQuery .text() untuk operasi tersebut.

Skrip ditempatkan setelah tombol di dalam kode HTML, jadi elemen target sudah ada ketika contoh ini dijalankan. Jika tidak ada yang berubah, periksa permintaan CDN dan kesalahan konsol di alat pengembang browser, dan bandingkan ID elemen dengan selector. Saat menyesuaikan ini ke tema WordPress, hindari memuat pustaka dua kali dan periksa apakah $ merujuk ke jQuery di bawah konfigurasi noConflict -nya.

Contoh React: perbarui state untuk mengubah antarmuka

Contoh pembelajaran ini menggunakan template JavaScript React milik Vite. Vite menyediakan server pengembangan serta mentransformasi dan membangun berkas sumber. Node.js menjalankan alat-alat ini di komputer Anda, dan npm menginstal paket serta menjalankan perintah proyek. Instal versi Node.js dengan dukungan jangka panjang (LTS) yang memenuhi persyaratan panduan memulai Vite. Pada Oktober 2026, panduan mencantumkan Node.js 20.19+ atau 22.12+; juga periksa persyaratan tambahan dari template yang dihasilkan.

1. Buka terminal di folder tempat Anda ingin membuat proyek. Pastikan folder dengan nama yang sama belum ada.
2. Jalankan perintah di bawah ini untuk membuat template JavaScript react dan menginstal paket-paketnya.

npm create vite@latest react-counter -- --template react --no-interactive
cd react-counter
npm install

Pada eksekusi pertama, npm mungkin akan meminta Anda untuk mengonfirmasi instalasi alat scaffolding. Setelah instalasi, ganti isi dari src/App.jsx dengan kode berikut. label adalah prop yang diberikan oleh komponen induk, dan count adalah state yang diingat oleh komponen.

import { useState } from 'react';

function Counter({ label }) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(previousCount => previousCount + 1);
  }

  return (
    <main className="counter">
      <h1>{label}</h1>
      <p>Click count: <span aria-live="polite">{count}</span></p>
      <button type="button" onClick={handleClick}>Add 1</button>
    </main>
  );
}

export default function App() {
  return <Counter label="React counter" />;
}

Gunakan kode entri berikut di src/main.jsx. createRoot menghubungkan antarmuka React ke elemen HTML dengan ID root, dan index.css menyediakan gaya.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Ganti src/index.css dengan CSS di bawah ini untuk menyesuaikan dengan contoh jQuery. App.jsx pengganti tidak mengimpor App.css, sehingga gaya komponen default dari template tidak mengganggu tata letak ini.

body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }

Proyek index.html harus berisi <div id="root"></div> dan skrip modul yang memuat src/main.jsx. Pertahankan struktur ini dari template Vite dan gunakan lang="en" untuk dokumen bahasa Inggris. Mulai server pengembangan:

npm run dev

Buka alamat Lokal yang tercetak di terminal. Biasanya adalah http://localhost:5173, tetapi port lain mungkin digunakan jika port tersebut sudah terpakai. Hentikan server dengan Ctrl+C di terminal. Jika perubahan tidak muncul, periksa bahwa Anda sudah menyimpan file dan sedang bekerja di proyek yang benar. Kesalahan JSX muncul di terminal atau tampilan kesalahan browser.

Penangan React tidak memilih elemen angka dan mengganti teksnya. Ekspresi JSX {count} menghubungkan output ke state, dan setCount meminta state baru. Dalam kedua contoh, memuat ulang halaman mengatur ulang hitungan menjadi 0 karena tidak ada penyimpanan yang diterapkan. Contoh-contoh ini menggambarkan pola pembaruan; mereka bukan tolak ukur kinerja.

Kapan sebaiknya memilih React atau jQuery?

Menambahkan fitur kecil ke halaman yang sudah ada

Sebuah tombol yang mengubah elemen atau menu kecil mungkin sederhana dengan jQuery. Jika halaman yang ada sudah bergantung pada jQuery, menjaga struktur itu dapat mengurangi cakupan perubahan. Pertimbangkan juga apakah API DOM standar sudah cukup. Ketergantungan baru tidak selalu diperlukan untuk setiap interaksi kecil.

Membangun antarmuka dengan keadaan yang terhubung

Model komponen dan keadaan React layak dipertimbangkan ketika data yang sama memengaruhi daftar produk, filter, dan total keranjang, atau ketika antarmuka serupa muncul berulang kali. Anda tetap perlu memutuskan komponen mana yang memiliki masing-masing keadaan dan kapan data server harus diperbarui. Mengadopsi React saja tidak menjamin desain yang baik.

Menambahkan React ke sebagian situs yang sudah ada

Anda tidak perlu membangun ulang seluruh situs untuk menggunakan React. Anda dapat memasang sebuah komponen di dalam elemen tertentu dan mempertahankan sisa halaman dalam bentuknya yang ada. Panduan resmi untuk menambahkan React ke proyek yang sudah ada menjelaskan pengaturan dan cakupannya.

Jika React dan jQuery berbagi halaman, berikan batas yang jelas atas kepemilikan DOM. Menambahkan atau menghapus elemen anak yang dikelola oleh React secara sewenang-wenang dapat membuat DOM nyata tidak sinkron dengan pandangan React terhadapnya. Plugin yang memanipulasi DOM memerlukan integrasi yang mengelola inisialisasi dan pembersihannya dalam siklus hidup yang sesuai. Lihat panduan React tentang memodifikasi DOM yang dikelolanya untuk batasan ini.

Sebelum mengadopsi sebuah alat, pertimbangkan kompleksitas status antarmuka, komponen yang dapat Anda gunakan kembali, pengalaman JavaScript tim Anda, serta pengaturan pengembangan dan penyebaran. Halaman kecil dengan ketergantungan jQuery yang sudah ada memiliki kebutuhan yang berbeda dari aplikasi interaktif baru. Setelah mempelajari dasar-dasar HTML, CSS, dan JavaScript, menjalankan penghitung ini memberikan perbandingan konkret antara mengubah elemen secara langsung dan menggambarkan antarmuka melalui status.