Apa Itu React? Panduan Bahasa Sederhana untuk Non-Developer

React adalah library JavaScript untuk membangun antarmuka pengguna — bagian dari aplikasi yang dilihat dan diklik orang. Anda membangun layar dari bagian-bagian yang bisa dipakai ulang yang disebut komponen, seperti tombol, kartu produk, atau seluruh halaman, dan React menjaga layar tetap sinkron dengan data Anda: ketika data berubah, React memperbarui bagian halaman yang bergantung padanya. React dibuat di Facebook (sekarang Meta), bersifat open source, dan merupakan salah satu cara paling luas dipakai untuk membangun aplikasi web.

Mengapa ini penting saat membangun dengan AI

Jika Anda membangun aplikasi web dengan alat AI, besar kemungkinan aplikasinya ditulis dengan React. Banyak AI app builder memakai React sebagai default, karena populer, terdokumentasi dengan baik, dan ada sangat banyak kode React yang bisa dipelajari model AI.

Anda tidak perlu menulis React untuk membangun dengan AI. Tetapi mengetahui sedikit membantu Anda untuk:

• Mendeskripsikan perubahan dengan presisi. "Ubah komponen ProductCard agar harga dicetak tebal" lebih jelas daripada "buat harga lebih menonjol di suatu tempat".
• Memahami error. Pesan seperti "Cannot read properties of undefined" atau "Too many re-renders" lebih masuk akal.
• Membuat pilihan yang tepat. Aplikasi React biasa dirender di browser, yang memengaruhi visibilitas di mesin pencari dan kecepatan muat awal. Mengetahuinya membantu Anda memutuskan kapan perlu meminta pengaturan yang berbeda.
• Bekerja dengan developer nanti. React adalah keterampilan yang umum, jadi developer biasanya bisa langsung memahami codebase React.

Analogi sehari-hari

Bayangkan LEGO. Alih-alih memahat seluruh model dari satu balok, Anda membangunnya dari batu bata standar. Beberapa batu bata membentuk roda; empat roda dan beberapa bagian lain menjadi mobil. Jika Anda ingin setiap mobil punya roda merah, Anda cukup mengubah desain roda sekali saja.

Komponen React adalah batu batanya. Komponen Button dipakai di dalam ProductCard, yang dipakai di dalam ProductGrid, yang merupakan bagian dari ShopPage. Ubah Button sekali, dan setiap tombol di aplikasi ikut berubah.

Separuh lainnya dari analogi ini: bayangkan model LEGO itu menyusun ulang dirinya sendiri setiap kali instruksinya diubah. Itulah trik React yang lain — Anda mendeskripsikan seperti apa layar seharusnya untuk data saat ini, dan React mencari tahu apa yang perlu diubah di halaman.

Gagasan inti

Komponen

Komponen adalah fungsi JavaScript yang mengembalikan sepotong antarmuka. Dokumentasi React menggambarkan komponen sebagai bagian dari UI yang memiliki logika dan tampilannya sendiri. Nama komponen diawali huruf kapital.

JSX

Komponen biasanya ditulis dalam JSX, yang tampak seperti HTML yang dicampur dengan JavaScript:

function Greeting() {
  return <h1>Selamat datang kembali!</h1>;
}

JSX bersifat opsional, tetapi dokumentasi React mencatat bahwa sebagian besar proyek memakainya. JSX diubah menjadi JavaScript biasa sebelum dijalankan di browser.

Props

Props adalah input yang Anda berikan ke sebuah komponen, seperti pengaturan pada bagian yang bisa dipakai ulang:

<ProductCard name="Lilin Lavender" price={24} />

ProductCard yang sama bisa menampilkan produk apa pun.

State

State adalah informasi yang diingat sebuah komponen dan bisa berubah selama aplikasi berjalan — apakah sebuah menu terbuka, apa yang diketik di kotak pencarian, berapa banyak item di keranjang. Saat state berubah, React merender ulang komponen agar layar sesuai.

Hook

Hook adalah fungsi yang namanya diawali use, seperti useState (mengingat sebuah nilai) dan useEffect (menjalankan kode setelah rendering, misalnya untuk mengambil data). Anda akan sering melihatnya di kode React yang dihasilkan AI.

