Cara Menggunakan React.

React adalah pustaka JavaScript untuk membangun antarmuka pengguna berbasis component — potongan UI yang bisa dipakai ulang dan disusun menjadi tampilan yang lebih besar.

Component Fungsional

function KartuProduk({ nama, harga }) {
  return (
    <div className="kartu">
      <h3>{nama}</h3>
      <p>Rp{harga.toLocaleString("id-ID")}</p>
    </div>
  );
}

Component modern di React ditulis sebagai fungsi biasa yang mengembalikan JSX — sintaks mirip HTML yang sebenarnya diterjemahkan menjadi pemanggilan fungsi JavaScript di balik layar.

Props: Mengirim Data ke Component

function App() {
  return <KartuProduk nama="Sepatu Lari" harga={450000} />;
}

Props bersifat read-only — sebuah component tidak boleh mengubah props yang diterimanya sendiri, hanya boleh membacanya.

State dengan useState

State adalah data yang bisa berubah seiring waktu dan memicu tampilan untuk diperbarui otomatis saat nilainya berubah.

import { useState } from "react";

function Counter() {
  const [jumlah, setJumlah] = useState(0);

  return (
    <div>
      <p>Jumlah: {jumlah}</p>
      <button onClick={() => setJumlah(jumlah + 1)}>Tambah</button>
    </div>
  );
}

Memanggil setJumlah tidak langsung mengubah variabel jumlah, melainkan memberi tahu React untuk merender ulang component dengan nilai baru.

Menampilkan Data secara Kondisional

function StatusPesanan({ selesai }) {
  return (
    <p>{selesai ? "Pesanan selesai" : "Sedang diproses"}</p>
  );
}

Menampilkan Daftar dengan map()

function DaftarProduk({ produk }) {
  return (
    <ul>
      {produk.map((item) => (
        <li key={item.id}>{item.nama}</li>
      ))}
    </ul>
  );
}

Prop key wajib diisi dengan nilai unik saat merender daftar, agar React bisa melacak elemen mana yang berubah, ditambah, atau dihapus secara efisien.

useEffect untuk Efek Samping

import { useEffect, useState } from "react";

function DaftarBerita() {
  const [berita, setBerita] = useState([]);

  useEffect(() => {
    fetch("/api/berita")
      .then((res) => res.json())
      .then(setBerita);
  }, []); // array kosong berarti hanya dijalankan sekali saat component dimuat

  return (
    <ul>
      {berita.map((item) => <li key={item.id}>{item.judul}</li>)}
    </ul>
  );
}

Kesimpulan

React dibangun di atas tiga konsep inti: component sebagai unit UI yang bisa dipakai ulang, props untuk mengalirkan data dari induk ke anak, dan state untuk data yang berubah seiring interaksi pengguna. Memahami ketiganya, ditambah useEffect untuk efek samping seperti pengambilan data, sudah cukup untuk mulai membangun antarmuka interaktif dengan React.