JSX: ekstensi JavaScript dan contoh penggunaan

Apa itu JSX?

JSX (JavaScript XML) — ekstensi sintaks untuk JavaScript, pertama kali diperkenalkan di React pada tahun 2013. Ini memungkinkan pengembang untuk mendeskripsikan struktur antarmuka pengguna secara deklaratif, menggabungkan markup dan logika dalam satu file.

Sebelum munculnya JSX, pengembang menggunakan templat teks (Mustache, Handlebars) atau membuat elemen DOM secara manual melalui document.createElement. Kedua pendekatan memiliki kekurangan: templat teks tidak diperiksa tipenya, dan pembuatan DOM manual rumit dan rentan terhadap kesalahan.

React memilih jalan yang berbeda — menyematkan markup langsung ke dalam kode. Keputusan ini menimbulkan perdebatan di komunitas, tetapi seiring waktu menjadi standar. Saat ini JSX tidak hanya digunakan di React, tetapi juga di SolidJS, Preact, Qwik dan bahkan di Vue melalui plugin.

Sintaks dasar JSX

Elemen JSX terlihat seperti tag HTML, tetapi disematkan langsung ke JavaScript. Setiap elemen ditranspilasi menjadi panggilan React.createElement dengan tiga argumen: tipe elemen, objek props, dan elemen anak. Satu elemen root — aturan wajib: ekspresi JSX harus mengembalikan satu elemen induk atau fragmen.

import React from 'react';

// JSX dasar - satu elemen root
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragmen untuk pengelompokan

Ketika node DOM tambahan tidak diperlukan, gunakan React.Fragment atau sintaks pendek <></>. Fragmen tidak membuat elemen DOM nyata, hanya mengelompokkan node anak. Ini sangat berguna dalam tabel dan daftar, di mana pembungkus tambahan akan mengganggu struktur HTML.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

Ekspresi dan variabel di JSX

Ekspresi JavaScript apa pun disisipkan ke JSX melalui kurung kurawal { }. Di dalamnya dapat digunakan variabel, panggilan fungsi, operator ternary, dan metode array. Rendering bersyarat dilakukan melalui operator ternary atau AND logis.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Batasan utama — di dalam kurung kurawal hanya dapat digunakan ekspresi, bukan pernyataan. if/else, for, switch tidak dapat digunakan — hanya operator ternary, operator logis, dan metode array. Panggilan fungsi, termasuk fungsi panah, diperbolehkan.

Perbedaan JSX dan HTML

JSX secara visual mirip dengan HTML, tetapi memiliki perbedaan mendasar. Atribut ditulis dalam camelCase — className bukan class, onClick bukan onclick, tabIndex bukan tabindex. Ini karena JSX ditranspilasi ke JavaScript, di mana tanda hubung dalam nama properti tidak diperbolehkan.

Perbedaan penting lainnya — tag yang menutup sendiri. Di HTML, beberapa tag (br, hr, input) mungkin tidak ditutup. Di JSX, semua tag yang menutup sendiri harus memiliki garis miring penutup: <br />, <input />. Nama atribut SVG juga dikonversi ke camelCase: strokeWidth, fillOpacity.

Bagaimana JSX ditranspilasi ke JavaScript

Peramban tidak memahami JSX secara langsung. Sebelum eksekusi, kode JSX melewati transpiler — Babel, TypeScript atau esbuild. Setiap elemen JSX diubah menjadi panggilan createElement atau jsx/runtime.

Transformasi melalui Babel

// JSX asli
const element = <h1 className="title">Hello</h1>;

// Setelah transpilasi
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

Sejak React 17, muncul transformasi JSX baru yang tidak memerlukan impor React. Impor otomatis jsx-runtime memungkinkan penulisan komponen tanpa import React from 'react'. Babel dan TypeScript mendukung transformasi ini melalui pengaturan {"runtime": "automatic"}.

JSX di luar React: Solid, Preact, Vue

Meskipun JSX diasosiasikan dengan React, framework lain juga menggunakannya. SolidJS menggunakan JSX dengan kompilasi ke node DOM nyata, tanpa Virtual DOM. Preact — alternatif ringan untuk React dengan dukungan penuh JSX. Vue mendukung JSX melalui @vue/babel-plugin-jsx, meskipun templat utamanya adalah template.

Perbedaan utama — semantik ekspresi. Di React, ekspresi JSX dieksekusi setiap kali rendering. Di SolidJS, JSX dikompilasi sekali, dan pembaruan dilacak melalui sinyal. Ini memengaruhi kinerja: SolidJS tidak memerlukan Virtual DOM dan rekonsiliasi, sehingga rendering JSX lebih cepat.

Di TypeScript, JSX didukung di tingkat bahasa. File dengan ekstensi .tsx secara otomatis memproses sintaks JSX. Tipifikasi props — salah satu keunggulan utama TypeScript + JSX: IDE menyarankan atribut yang diharapkan, tipe callback, dan kewajiban props.

Praktik terbaik bekerja dengan JSX

Tulis kode JSX yang mudah dibaca dan dipelihara. Keluarkan ekspresi kompleks ke variabel atau fungsi terpisah — ini meningkatkan keterbacaan dan memungkinkan pengujian logika terpisah dari markup. Gunakan fragmen daripada pembungkus div yang tidak perlu.

Aturan indentasi — patuhi indentasi untuk elemen bersarang. Setiap tingkat sarang — satu tingkat indentasi. Tag penutup harus sejajar dengan tag pembuka. Untuk atribut panjang, gunakan pemutusan baris.

Hindari fungsi panah inline di props, jika dibuat setiap kali rendering. Dalam kasus seperti itu, bungkus callback dalam useCallback atau keluarkan fungsi ke luar komponen. Bagi komponen kompleks menjadi lebih kecil — setiap komponen harus bertanggung jawab atas satu unit logis antarmuka.