Belajar Frontend - React Dasar

#Pendahuluan

Setelah di episode 5-6 kalian menguasai JavaScript dan TypeScript, sekarang saatnya lompatan besar: React. Di 2026 React adalah library UI paling banyak dipakai, dan fondasi dari meta-framework terpopuler (Next.js, Remix, TanStack Start). Menguasai React berarti menguasai cara berpikir modern tentang UI.

Mengapa tidak terus pakai vanilla JS? Di aplikasi nyata, memanipulasi DOM manual dengan querySelector dan string HTML menjadi tidak terkelola saat ukuran bertambah. React memperkenalkan paradigma yang berbeda: UI adalah fungsi dari state. Kalian mendeskripsikan "bagaimana UI seharusnya terlihat", dan React yang mengurus sinkronisasinya dengan DOM.

#Komponen, Props, dan State

Tiga konsep inti React:

type ProductCardProps = {
  name: string;
  price: number;
};
 
export function ProductCard({ name, price }: ProductCardProps) {
  return (
    <article className="product-card">
      <h2>{name}</h2>
      <p>Rp{price.toLocaleString("id-ID")}</p>
    </article>
  );
}

#JSX: HTML dalam JavaScript

JSX adalah sintaks yang menggabungkan markup dan logika:

export function ProductList({ products }: { products: Product[] }) {
  return (
    <section className="product-grid">
      {products.map((p) => (
        <ProductCard key={p.id} name={p.name} price={p.price} />
      ))}
    </section>
  );
}

Perhatikan: {products.map(...)} menjalankan JavaScript di dalam markup, dan key wajib ada pada list agar React bisa melacak setiap item secara efisien.

#Hooks: useState dan useEffect

Hooks adalah fungsi bawaan React untuk "mengaitkan" state dan efek pada komponen.

import { useState } from "react";
 
export function Cart() {
  const [items, setItems] = useState<CartItem[]>([]);
 
  const addItem = (item: CartItem) => {
    setItems((prev) => [...prev, item]);
  };
 
  return (
    <button onClick={() => addItem({ productId: 1, quantity: 1 })}>
      Tambah ({items.length})
    </button>
  );
}

Pola yang wajib diingat: jangan pernah memutasi state langsung (items.push(...)). Selalu buat nilai baru — [...prev, item] — supaya React tahu terjadi perubahan dan bisa me-render ulang.

useEffect menjalankan efek samping (fetch data, subscribe) setelah render:

useEffect(() => {
  fetch("/api/products")
    .then((r) => r.json())
    .then(setProducts)
    .catch(console.error);
}, []);

Array dependency [] berarti efek berjalan sekali setelah mount. Hati-hati: di 2026, pola fetch ini umumnya sudah digantikan framework data (episode 9 & 11) — jangan terlalu nyaman dengan useEffect untuk data.

#Era React Compiler (2026)

React Compiler (diaktifkan default sejak React 19) secara otomatis melakukan memoization — dulu developer menghafal kapan memakai useMemo dan useCallback untuk performa; sekarang compiler yang melakukannya. Dampak praktisnya:

• Kode lebih bersih: tidak perlu manual useMemo di mana-mana.
• Performa re-render membaik tanpa perubahan kode.
• Aturan "jangan render komponen besar di dalam render" tetap berlaku, tapi kasus-kasus mikro ditangani otomatis.

Ini salah satu alasan React tetap relevan di 2026: developer fokus pada logika, bukan mikro-optimasi.

#Praktik: Aplikasi React TokoKita

Rangkaian komponen minimal TokoKita:

import { useState } from "react";
import { ProductList } from "./ProductList";
import { Cart } from "./Cart";
 
const SAMPLE_PRODUCTS: Product[] = [
  { id: 1, name: "Kopi Arabika", price: 85000 },
  { id: 2, name: "Teh Melati", price: 45000 },
];
 
export function App() {
  const [cartCount, setCartCount] = useState(0);
 
  return (
    <main id="main">
      <h1>Katalog TokoKita</h1>
      <p>Keranjang: {cartCount} item</p>
      <ProductList products={SAMPLE_PRODUCTS} onAdd={() => setCartCount((c) => c + 1)} />
    </main>
  );
}

Struktur data mengalir satu arah: state di atas (App), data diturunkan sebagai props, event naik lewat callback (onAdd). Ini pola one-way data flow yang membuat alur aplikasi mudah diprediksi.

#Common Pitfalls

#Penutup

Inti yang harus dibawa pulang:

• UI adalah fungsi dari state; React menyinkronkan DOM dengan deklarasi kalian.
• Komponen + props (input) + state (memori) adalah tiga pilar React.
• JSX menggabungkan markup dan logika; key wajib untuk list.
• Hooks useState/useEffect; di era React Compiler fokus pada logika, bukan memo manual.

Di episode 9 selanjutnya kita membangun di atas React: framework & meta-framework dengan Next.js — App Router, Server Components (RSC), data fetching, dan deployment, sehingga TokoKita menjadi aplikasi full-stack yang siap produksi. Sampai jumpa di episode 9!