Langkau ke kandungan
WANCODE
EN

JSX Diterangkan

15 minitPertengahanReact

Dalam pelajaran ini

  • Masukkan nilai dan pengiraan JavaScript ke dalam JSX dengan { }
  • Guna versi JSX bagi tabiat HTML: className, style={{ }}, tag tutup sendiri
  • Pulangkan satu elemen root, atau Fragment <>…</>
  • Terangkan bahawa JSX dikompil menjadi panggilan function biasa yang mencipta objek

Idea utama

JSX ialah cara yang lebih mesra untuk menulis panggilan function JavaScript. Setiap tag menjadi panggilan yang memulangkan objek yang menerangkan UI — sebab itulah ia ikut peraturan JavaScript, bukan HTML.

Tag dalam component anda nampak seperti HTML, tetapi pelayar tidak pernah melihatnya. Sebelum kod anda dijalankan, compiler (dalam WANCode ia Sucrase; dalam projek sebenar biasanya Babel, esbuild atau SWC) menukar setiap tag JSX kepada panggilan function JavaScript.

Apa yang anda tulis (JSX)

JSX
const title = (
  <h1 className="title">
    Hello, {name}!
  </h1>
);

Apa ia menjadi (transform klasik)

JavaScript
const title = React.createElement(
  "h1",
  { className: "title" },
  "Hello, ",
  name,
  "!"
);

createElement(type, props, ...children) memulangkan objek biasa, lebih kurang { type: "h1", props: { className: "title", children: [...] } }. React membaca objek ini untuk membina DOM sebenar.

Runtime "automatik" moden

Sejak React 17, alatan biasanya mengkompil JSX kepada jsx("h1", { className: "title", children: … }) yang di-import secara automatik dari react/jsx-runtime, dan bukannya React.createElement. Hasilnya objek jenis yang sama — dan sebab itulah anda tak perlu lagi import React di bahagian atas setiap fail.

Kurungan kerinting: tingkap ke JavaScript

Di dalam JSX, { } bermaksud "nilaikan JavaScript ini dan letak hasilnya di sini". Apa sahaja yang menghasilkan nilai boleh digunakan: variable, matematik, panggilan function, ternary. Pernyataan seperti if atau for tidak boleh — ia tidak menghasilkan nilai.

JSX
const user = { name: "Mei Ling", points: 1250 };
const isMember = true;

<div>
  <h2>{user.name.toUpperCase()}</h2>
  <p>Points: {user.points}</p>
  <p>Next reward in {2000 - user.points} points</p>
  <p>{isMember ? "Member price" : "Normal price"}</p>
  {/* this is a comment inside JSX */}
</div>

Tabiat HTML yang berubah dalam JSX

className
class ialah perkataan simpanan dalam JavaScript, jadi JSX guna className="card". (for pada label menjadi htmlFor.)
style={{ }}
Style menerima objek JavaScript, bukan string. Kurungan luar = "JavaScript di sini", kurungan dalam = objek itu. Nama property dalam camelCase: fontWeight, backgroundColor. Nombor biasa bermaksud px: padding: 8.
Self-closing tags
Setiap tag mesti ditutup. Elemen kosong diakhiri dengan />: <img />, <br />, <hr />, <input />. <hr> sahaja ialah ralat sintaks.
camelCase attributes
Kebanyakan atribut menjadi camelCase: onclick → onClick, tabindex → tabIndex. (aria-* dan data-* kekal seperti biasa.)

Tabiat HTML (rosak atau beri amaran)

JSX
<p class="note" style="color: red">
  Hot!<br>
</p>

JSX

JSX
<p className="note" style={{ color: "red" }}>
  Hot!<br />
</p>

Satu induk setiap return — atau Fragment

Function hanya boleh memulangkan satu nilai, dan setiap tag JSX ialah satu panggilan function. Jadi component mesti memulangkan satu elemen root. Kalau anda tak mahu <div> tambahan dalam halaman, balut elemen-elemen bersebelahan dengan Fragment: <>…</>. Ia mengumpulkannya tanpa menambah apa-apa ke DOM.

Ralat sintaks: dua root

JSX
return (
  <h1>Menu</h1>
  <p>Fresh daily</p>
);

Fragment

JSX
return (
  <>
    <h1>Menu</h1>
    <p>Fresh daily</p>
  </>
);

Resit itu mencetak perkataan customer, quantity dan item secara literal, bukan nilai dalam variable di atas. Guna { } supaya:

- tajuk berbunyi Receipt for Hafiz, - baris itu berbunyi 3 x Roti canai, - jumlah dikira daripada quantity * price dan dipaparkan dengan dua titik perpuluhan: RM5.40.

Semakan

  • Tajuk memaparkan nama pelanggan
  • Baris memaparkan kuantiti dan item
  • Jumlah memaparkan RM5.40
  • Jumlah dikira dalam JSX, bukan ditaip

Uji kefahaman

Q1

Dengan transform klasik, <p className="tip">Hi</p> dikompil menjadi apa?

Q2

Yang manakah sah di dalam kurungan kerinting JSX?

Q3

Kenapa style sebaris guna kurungan kerinting berganda: style={{ color: "red" }}?

Apa yang anda pelajari

  • JSX dikompil menjadi panggilan function (createElement / jsx) yang memulangkan objek biasa yang menerangkan UI.
  • { } memasukkan apa-apa ungkapan JavaScript: variable, matematik, panggilan method, ternary.
  • Guna className, style={{ camelCase: value }} dan tutup setiap tag (<hr />).
  • Pulangkan satu elemen root; guna Fragment <>…</> untuk mengumpulkan elemen bersebelahan tanpa pembalut tambahan.
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 3