JSX: Memahami Dasar-dasar React

apa itu jsx?

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:

jsx

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

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

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

Contoh transpilasi:

jsx

// 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.

jsx

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

html

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

jsx

// ❌ 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={...}>.

jsx

// ❌ 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>
);

html

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

3. Ganti `class` dengan `className`:

Karena class adalah keyword javascript

jsx

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

4. Javascript di JSX

Pakai curly braces { } untuk menyisipkan variabel/ekspresi.

jsx

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

Contoh Praktis

jsx

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