Apa Itu JSX?

   March 24, 2025       Mahatma Mahardhika

---

Apa Itu JSX?

Table of Contents

• Pengertian JSX
• Kenapa Menggunakan JSX?
• Sintaks Dasar JSX
• Perbedaan JSX dan HTML
• Menggunakan JSX dalam React
• Manfaat dan Keuntungan
• Contoh Penerapan
• Kesimpulan

---

Pengertian JSX

JSX (JavaScript XML) adalah ekstensi sintaks untuk JavaScript yang digunakan dalam React untuk mendeskripsikan tampilan UI. JSX memungkinkan kita untuk menulis kode yang menyerupai HTML di dalam JavaScript.

---

Kenapa Menggunakan JSX?

JSX digunakan karena membuat kode lebih mudah dibaca dan dikelola. Dengan JSX, kita bisa langsung menuliskan struktur UI dalam JavaScript, tanpa perlu menggunakan document.createElement() atau appendChild().

---

Sintaks Dasar JSX

Berikut adalah contoh sederhana JSX dalam React:

const element = 
Hello, World!
;
ReactDOM.render(element, document.getElementById('root'));

JSX juga mendukung ekspresi JavaScript di dalamnya:

const name = "Alice";
const element = 
Hello, {name}!
;

---

Perbedaan JSX dan HTML

JSX	HTML
Gunakan className untuk atribut kelas.	Gunakan class untuk atribut kelas.
Gunakan camelCase untuk properti inline style.	Gunakan sintaks CSS standar.
Harus memiliki satu elemen pembungkus utama.	Tidak memerlukan elemen pembungkus.

---

Menggunakan JSX dalam React

JSX digunakan dalam komponen React untuk merender UI.

function Welcome(props) {
  return 
Hello, {props.name}!
;
}

ReactDOM.render(, document.getElementById('root'));

---

Manfaat dan Keuntungan

• Kode lebih mudah dibaca: Struktur yang menyerupai HTML membuat kode lebih intuitif.
• Lebih efisien: JSX dikompilasi menjadi JavaScript murni yang lebih optimal.
• Mendukung ekspresi JavaScript: Memudahkan manipulasi UI secara dinamis.

---

Contoh Penerapan

JSX sering digunakan dalam React untuk membangun UI secara dinamis, seperti dalam penggunaan conditional rendering:

const isLoggedIn = true;
const message = isLoggedIn ? 
Welcome back!
 : 
Please sign in
;

---

Kesimpulan

JSX adalah fitur utama dalam React yang memungkinkan pengembang menulis kode UI dengan cara yang lebih bersih dan mudah dipahami. Dengan memahami JSX, pengembang dapat membuat komponen yang lebih efisien dan mudah dikelola.