React: Membangun Antarmuka Pengguna · 2/9

Component dan JSX

JSX itu cuma pemanggilan function. Begitu kamu melihatnya, aturannya berhenti terasa asal-asalan.

Baca 25 menit

Setelah pelajaran ini kamu bisa

Menjelaskan JSX dikompilasi jadi apa
Menulis sebuah component dan tahu kenapa namanya harus berhuruf kapital
Memakai ekspresi, kondisional, dan list di dalam JSX
Menjelaskan kenapa JSX memakai `className` dan `htmlFor`

Component adalah function yang mengembalikan deskripsi UI. Itu seluruh definisinya. JSX adalah sintaks yang membuat deskripsi itu tampak seperti HTML, dan ia dikompilasi jadi pemanggilan function biasa.

tsx

// What you write:
function Greeting({ name }) {
  return <p className="greeting">Hello, {name}</p>;
}

// What the compiler produces (roughly):
function Greeting({ name }) {
  return jsx("p", { className: "greeting", children: ["Hello, ", name] });
}

Begitu kamu melihat JSX itu pemanggilan function yang mengembalikan object, aturannya berhenti terasa asal-asalan — itu cuma aturan JavaScript.

Coba sendiri

createElement dan renderer yang berfungsi. Ini JSX dengan gula sintaksisnya dibuang.

// What JSX compiles to: a function returning a plain object.
function createElement(type, props, ...children) {
  return { type: type, props: props ?? {}, children: children.flat() };
}

// Turn that description into HTML text, the way React turns it into DOM.
function renderToString(node) {
  if (node === null || node === undefined || node === false) return "";
  if (typeof node === "string" || typeof node === "number") return String(node);

// A component is a FUNCTION. Call it to get its description.
  if (typeof node.type === "function") {
    return renderToString(node.type(node.props, node.children));
  }

const attributes = Object.entries(node.props)
    .filter(([key]) => key !== "children")
    .map(([key, value]) => " " + (key === "className" ? "class" : key) + '="' + value + '"')
    .join("");

const inner = node.children.map(renderToString).join("");
  return "<" + node.type + attributes + ">" + inner + "</" + node.type + ">";
}

// A component: a function taking props, returning a description.
function Badge(props) {
  return createElement("span", { className: "badge" }, props.label);
}

function VenueCard(props) {
  return createElement(
    "article",
    { className: "card" },
    createElement("h3", null, props.name),
    props.featured ? createElement(Badge, { label: "Featured" }) : null,
    createElement("p", null, props.nights + " nights")
  );
}

console.log(renderToString(createElement(VenueCard, { name: "Villa Sunset", nights: 3, featured: true })));
console.log("");
console.log(renderToString(createElement(VenueCard, { name: "Villa Rain", nights: 1, featured: false })));

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Perhatikan dua hal di renderer itu. Sebuah component dipanggil sebagai function untuk mendapatkan output-nya — itu benar-benar seluruh arti dari "me-render sebuah component". Dan null di-render jadi tidak ada apa-apa, itu sebabnya condition ? <Thing /> : null adalah cara standar menampilkan sesuatu secara kondisional.

Aturan JSX, dan alasannya

Aturan	Karena
`className`, bukan `class`	`class` adalah kata kunci di JavaScript
`htmlFor`, bukan `for`	`for` juga kata kunci
`onClick`, bukan `onclick`	Props memakai camelCase, seperti identifier JavaScript
Satu elemen root per return	Sebuah function mengembalikan satu nilai
`<br />` harus menutup sendiri	Ia dikompilasi jadi pemanggilan yang butuh penutup
`{}` untuk ekspresi apa pun	Itu lubang tempat JavaScript masuk
`{/* komentar */}`	Komentar juga menempati slot ekspresi

tsx

function VenueList({ venues, query }) {
  return (
    <>                                  {/* a Fragment: group without a wrapper div */}
      <h2>Venues</h2>

      {/* Any expression goes in braces */}
      <p>{venues.length} results for {query}</p>

      {/* Conditional: && for "show or nothing" */}
      {venues.length === 0 && <p>No venues found.</p>}

      {/* Conditional: ternary for "one or the other" */}
      {venues.length > 0 ? <Results venues={venues} /> : <EmptyState />}

      {/* Lists: map to an array of elements. key is required. */}
      <ul>
        {venues.map((venue) => (
          <li key={venue.id}>{venue.name}</li>
        ))}
      </ul>
    </>
  );
}

Coba sendiri

Nilai mana yang di-render React jadi output terlihat, dan mana yang hilang.

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Di proyek ini, buka features/lesson/callout.tsx. Identifikasi: props apa yang diterimanya, di mana children dipakai, bagaimana ikon kondisionalnya dipilih, dan setiap tempat ekspresi JavaScript muncul di dalam kurung kurawal. Lalu temukan component yang mengembalikan Fragment (<>) dan jelaskan kenapa ia membutuhkannya.

Hasil yang diharapkan

Kamu bisa menunjuk setiap konstruksi dari tabel di atas pada kode nyata.