React adalah library JavaScript buatan Meta (dulu namanya Facebook), dirilis tahun 2013, untuk membangun tampilan web. Kamu memecah tampilan jadi potongan kecil bernama komponen, dan tiap komponen cukup bilang tampilannya harus seperti apa untuk data yang sekarang. Mengubah halaman tiap datanya berubah, itu urusan React. Mirip renovasi rumah: kamu kasih tukang gambar rumah yang kamu mau, tukangnya membandingkan gambar itu dengan rumah yang sekarang, lalu cuma membongkar bagian yang beda. Kalau yang beda cuma warna pintu, yang dicat ulang cuma pintunya. Rumahnya gak dirobohkan, dan barang di dalamnya tetap di tempat.
🧪 Tebakan cepat: sebuah halaman menampilkan
Halo, Budi!dan kotak catatan yang sudah kamu isi. Lalu namanya berubah jadi Sari. Kalau halaman itu dibangun dengan React, ketikanmu di kotak catatan hilang atau tetap? Jawabannya ada di bagian "Yang React kerjakan tiap data berubah".
Library, bukan framework
React cuma mengurus satu hal: tampilan, atau UI (user interface). Karena itu React disebut library, kumpulan kode siap pakai yang kamu panggil untuk satu keperluan. Framework lebih besar: dia juga menentukan cara pindah halaman, cara mengambil data, sampai susunan folder proyek. Angular contohnya framework. Next.js juga framework, dan dibangun di atas React.
Jadi kalau aplikasi React-mu butuh pindah halaman (routing), fiturnya datang dari library lain, misalnya React Router, atau dari framework seperti Next.js. Di jalur ini kamu belajar React-nya dulu.
Komponen: tampilan dari potongan kecil
Komponen adalah function JavaScript yang namanya diawali huruf kapital dan mengembalikan tampilan. Ini komponen paling kecil:
function App() {
return <h1>Halo React!</h1>
}
function App()membuat komponen bernamaApp. BiasanyaAppadalah komponen paling luar, tempat komponen lain dipasang.return <h1>Halo React!</h1>mengembalikan tampilannya. Tulisan yang mirip HTML ini namanya JSX, HTML yang ditulis di dalam JavaScript. Aturannya dibahas di pelajaran berikutnya.- Hasilnya di halaman: satu heading
<h1>berisiHalo React!.
Halaman yang besar dirakit dari banyak komponen, misalnya Navbar, KartuProduk, dan Keranjang. Satu komponen bisa dipakai berkali-kali, jadi kartu produk cukup ditulis sekali.
Deklaratif: bilang hasilnya, bukan langkahnya
Ambil halaman toko kecil: sapaan, isi keranjang, dan kotak catatan. Dengan JavaScript biasa, kamu sendiri yang menulis ulang isi halaman:
// Cara manual: kamu yang mengubah DOM
const nama = "Budi"
const jumlah = 2
document.querySelector("#root").innerHTML = `
<h1>Halo, ${nama}!</h1>
<p>Isi keranjang: ${jumlah}</p>
<input placeholder="Catatan">
`
Dengan React, kamu cuma menulis tampilannya harus seperti apa:
// Cara React: kamu bilang hasil akhirnya
function App() {
const nama = "Budi"
const jumlah = 2
return (
<div>
<h1>Halo, {nama}!</h1>
<p>Isi keranjang: {jumlah}</p>
<input placeholder="Catatan" />
</div>
)
}
- Cara pertama disebut imperatif: kamu memberi perintah langkah demi langkah ke DOM, pohon elemen yang dibuat browser dari HTML.
- Cara kedua disebut deklaratif: kamu menulis hasil akhirnya saja.
{nama}artinya "taruh isi variabelnamadi sini". - Kode React-nya gak pernah menyentuh DOM. Yang mengubah DOM adalah React.
Yang React kerjakan tiap data berubah
Misalkan namanya berubah dari Budi jadi Sari. Cara membuat data yang bisa berubah (namanya state) ada pelajarannya sendiri; di sini cukup lihat bedanya kedua cara tadi:
Cara innerHTML |
Cara React | |
|---|---|---|
| Elemen yang dibuang | 3 (h1, p, input) |
0 |
| Elemen yang dibuat baru | 3 | 0 |
| Yang diubah | seluruh isi #root |
1 teks: Budi jadi Sari |
| Ketikan di kotak catatan | hilang | tetap |
innerHTML membuang semua elemen lama lalu membuat yang baru, termasuk kotak catatannya. Kotak yang baru masih kosong, jadi ketikanmu hilang. React menjalankan App lagi, membandingkan hasil yang baru dengan hasil sebelumnya, lalu cuma mengubah bagian yang beda di DOM: satu teks nama. Kotak catatannya tetap elemen yang sama, jadi ketikanmu tetap ada. Itu jawaban tebakannya.
Hasil render yang disimpan dan dibandingkan React ini berupa objek JavaScript biasa yang menggambarkan tampilan, sering disebut virtual DOM. Membandingkan objek jauh lebih murah daripada membuang dan membangun ulang elemen di halaman.
Mulai proyek React
Proyek React biasanya dibuat dengan Vite, alat yang menyiapkan proyek dan menjalankannya di komputermu. Pasang Node.js dulu, lalu jalankan ini di terminal:
npm create vite@latest
cd nama-proyekmu
npm install
npm run dev
npm create vite@latestmembuat proyek baru dengan Vite versi terbaru. Dia bertanya nama proyek dan framework-nya: pilih React, lalu JavaScript.npm installmengunduh React dan paket lain yang dibutuhkan.npm run devmenjalankan aplikasinya, lalu kamu buka alamat yang dia tampilkan di browser.
Di proyek itu, index.html punya <div id="root"></div>, dan src/main.jsx memasang App ke sana:
import { createRoot } from "react-dom/client"
import App from "./App.jsx"
createRoot(document.getElementById("root")).render(<App />)
createRoot(...)menyerahkan<div id="root">ke React. Mulai saat itu, isi div itu diurus React..render(<App />)menampilkan komponenAppdi dalamnya.
Di editor latihan BelajarWeb, langkah ini sudah dikerjakan untukmu. Kamu cukup menulis function App(), dan App itulah yang ditampilkan.
⚠️ Jebakan yang sering ketemu
- Mengira React itu framework lengkap. React cuma mengurus tampilan. Routing dan pengambilan data datang dari library lain, atau dari framework di atas React seperti Next.js.
- Mengubah DOM sendiri di bagian yang diurus React.
innerHTMLatauappendChilddi dalam#rootbikin React dan kodemu rebutan elemen yang sama. Ubah datanya, biarkan React yang mengubah DOM. - Menambahkan
createRootdi editor latihan. Editornya sudah memasangAppuntukmu, dan editor ini cuma punya satu file, jadiimport App from "./App.jsx"gagal denganFailed to resolve import. Cukup tulisfunction App(). Barisimportdari"react"boleh, tapi gak wajib. - Teks
<h1>beda sedikit. Latihannya mengecek teks persisHalo React!: R kapital, satu spasi, dan tanda seru di akhir.
TL;DR: React adalah library JavaScript dari Meta (dulu Facebook, 2013) untuk membangun tampilan, bukan framework. Tampilan dipecah jadi komponen: function berhuruf kapital yang mengembalikan JSX, misalnya function App() { return <h1>Halo React!</h1> }. Kamu bilang hasil akhirnya (deklaratif), lalu React membandingkan hasil baru dengan yang lama dan cuma mengubah bagian yang beda di DOM, jadi ketikan di kotak input gak ikut hilang. Proyek baru dibuat dengan npm create vite@latest, dan createRoot(...).render(<App />) memasang App ke <div id="root">.
