Materi
JSX mirip HTML, tetapi aturannya lebih ketat karena setiap tag diubah menjadi objek JavaScript. Ada tiga aturan yang berlaku di setiap komponen.
Pertama, komponen mengembalikan satu elemen akar. Fungsi tidak bisa mengembalikan dua objek sekaligus tanpa membungkusnya, dan karena itu dua tag bersebelahan harus dibungkus satu tag induk. Bila pembungkus div tidak diinginkan di halaman, pakai Fragment yang ditulis <>…</>. Fragment mengelompokkan elemen tanpa menambah elemen apa pun ke DOM.
Kedua, semua tag ditutup. Tag yang di HTML boleh dibiarkan terbuka, seperti img, input, dan br, ditulis <img />, <input />, dan <br />, sedangkan setiap <li> diakhiri </li>.
Ketiga, sebagian besar atribut ditulis camelCase. Atribut JSX menjadi kunci objek JavaScript, dan nama kunci yang nyaman dipakai tidak memuat tanda hubung atau kata cadangan. class adalah kata cadangan JavaScript, jadi ditulis className; for ditulis htmlFor; stroke-width menjadi strokeWidth. Pengecualiannya atribut aria-* dan data-*, yang tetap ditulis bertanda hubung seperti di HTML.
export default function IsianKota() {
return (
<>
<label className="label" htmlFor="kota">Kota</label>
<input id="kota" aria-describedby="catatan-kota" />
<p id="catatan-kota" data-jenis="bantuan">Contoh: Pekanbaru</p>
</>
);
}