JSX adalah cara menulis tag mirip HTML langsung di dalam JavaScript. Di Solid, compiler menerjemahkan JSX itu jadi elemen DOM asli, elemen yang sama dengan hasil document.createElement. Bayangin Kak Nadia membuat kartu harga untuk tiap buku di Toko Buku Kak Nadia. Dia membuat satu cap berisi bagian yang selalu sama (bingkai, tulisan "Rp"), lalu tiap kartu cukup dicap, dan bagian yang beda (judul, harga) ditulis tangan di tempat kosongnya. JSX-mu adalah rancangan kartunya. Compiler Solid membuat capnya sekali, dan tiap komponen dipakai, capnya ditekan jadi elemen asli lalu bagian kosongnya diisi.
🧪 Tebakan cepat: di Solid,
const judul = <h1>Toko Buku Kak Nadia</h1>laluconsole.log(judul). Yang tercetak apa: objek gambaran seperti{ type: "h1", props: {...} }, teks"<h1>Toko Buku Kak Nadia</h1>", atau elemen<h1>asli? Jawabannya ada di bagian "JSX jadi elemen DOM asli".
Menulis JSX
const buku = { judul: "Laskar Pelangi", penulis: "Andrea Hirata", harga: 89000 }
function KartuBuku() {
return (
<div class="kartu">
<h2>{buku.judul}</h2>
<p>{buku.penulis}</p>
<p style={{ color: "#b45309", "font-size": "20px" }}>
Rp{buku.harga.toLocaleString("id-ID")}
</p>
</div>
)
}
Hasilnya kartu berisi judul Laskar Pelangi, penulis Andrea Hirata, dan harga Rp89.000 berwarna cokelat.
- Satu elemen terluar.
returnmengembalikan satu elemen, di sini<div>. Kalau gak mau menambahdiv, bungkus dengan fragment<>...</>. - Kurung kurawal untuk JavaScript.
{buku.judul}artinya "taruh nilaibuku.juduldi sini". Isinya boleh ekspresi apa pun, misalnya{buku.harga.toLocaleString("id-ID")}yang mengubah89000jadi89.000. - Semua tag ditutup. Tag tanpa isi ditulis dengan garis miring:
<input />,<img />,<br />. - Teks di luar kurung kurawal ditulis apa adanya.
Rpsebelum{...}muncul persis seperti itu.
Latihan pelajaran ini memakai aturan yang sama: di dalam <div> yang sudah ada, tambahkan <h1>Belajar Solid</h1> dan <p>Solid menggunakan JSX.</p>. Teksnya dicek persis, termasuk titik di akhir paragraf.
JSX jadi elemen DOM asli
Ini kode yang ditulis compiler Solid 1.9 (babel-preset-solid) untuk KartuBuku tadi:
var _tmpl$ = _$template(`<div class=kartu><h2></h2><p></p><p style=color:#b45309;font-size:20px>Rp`)
function KartuBuku() {
return (() => {
var _el$ = _tmpl$(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.nextSibling,
_el$4 = _el$3.nextSibling
_$insert(_el$2, () => buku.judul)
_$insert(_el$3, () => buku.penulis)
_$insert(_el$4, () => buku.harga.toLocaleString("id-ID"), null)
return _el$
})()
}
- Semua bagian yang tetap (tag,
class,style, teksRp) dikumpulkan jadi satu string HTML di_$template. Itu capnya. _tmpl$()menyalin string itu jadi elemen DOM asli._el$2,_el$3,_el$4adalah<h2>dan dua<p>di dalamnya._$insert(...)mengisi bagian kosongnya dari ekspresi di kurung kurawal.- Fungsinya mengembalikan
_el$, sebuahHTMLDivElement.
Jadi console.log(judul) mencetak elemen <h1> asli, sebuah HTMLHeadingElement yang bisa kamu tempel ke halaman dengan document.body.append(judul). Itu jawaban tebakannya. Di React, JSX yang sama menghasilkan objek gambaran ({ type: "h1", props: {...} }) yang baru jadi elemen setelah React memprosesnya.
Nama atribut ala HTML: class dan for
Karena compiler Solid menulis JSX-mu jadi string HTML dan pemanggilan DOM langsung, nama atributnya mengikuti HTML:
<label for="cari">Cari buku</label>
<input id="cari" class="kotak-cari" />
classmemberi kelas CSS, sama seperti di HTML. React memakaiclassName, karena JSX React dipetakan ke properti JavaScript elemen (el.className), bukan ke atribut HTML.fordi<label>menghubungkan label ke input ber-idsama. React menulisnyahtmlFor.- Solid 1.x masih menerima
classNamedanhtmlForsebagai nama lama, tapi dokumentasi Solid dan latihan di sini memakaiclassdanfor. Latihan ini menolak kataclassNamedi mana pun di kodemu (komentar gak dihitung). - Event ditulis dengan awalan
on:onClick,onInput. Detailnya di pelajaran Event Handling.
style sebagai objek
Atribut style boleh string biasa (style="color: red"), atau objek di dalam kurung kurawal ganda: kurung luar untuk JavaScript, kurung dalam untuk objeknya.
<p style={{ color: "#b45309", "font-size": "20px" }}>Rp89.000</p>
- Kuncinya ditulis seperti di CSS, kebab-case:
"font-size","background-color". Karena ada tanda minusnya, kunci itu harus diberi tanda kutip. - Nilainya string lengkap dengan satuan:
"20px", bukan20. fontSize(camelCase, gaya React) gak jalan di Solid. Compiler menulisnya apa adanya jadifontSize:20pxdi template, browser gak mengenal properti CSS bernamafontSize, lalu membuangnya. Harganya tetap ukuran biasa.
Editor latihan di sini memakai model kecil Solid, bukan compiler aslinya, dan di sana fontSize kebetulan masih jalan. Jangan jadikan patokan: di proyek Solid sungguhan, pakai kebab-case.
⚠️ Jebakan yang sering ketemu
classNamedari kebiasaan React. Di Solid tulisclass. Latihan ini gagal kalau kataclassNameada di kodemu, walau tampilannya benar.- Kunci style camelCase.
{{ fontSize: "20px" }}dibuang browser di Solid sungguhan. Pakai{{ "font-size": "20px" }}. - Dua elemen terluar tanpa pembungkus.
return <h1>...</h1><p>...</p>error. Bungkus dengan<div>atau<>...</>. - Teks yang beda sedikit.
Solid menggunakan JSXtanpa titik gak sama denganSolid menggunakan JSX.. Salin teks dari brief persis.
TL;DR: JSX di Solid di-compile jadi elemen DOM asli: bagian tetapnya jadi satu template HTML yang di-clone, bagian {...} diisi lewat insert. Karena itu <h1>...</h1> menghasilkan HTMLHeadingElement sungguhan, bukan objek gambaran seperti di React. Nama atributnya ikut HTML: class (bukan className) dan for (bukan htmlFor). style boleh objek dengan kunci kebab-case bertanda kutip, style={{ color: "#b45309", "font-size": "20px" }}; camelCase seperti fontSize dibuang browser. Kembalikan satu elemen terluar, tutup semua tag, dan pakai kurung kurawal untuk nilai JavaScript.
