JSX: Memahami Dasar-dasar React

Ketika pertama kali belajar React, banyak banget istilah baru yang muncul seperti, JSX, state, props, hooks... rasanya seperti belajar bahasa baru.

Sebagai seseorang yang juga masih belajar, tulisan ini saya buat untuk merefleksikan apa yang saya pelajari, sekaligus berbagi buat teman-teman yang juga baru mulai perjalanan dengan React.

Apa itu JSX?

JSX (Javascript XML) adalah syntax seperti HTML yang bisa ditulis langsung di Javascript. Sekilas kelihatan seperti HTML, tapi sebenarnya kita sedang menulis JavaScript. Contoh:

const element = <h1>Halo Guys!</h1>;

Awalnya saya bingung, kok bisa ada tag HTML di file JavaScript? Tapi ternyata ini hanya sintaks khusus yang ditranspile jadi React.createElement() .

Browser tidak mengerti JSX, jadi React mengubahnya jadi JavaScript biasa melalui proses transpilasi dengan tools seperti Babel.js.

Contoh transpilasi:

// Sebelum transpilasi (JSX)
const card = (
  <div className="card">
    <h2>{title}</h2>
    <p>{content}</p>
  </div>
);  
 
// Sesudah (JavaScript)
const card = React.createElement(
  "div",
  { className: "card" },
  React.createElement("h2", null, title),
  React.createElement("p", null, content)
); 

Aturan Dasar JSX

1. Return single element:

Komponen harus mengembalikan satu elemen induk.

// ✅ Benar
return (
  <div>
    <h1>Judul</h1>
    <p>Paragraf</p>
  </div>
);

<!-- Output -->
<div>
 <h1>Judul</h1>
 <p>Paragraf</p>
</div>

// ❌ Salah (dua elemen induk)
return <h1>Judul</h1> <p>Paragraf</p>;

2. Return multi element:

Apa itu fragment?

• <></> adalah sintaks singkat (shorthand) dari <React.Fragment>

• Jika perlu memberikan key (misalnya di loop), gunakan <React.Fragment key={...}>.

// ❌ Tanpa Fragment (error karena ada 2 elemen root)
return (
  <h1>Judul</h1>
  <p>Deskripsi</p>
);
 
// ✅ Dengan Fragment (valid)
return (
  <>
    <h1>Judul</h1>
    <p>Deskripsi</p>
  </>
);
 
// ✅ Dengan React.Fragment (explicit)
return (
  <React.Fragment>
    <h1>Judul</h1>
    <p>Deskripsi</p>
  </React.Fragment>
);

<!-- Output -->
<h1>Judul</h1>
<p>Deskripsi</p>

3. Ganti class dengan className:

Karena class adalah keyword jacascript

<div className="container">...</div>

4. Javascript di JSX

Pakai curly braces { } untuk menyisipkan variabel/ekspresi.

const name = "Budi";
const greeting = <p>Halo, {name.toUpperCase()}!</p>;
// Output: Halo, BUDI!

Contoh Praktis

function Greeting() {
  const user = "Alice";
  return (
    <div className="card">
      <h1>Selamat Datang, {user}!</h1>
      <button onClick={() => alert("Hai!")}>Klik Ini</button>
    </div>
  );
}