JSX: Menulis UI dengan JavaScript
Aturan JSX: ekspresi {}, className, atribut camelCase, style object, dan self-closing tag.
JSX = HTML di dalam JavaScript
JSX terlihat seperti HTML tetapi sebenarnya JavaScript. Browser tidak memahaminya, jadi alat seperti Babel/Vite mengubahnya menjadi pemanggilan fungsi:
<h1 className="judul">Halo</h1>
// diubah menjadi:
React.createElement("h1", { className: "judul" }, "Halo");Menyisipkan nilai dengan { }
Di dalam JSX, kurung kurawal berarti "di sini ada ekspresi JavaScript":
const nama = "Dina";
const umur = 20;
<h2>Halo, {nama}!</h2>
<p>Tahun depan {umur + 1} tahun</p>
<p>{nama.toUpperCase()}</p>
<p>{umur >= 17 ? "Dewasa" : "Anak"}</p>Boleh: variable, perhitungan, pemanggilan fungsi, ternary. Tidak boleh: pernyataan seperti if atau for langsung di dalam { }.
Atribut berbeda dari HTML
| HTML | JSX |
|---|---|
class="kartu" | className="kartu" |
for="email" | htmlFor="email" |
onclick="..." | onClick={...} |
tabindex="0" | tabIndex={0} |
style="color:red" | style={{ color: "red" }} |
Atribut ditulis camelCase. Nilai dinamis memakai { } (tanpa tanda kutip): <img src={foto} alt={nama} />.
Style adalah object
Kurung kurawal ganda: yang luar untuk ekspresi JS, yang dalam adalah object:
<div style={{ color: "green", fontSize: "20px", backgroundColor: "#eee" }}>Properti CSS ditulis camelCase (backgroundColor, bukan background-color).
Setiap tag harus ditutup
<img src="a.png" alt="" />
<input type="text" />
<br />Satu elemen akar
Seperti bab sebelumnya: bungkus dengan <div> atau Fragment <>...</>.
Komentar di JSX
{/* Ini komentar di dalam JSX */}Keamanan: otomatis ter-escape
Nilai di { } otomatis di-escape sehingga input pengguna tidak dieksekusi sebagai HTML. Ini melindungi dari serangan XSS. (Ada dangerouslySetInnerHTML untuk kasus khusus — pakai dengan sangat hati-hati.)
Teks panjang di beberapa baris
Bungkus JSX multi-baris dengan kurung ( ) setelah return agar tidak terkena automatic semicolon insertion:
return (
<div>...</div>
);