Materi
Tanda kutip di JSX berarti teks apa adanya, seperti alt="Logo warung". Untuk memakai nilai JavaScript, ganti tanda kutip dengan kurung kurawal. Di dalam kurung kurawal boleh ada ekspresi apa pun yang menghasilkan nilai: variabel, operasi hitung, properti objek, atau pemanggilan fungsi.
const toko = { nama: "Toko Roti Sari", kota: "Bogor", logo: "logo-sari.png" };
const rupiah = (n) => "Rp" + n.toLocaleString("id-ID");
export default function Kop() {
return (
<header>
<img src={toko.logo} alt={"Logo " + toko.nama} />
<h1>{toko.nama}, {toko.kota}</h1>
<p>Paket isi enam {rupiah(6 * 4500)}</p>
</header>
);
}Kurung kurawal hanya bekerja di dua tempat: sebagai teks di antara tag, dan sebagai nilai atribut tepat sesudah tanda sama dengan. src={toko.logo} membaca variabel, sedangkan src="{toko.logo}" mengirim teks {toko.logo} apa adanya. Yang boleh masuk hanya ekspresi, bukan pernyataan: if dan for tidak bisa ditulis di dalamnya.
Objek juga ditulis dengan kurung kurawal, sehingga gaya inline tampak berkurung ganda: style={{ backgroundColor: "gold", fontWeight: "bold" }}. Kurung luar menandai JavaScript, kurung dalam adalah objeknya. Nama properti CSS di objek itu ditulis camelCase, jadi background-color menjadi backgroundColor.
