# Mengenal JSX: Konsep dan Fungsi Utamanya

### Apa itu JSX?

JSX singkatan dari javascript dan XML. Memungkinkan kita untuk menulis tag HTML didalam React element.

### Kenapa JSX dibutuhkan?

Berikut adalah contoh code React dengan menggunakan JSX

```javascript
import React from "react"; 

function App() {
    return (
        <div>
            <h1>Hello World!</h1>
        </div>

    ); 
}

export default App;
```

Jika kita tidak ingin menggunakan JSX. Mari kita lihat bagaimana kita dapat melakukannya?

```javascript
import React from "react"; 

function App() {
    return (
        React.createElement('div', null, 
        React.createElement(
            'h1', null, `Hello World!`
        ))

    ); 
}

export default App;
```

Ini adalah code yang sama yang ditulis tanpa JSX. Jadi, JSX memungkinkan kita untuk menulis HTML elemen didalam javascript tanpa menggunakan method `createElement()` atau `appendChild()`.

Kita tidak harus menggunakan JSX, tapi JSX membuat jadi lebih mudah dalam membuat aplikasi React. Setiap JSX elemen hanyalah `syntactic sugar` untuk memanggil `React.createElement`. Jadi, semua yang kita lakukan dengan JSX dapat juga dilakukan dengan plain javascript.

### Rules for coding JSX

Ketika menulis kode JSX kita sebaiknya mengikuti hal-hal berikut:

* Menyisipkan ekspresi javascript. Ekspresi javascript yang valid bisa di sisipkan dalam kode JSX dengan menggunakan curly braces `{}`.
    
    ```javascript
    import React from "react"; 
    
    function App() {
        return (
            <div>
                <h1>The sum of 6 and 9 is {6+9}</h1>
            </div>
        ); 
    }
    
    export default App;
    ```
    
* Semua top level elemen kode HTML didalam JSX harus di bungkus dalam SATU level element. Jadi ketika menulis banyak elemen, kita harus menaruhnya didalam single parent elemen.
    
    ```javascript
    // WRONG WAY
    function App() { 
     return (
       <h1>Hey, React!</h1>
       <h1>I love JSX!</h1>
     ); 
    }
    ```
    
    ```javascript
    // CORRECT WAY
    function App() { 
       return (
        <div>
          <h1>Hey, React!</h1>
          <h1>I love JSX!</h1>
        </div>
       ); 
    }
    ```
    
* Sebuah blok kode HTML untuk menulis potongan HTML dalam beberapa baris, letakan kode HTML didalam sebuah tanda kurung `()` dan simpan didalam sebuah variable. Variable ini bisa digunakan dimana saja sebagai pengganti HTML.
    
    ```javascript
    const myelem = (
        <div>
            <h1>Hello React!</h1>
            <p>I love JSX!</p>
            <p>This is a block of code. </p>
        </div>
    ); 
    
    function App() {
        return myelem; 
    }
    ```
    
* Semua elemen harus ditutup. Semua HTML elemen harus ditutup dengan benar. JSX akan menempar sebuah error jika HTML tidak ditutup dengan benar.
    
    ```javascript
    const myelem = (
        <div>
            <img src="img.png" alt="Yay" />
            <input type="text" />
            <br/>
        </div>
    ); 
    
    function App() {
        return myelem; 
    }
    
    // NOTICE THAT EVEN SELF CLOSING TAGS ARE PROPERLY CLOSED
    ```
    

*React tidak perlu menggunakan JSX*, tapi kebanyakan orang merasa terbantu sebagai bantuan visual saat bekerja dengan UI didalam kode javascript.

JSX juga memungkinkan React untuk menampilkan pesan error dan warning yang lebih berguna.

**Sumber**:

* [https://reactjs.org/docs/introducing-jsx.html](https://reactjs.org/docs/introducing-jsx.html)
    
* [https://dev.to/rahxuls/what-is-jsx-in-react-4igb](https://dev.to/rahxuls/what-is-jsx-in-react-4igb)