Contoh nyata: penghitung keranjang

Anggap toko online Anda punya tombol "Tambah ke keranjang" dan ikon keranjang yang menampilkan jumlah item. Dalam React, kira-kira seperti ini:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lilin Lavender"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Keranjang ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Tambah ke keranjang</button>
    </div>
  );
}

Yang terjadi saat pembeli mengklik "Tambah ke keranjang":

1. onClick tombol memanggil onAdd, yang memanggil setCartCount.
2. React memperbarui state cartCount dari 0 menjadi 1.
3. React merender ulang Shop, dengan meneruskan count={1} ke CartIcon.
4. Halaman kini menampilkan "Keranjang (1)". Tidak ada yang menulis kode yang berkata "cari teks keranjang dan ubah" — layar mengikuti datanya.

Perhatikan juga batasannya. Hitungan ini berada di memori browser. Segarkan halaman dan kembali ke 0. Untuk menyimpan keranjang, Anda perlu menyimpannya di tempat yang bertahan — cookie, penyimpanan browser, atau basis data melalui backend Anda. React mengurus layar; ia tidak menyimpan data Anda.

Tempat React dalam aplikasi web

Aplikasi "Vite + React" dirender di browser (single-page app). Aplikasi Next.js bisa merender halaman di server terlebih dahulu, yang membantu mesin pencari dan kecepatan muat awal.

Istilah umum dijelaskan

Kesalahan umum dan kesalahpahaman

• "React adalah bahasa pemrograman." Ia adalah library yang ditulis dan dipakai dari JavaScript (atau TypeScript).
• "React menyimpan data saya." State berada di browser dan hilang saat halaman disegarkan. Data yang harus bertahan memerlukan backend dan basis data.
• Menaruh secret di kode React. Semua yang ada di aplikasi React dikirim ke browser pengunjung. Kunci API di sana bersifat publik. Simpan di server.
• "Aplikasi React tidak bisa peringkat di pencarian." Rendering sisi klien memang lebih lemah untuk pencarian, tetapi prerendering atau server rendering mengatasi sebagian besar masalah itu.
• Komponen raksasa. Satu komponen 1.000 baris sulit diubah dengan aman, baik bagi manusia maupun AI. Minta komponen yang lebih kecil.
• Menganggap aplikasi web React adalah aplikasi ponsel. Ia berjalan di browser, termasuk di ponsel, tetapi bukan aplikasi App Store.

Yang bisa Anda minta dari AI builder Anda

• "Pecah halaman ini menjadi komponen kecil yang diberi nama, dan beri tahu saya setiap komponen ada di file mana."
• "Jadikan komponen ProductCard bisa dipakai ulang, dengan name, price, dan image sebagai props."
• "Simpan keranjang ke basis data agar tetap ada setelah halaman disegarkan."
• "Simpan semua kunci API di server; kode React sebaiknya memanggil API kami sendiri."
• "Tambahkan state loading dan error untuk data yang berasal dari server."
• "Jika visibilitas pencarian penting untuk halaman ini, prerender halaman tersebut atau gunakan pengaturan server-rendered."
• "Jelaskan dalam bahasa sederhana apa arti error ini dan dari komponen mana asalnya."

Untuk gambaran yang lebih besar, lihat frontend vs backend, dan untuk meninjau kode yang ditulis AI, cara meninjau kode yang dihasilkan AI.

React di Mythex

Kecuali Anda meminta yang lain, Mythex memulai proyek baru dengan Vite + React + TypeScript + Tailwind, dengan pratinjau langsung yang berjalan saat Anda chat. Anda bisa menyebut pengaturan lain di prompt pertama — misalnya "Gunakan Next.js" atau "landing page HTML statis biasa" — dan Mythex memilihnya dari apa yang Anda tulis; tidak ada layar pengaturan untuk itu. Halaman dokumentasi tentang bagaimana teknologi dipilih menjelaskan pilihannya. Editor kode bersifat hanya-baca di paket Free; di Pro Anda bisa mengedit kode React secara langsung dan mengekspor proyek untuk dilanjutkan di tempat lain.

Pertanyaan