Bangun UI modular dengan komponen reusable yang mudah dikelola.
Performa tinggi dengan sistem rendering yang efisien dan cepat.
Tulis markup HTML langsung di dalam JavaScript dengan sintaks yang intuitif.
Library JavaScript untuk membangun antarmuka pengguna yang interaktif dan dinamis.
Pelajari ResmiReact adalah alat bantu (library) yang dibuat dengan JavaScript — fungsinya: membantu kamu membuat tampilan website yang interaktif dan dinamis.
Bayangkan kamu sedang bikin website yang punya tombol “Like”, form komentar, atau daftar produk yang bisa di-update tanpa reload halaman. Nah, React membantu kamu mengatur semua itu dengan lebih mudah dan rapi.
Tanpa React, kamu harus menulis banyak kode JavaScript manual untuk mengubah tampilan website saat ada interaksi pengguna — ribet dan rawan error. Dengan React, semuanya jadi lebih terstruktur dan efisien.
Kenapa disebut "library"? Karena React seperti “kotak peralatan” — kamu yang pegang kendali dan boleh pilih kapan pakai alatnya. Kalau “framework”, kamu harus ikuti aturan strukturnya. Jadi, React lebih fleksibel!
React bukan sekadar library populer — ia punya sejarah menarik yang membentuk dunia web modern.
Jordan Walke, insinyur perangkat lunak di Facebook.
Bayangkan kamu punya “pabrik LEGO digital” — React adalah alatnya. Kamu bisa bikin bagian-bagian UI (tombol, form, card) lalu pasang-pasang seenaknya, dan kalau ada yang rusak? Cuma ganti satu balok, bukan bongkar seluruh rumah!
Setiap bagian UI (tombol, card, form) bisa dibuat sebagai komponen terpisah — reusable, mudah diatur, dan scalable.
Navigasi tanpa reload halaman — cepat dan halus seperti aplikasi mobile. Contoh: Gmail, Facebook, Netflix.
React punya “salinan bayangan” DOM yang membuat update UI jadi super cepat dan efisien.
Didukung oleh Meta (Facebook), React terus diperbarui dan digunakan dalam aplikasi berskala besar seperti Facebook dan Instagram.
Memiliki komunitas global yang besar di GitHub, StackOverflow, dan forum lain — mudah mencari solusi dan dokumentasi.
Didukung oleh tools seperti Redux, React Router, Next.js, dan Material UI yang saling terintegrasi dan siap pakai.
Bahasa Utama: JavaScript + JSX
Tipe: Library JavaScript untuk UI interaktif
Fokus: Manajemen state, komponen dinamis, SPA
Contoh: Aplikasi dashboard, media sosial, e-commerce kompleks
Library UI DinamisBahasa Utama: HTML, CSS, JavaScript (opsional)
Tipe: Framework CSS responsif
Fokus: Styling, layout, komponen UI statis
Contoh: Landing page, blog, website perusahaan
Framework CSSBanyak developer pakai kombinasi React + Bootstrap untuk bikin dashboard admin, landing page, sampai aplikasi web interaktif. React ngurus logic, Bootstrap bikin tampilannya rapi dan cepat.
React bukan bahasa baru — ia adalah library yang dibuat dengan JavaScript. Jadi, kalau kamu sudah belajar dasar JavaScript (seperti variabel, fungsi, if-else), kamu sudah siap belajar React!
JSX = JavaScript XML — ini adalah cara menulis kode di React yang mirip HTML, tapi sebenarnya tetap JavaScript.
Kenapa disebut “XML”? Karena strukturnya mirip XML/HTML: ada tag pembuka & penutup, atribut, dan isinya. Tapi tenang — kamu nggak perlu belajar XML dulu untuk paham ini. Bayangkan saja JSX = HTML yang bisa dipakai di dalam JavaScript.
Halo
Komponen = potongan kode yang bisa dipakai ulang untuk menampilkan bagian tertentu di website.
Contoh: Kamu bikin komponen “Tombol”, lalu bisa dipakai 10x di halaman berbeda — tanpa nulis ulang kode. Hemat waktu dan rapi!
Komponen bisa berupa fungsi (seperti contoh di bawah) atau class (nanti kamu pelajari belakangan).
function Welcome(props) {
return Hello, {props.name}
;
}
// Pemanggilan komponen:
function Welcome(props)
Ini adalah deklarasi fungsi komponen bernama Welcome.
Kata props adalah singkatan dari “properties” — semacam kotak
hadiah yang berisi data dari luar.
Bayangkan: kamu kirim “nama” ke dalam komponen → komponen terima lewat
props.
return Hello, {props.name}
;
Di dalam return, kita tulis JSX.
{props.name} artinya: “Ambil nilai dari name yang dikirim
lewat props, lalu tampilkan di sini.”
Tanda kurung kurawal { } adalah cara JSX menyisipkan JavaScript
di dalam HTML.
Ini adalah cara memanggil/menggunakan komponen
Welcome.
Saat kamu tulis name="Raihan", kamu sedang mengirim
data ke komponen.
Maka, di dalam komponen, props.name akan berisi nilai
"Raihan".
{props.name} dengan nilai
"Raihan")
Kamu juga bisa pakai TypeScript — ini seperti JavaScript tapi dengan “helm pengaman”. TypeScript membantu kamu mendeteksi error sebelum kode dijalankan — cocok kalau proyekmu besar atau timmu banyak.
Tapi untuk belajar dasar React, JavaScript + JSX sudah lebih dari cukup!
React membangun UI dari komponen-komponen kecil yang bisa digunakan ulang (reusable). Setiap komponen mengelola tampilan dan logikanya sendiri.
Contoh: Header, Sidebar, Card, Button — semuanya bisa jadi komponen terpisah.
Keuntungan:
DOM = Document Object Model — ini adalah cara browser “melihat” dan “mengatur” halaman website kamu.
Bayangkan DOM seperti pohon keluarga dari semua elemen di halamanmu: judul, paragraf, tombol, gambar — semuanya punya “hubungan” dan bisa diakses/diubah oleh JavaScript.
Mengubah DOM secara langsung itu lambat dan berat buat browser — apalagi kalau website-mu punya ratusan elemen!
Bayangkan kamu punya daftar belanja 100 item, lalu kamu mau ubah 1 item di tengah. Kalau kamu hapus semua, lalu tulis ulang 100 item itu — capek dan boros waktu, kan?
Virtual DOM adalah “duplikat ringan” dari DOM asli — disimpan di memory, bukan di layar.
Saat ada perubahan (misalnya: data baru masuk), React:
Pemahaman dasar tentang JSX, komponen, dan props dalam React.
Mengelola state dan lifecycle dengan Hooks: useState, useEffect, dll.
Proyek nyata untuk portofolio: Todo App, Nekonime App, dll.
