![apa itu jsx?](/assets/blog/img/apa-itu-jsx.jpg) 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 =

Halo Guys!

; ``` 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](https://babeljs.io/). Contoh transpilasi: ```jsx // Sebelum transpilasi (JSX) const card = (

{title}

{content}

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

Judul

Paragraf

); ``` ```html

Judul

Paragraf

``` ```jsx // ❌ Salah (dua elemen induk) return

Judul

Paragraf

; ``` #### 2\. Return multi element: **Apa itu fragment?** * `<>` adalah sintaks singkat (_shorthand_) dari `` * Jika perlu memberikan **key** (misalnya di loop), gunakan ``. ```jsx // ❌ Tanpa Fragment (error karena ada 2 elemen root) return (

Judul

Deskripsi

); // ✅ Dengan Fragment (valid) return ( <>

Judul

Deskripsi

); // ✅ Dengan React.Fragment (explicit) return (

Judul

Deskripsi

); ``` ```html

Judul

Deskripsi

``` #### 3\. Ganti `class` dengan `className`: Karena `class` adalah keyword jacascript `

...

` #### 4\. Javascript di JSX Pakai curly braces `{ }` untuk menyisipkan variabel/ekspresi. ```jsx const name = "Budi"; const greeting =

Halo, {name.toUpperCase()}!

; // Output: Halo, BUDI! ``` ### Contoh Praktis ```jsx function Greeting() { const user = "Alice"; return (

Selamat Datang, {user}!

); } ```