Berfikir dalam Bentuk Component

Buka mana-mana aplikasi yang anda guna setiap hari — Shopee, Grab, WhatsApp. Perhatikan skrin betul-betul dan anda akan nampak ia dibina daripada kotak-kotak: bar atas, kotak carian, senarai, dan di dalam senarai itu kad yang sama berulang-ulang. React minta anda beri nama kepada setiap kotak itu dan bina ia sekali sahaja. Kotak bernama itulah component.

Component

Function JavaScript yang memulangkan sebahagian UI (ditulis dalam JSX). Namanya bermula dengan huruf besar, contohnya Header.

JSX

Sintaks seperti HTML di dalam kod React, contohnya <h1>Hello</h1>. Sebenarnya ia JavaScript — pelajaran 3 tunjuk caranya.

Render

Menggunakan component, ditulis seperti tag: <Header />. React memanggil function anda dan letak apa yang dipulangkan ke halaman.

Component tree

Component me-render component lain, jadi aplikasi membentuk pokok. App berada di atas sekali (root).

Daripada reka bentuk kepada pokok

Beginilah halaman kedai kecil boleh dipecahkan. Setiap baris ialah satu component; inden menunjukkan siapa me-render siapa.

App
├── Header
├── Specials
├── Menu
│   ├── MenuItem   (Nasi lemak)
│   ├── MenuItem   (Mee goreng)
│   └── MenuItem   (Teh tarik)
└── Footer

• Satu tugas setiap satu. Kalau anda boleh terangkan sesuatu kotak dalam beberapa perkataan ("footer waktu operasi"), ia component yang baik. Kalau perlu "dan… dan…", pecahkan lagi.
• Berulang? Bina sekali. Kad yang sama dipaparkan 20 kali ialah satu component yang digunakan 20 kali. Baiki bug sekali, terus baik di semua tempat.
• Namakan seperti pasukan reka bentuk akan namakan. Header, ProductCard, CheckoutButton — nama menjadikan kod mudah dibaca seperti skrin itu sendiri.

Rupa sebuah component

Component cuma function yang memulangkan JSX. Untuk menggunakannya, tulis namanya seperti tag. Memindahkan markup ke dalam component tidak mengubah apa yang ada di skrin — ia mengubah betapa tersusun kod anda.

export default function App() {
  return (
    <div className="page">
      <header className="header">
        <h1>Warung Kak Ani</h1>
      </header>
      <footer className="footer">
        <p>Open daily, 7am – 2pm</p>
      </footer>
    </div>
  );
}

function Header() {
  return (
    <header className="header">
      <h1>Warung Kak Ani</h1>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <p>Open daily, 7am – 2pm</p>
    </footer>
  );
}

export default function App() {
  return (
    <div className="page">
      <Header />
      <Footer />
    </div>
  );
}