![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 title="jsx" const element =

Halo Guys!

; ``` 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](https://babeljs.io/). Contoh transpilasi: ```jsx title="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 title="jsx" // ✅ Benar return (

Judul

Paragraf

); ``` ```html title="html"

Judul

Paragraf

``` ```jsx title="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 title="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 title="html"

Judul

Deskripsi

``` #### 3\. Ganti `class` dengan `className`: Karena `class` adalah keyword javascript ```jsx title="jsx"

...

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

Halo, {name.toUpperCase()}!

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

Selamat Datang, {user}!

); } ```

Cari Artikel