JSX adalah cara menulis tampilan di React: bentuknya mirip HTML, tapi ditulis di dalam JavaScript. Namanya singkatan dari JavaScript XML. Browser gak mengerti JSX, jadi sebelum kodenya jalan, build tool seperti Vite mengubah tiap tag JSX jadi panggilan fungsi JavaScript biasa. Mirip template undangan: kalimatnya sudah dicetak, nama tamunya diisi di kotak kosong. Di JSX, kotak kosong itu ditulis dengan kurung kurawal {}.
🧪 Tebakan cepat: ada
const nama = "Budi", lalu kamu menulis<h2>Halo, nama!</h2>. Yang tampilHalo, Budi!atauHalo, nama!? Jawabannya ada di bagian "Kurung kurawal: tempat nilai JavaScript".
JSX jadi apa?
Ambil komponen kecil ini:
function App() {
const nama = "Budi"
const jumlah = 3
return (
<div className="kartu">
<h2>Halo, {nama}!</h2>
<p>Kamu punya {jumlah * 2} poin.</p>
</div>
)
}
Sebelum jalan, JSX di dalam return itu diubah jadi:
React.createElement(
"div",
{ className: "kartu" },
React.createElement("h2", null, "Halo, ", nama, "!"),
React.createElement("p", null, "Kamu punya ", jumlah * 2, " poin.")
)
Lalu React membuat DOM ini di halaman:
<div class="kartu">
<h2>Halo, Budi!</h2>
<p>Kamu punya 6 poin.</p>
</div>
- Satu tag jadi satu panggilan
React.createElement(jenis, atribut, ...isi). Tag tanpa atribut dapatnulldi posisi atribut. {nama}dan{jumlah * 2}dihitung dulu sebagai JavaScript. Yang masuk ke halaman hasilnya:Budidan6.classNamedi JSX jadi atributclassdi DOM.- Build tool modern menulis panggilannya sedikit beda,
jsx(...)darireact/jsx-runtime, tapi artinya sama: satu tag, satu panggilan fungsi yang menghasilkan objek. Dari objek-objek itulah React membuat DOM.
Kurung kurawal: tempat nilai JavaScript
Dengan nama = "Budi":
| JSX | Yang tampil |
|---|---|
<h2>{nama}</h2> |
Budi |
<h2>nama</h2> |
nama |
<p>{2 + 3}</p> |
5 |
<p>{nama.toUpperCase()}</p> |
BUDI |
<p>{nama === "Budi" ? "Halo Bos" : "Halo"}</p> |
Halo Bos |
Tanpa kurung kurawal, nama cuma teks biasa. Jadi <h2>Halo, nama!</h2> menampilkan Halo, nama!, bukan Halo, Budi!. Itu jawaban tebakannya.
Di dalam {} cuma boleh ekspresi: kode yang menghasilkan satu nilai, seperti variabel, hitungan, pemanggilan fungsi, atau ternary syarat ? a : b. Statement seperti if, for, atau const gak bisa ditaruh di sana, karena statement gak menghasilkan nilai. {if (login) { ... }} gagal di-compile.
Aturan JSX yang beda dari HTML
- Satu elemen paling luar.
returncuma bisa mengembalikan satu nilai, jadi dua elemen sejajar harus dibungkus. Pakai<div>, atau Fragment<>...</>kalau kamu gak mau ada elemen tambahan di DOM. - Semua tag ditutup.
<img />,<br />,<input />. Di HTML boleh<br>, di JSX wajib ada/. className, bukanclass.htmlFor, bukanfor.classdanforadalah kata kunci di JavaScript.- Atribut dua kata pakai camelCase.
onClick,tabIndex,maxLength.stylediisi objek, jadi kurung kurawalnya dua:style={{ color: "red" }}. - Comment ditulis
{/* ... */}.<!-- -->gak berlaku di JSX.
function App() {
return (
<>
{/* Fragment: gak ada div tambahan di DOM */}
<h1 className="judul">Toko Budi</h1>
<img src="logo.png" alt="Logo Toko Budi" />
<label htmlFor="email">Email</label>
<input id="email" maxLength={40} />
<p style={{ color: "gray" }}>Buka setiap hari.</p>
</>
)
}
<>dan</>adalah Fragment: pembungkus yang gak ikut jadi elemen di DOM.return (dengan kurung buka di baris yang sama: JSX yang lebih dari satu baris dibungkus kurung( ).maxLength={40}mengirim angka 40. Atribut berisi teks cukup pakai tanda kutip, sepertisrc="logo.png".
⚠️ Jebakan yang sering ketemu
- Dua elemen tanpa pembungkus.
return <h1>Halo</h1><p>Dunia</p>gagal di-compile dengan pesanAdjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?Bungkus dengan<div>atau<>...</>. - Lupa kurung kurawal.
<h2>nama</h2>menampilkan tulisannama. Latihan kedua mengecek isi<h2>datang dari{...}, bukan diketik langsung. ifdi dalam{}. Gagal di-compile. Pakai ternary:{login ? "Halo" : "Silakan masuk"}.classgaya HTML. React masih memasang atributnya, tapi mencetak peringatanInvalid DOM property `class`. Did you mean `className`?di console. BiasakanclassName.
TL;DR: JSX (JavaScript XML) adalah tulisan mirip HTML di dalam JavaScript. Tiap tag diubah jadi React.createElement(jenis, atribut, ...isi), lalu React membuat DOM-nya. {} menyisipkan nilai JavaScript (cuma ekspresi, bukan if atau for); tanpa {}, tulisannya jadi teks biasa. Aturannya: satu elemen paling luar per return (bungkus dengan <div> atau Fragment <>...</>), semua tag ditutup (<img />), className dan htmlFor, atribut camelCase, style={{ ... }}, dan comment {/* ... */}.
