Ajat Darojat

Mengenal JSX: Konsep dan Fungsi Utamanya

Photo by Ferenc Almasi on Unsplash

Mengenal JSX: Konsep dan Fungsi Utamanya

Mengenal JSX: Konsep Dasar dan Kegunaannya dalam React

Ajat Darojat's photo
Ajat Darojat
·

2 min read

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

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?

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 {}.

      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.

      // WRONG WAY
  function App() { 
   return (
     <h1>Hey, React!</h1>
     <h1>I love JSX!</h1>
   ); 
  }

      // 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.

      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.

      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:

ReactJSX