• Apa Itu JSX?
• Kenapa Harus Menggunakan JSX?
• Menulis JSX Dasar
• Menyisipkan Ekspresi JavaScript di JSX
• Aturan Dasar JSX
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah berkenalan dengan React, menginstall Node.js, dan membuat proyek pertama menggunakan Vite.

Pada artikel kali ini, kita akan membahas salah satu konsep paling penting dalam React, yaitu JSX. Konsep ini wajib kita pahami karena hampir semua kode React ditulis dengan menggunakan JSX.

Semoga dengan memahami JSX, kita bisa lebih mudah dalam membangun tampilan aplikasi React.

Apa Itu JSX?

JSX (JavaScript XML) adalah ekstensi sintaks JavaScript yang memungkinkan kita menulis kode HTML di dalam JavaScript. JSX bukanlah string atau template engine, melainkan sebuah sintaks khusus yang akan dikompilasi menjadi fungsi JavaScript.

Contoh JSX:

const element = <h1>Hello, React!</h1>;

Kode di atas terlihat seperti HTML, tetapi sebenarnya ini adalah JSX. Setelah dikompilasi, JSX akan menjadi:

const element = React.createElement("h1", null, "Hello, React!");

Kenapa Harus Menggunakan JSX?

• Mudah Dibaca: JSX lebih natural karena kita bisa menulis struktur HTML langsung di dalam JavaScript.
• Deklaratif: Kita fokus pada tampilan UI, bukan pada proses manual membuat elemen DOM.
• Terintegrasi dengan JavaScript: Kita bisa menyisipkan ekspresi JavaScript langsung di dalam JSX.

Menulis JSX Dasar

Silakan buka file src/App.jsx yang sudah dibuat pada artikel sebelumnya, lalu ubah kode menjadi seperti berikut:

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <p>Belajar JSX itu menyenangkan!</p>
    </div>
  );
}

export default App;

Jika dijalankan, maka halaman akan menampilkan teks Hello React dan Belajar JSX itu menyenangkan!.

Menyisipkan Ekspresi JavaScript di JSX

JSX memungkinkan kita menulis ekspresi JavaScript dengan menggunakan tanda kurung kurawal { }.

const name = "Santri Koding";

function App() {
  return (
    <div>
      <h1>Halo, {name}!</h1>
      <p>Selamat belajar React bersama kita.</p>
    </div>
  );
}

export default App;

Jika kode dijalankan, maka akan tampil teks Halo, Santri Koding!.

Aturan Dasar JSX

Ada beberapa aturan penting saat menulis JSX:

1. Hanya boleh ada satu elemen induk (parent element)

   // ❌ Salah
   return (
     <h1>Hello</h1>
     <p>World</p>
   );
   

   // ✅ Benar
   return (
     <div>
       <h1>Hello</h1>
       <p>World</p>
     </div>
   );
   

   Atau bisa menggunakan <> ... </> yang disebut Fragment.

2. Gunakan className bukan class Karena class adalah keyword di JavaScript, maka di JSX kita gunakan className.

   <h1 className="title">Hello React</h1>
   

3. Gunakan camelCase untuk atribut Misalnya onclick menjadi onClick, tabindex menjadi tabIndex.

   <button onClick={() => alert("Clicked!")}>Klik Saya</button>
   

Kesimpulan

Pada artikel ini, kita sudah belajar tentang JSX, yaitu sintaks khusus di React yang memungkinkan kita menulis HTML di dalam JavaScript.

Kita juga sudah melihat bagaimana cara menulis JSX dasar, menyisipkan ekspresi JavaScript dengan { }, serta aturan-aturan penting yang harus diperhatikan saat menulis JSX.

Di artikel berikutnya, kita akan belajar tentang Components, yaitu pondasi utama dalam membangun aplikasi React.

Terima kasih