APA ITU JSX?

Kamu akan melihat format file jsx saat membuat komponen React. Yuk kenalan dengan JSX!

Apa itu JSX?

JSX (JavaScript XML) adalah sintaks khusus yang digunakan di React untuk membuat elemen UI. Dengan JSX, kamu bisa menulis kode seperti HTML langsung di dalam JavaScript.

Contoh:

const element = <h1>Halo Dunia</h1>;

Tanpa JSX, kamu harus menulis seperti ini:

const element = React.createElement('h1', null, 'Halo Dunia');

Jadi lebih mudah kan?

🔤 JSX Bukan HTML

Meskipun terlihat seperti HTML, JSX bukan HTML sungguhan. JSX akan ditransformasi jadi JavaScript oleh build tool seperti Babel.

⚠️ Aturan Penting JSX

1. Satu elemen root JSX harus dibungkus dalam satu elemen pembungkus:

❌ Contoh Salah:

return <h1>Halo</h1><p>Selamat datang</p>;

✅ Contoh Benar:

return (
  <div>
    <h1>Halo</h1>
    <p>Selamat datang</p>
  </div>
);

Semuanya berada di dalam satu elemen <div>, sesuai dengan aturan kalau JSX harus punya satu elemen root.

2. Gunakan className bukan class Karena class sudah dipakai di JavaScript, gunakan className:

   <div className="kotak"></div>

3. Gunakan {} untuk ekspresi JavaScript Kamu bisa menyisipkan variabel dan fungsi:

   const nama = "Hilman";
   <h1>Halo, {nama}!</h1>

🧪 Contoh JSX

function Greeting() {
  const nama = "Dina";
  return <h2>Halo, {nama}! Apa kabar?</h2>;
}