Pengenalan React JSX

JSX (JavaScript Syntax Extension) adalah sintaks seperti XML/HTML yang digunakan oleh React dalam bahasa ES6 (ECMAScript 2015) agar HTML dapat ditulis di dalam kode JavaScript/React. Sintaksnya digunakan untuk mengubah teks HTML yang ditemukan dalam file JSX menjadi objek JavaScript standar, pengubahan ini menggunakan compiler ES6 ke Javascript seperti Babel.

Pada dasarnya, Anda dapat menulis struktur seperti HTML/XML yang ringkas (misalnya, Document Object Model) dengan menggunakan JSX dalam file yang sama saat Anda menulis kode JavaScript, kemudian Babel akan mengubah JSX menjadi kode JavaScript murni.

HTML Online IDE memudahkan kita untuk mencoba jalankan kode HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    const element = <h1 className='title'>Hello World</h1>
    ReactDOM.render(element, document.getElementById("root"))
  </script>
</body>

Perhatikan tiga contoh pembuatan Hello World berikut ini, tab pertama adalah bentuk awal dalam JSX, tab kedua adalah hasil transformasi oleh Babel dari JSX ke Javascript, dan tab ketiga adalah hasil render Javascript ke HTML.

1
var title = <h1 className='title'>Hello World</h1>
1
var title = React.createElement("h1", { className: "title" }, "Hello World")
1
<h1 class="title">Hello World</h1>

Dari contoh di atas dapat diketahui bahwasanya sintaks JSX mirip dengan sintaks HTML.

Properti pada Elemen JSX

Elemen JSX akan dicompile oleh Babel menjadi kode Javascript biasa dengan React API React.createElement. Oleh karenanya, Elemen JSX memiliki properti yang sama dengan React.createElement. Properti tersebut antara lain type, props, dan children.

Contoh, perhatikan kode JSX sederhana di bawah ini:

1
2
3
4
5
const heading = (
  <h1 className='title' id='judul'>
    Hello world
  </h1>
)

Kita bisa memanggil properti berikut dari variabel heading:

  1. heading.type akan menghasilkan h1
  2. heading.props.className akan menghasilkan title
  3. heading.props.id akan menghasilkan judul
  4. heading.props.children akan menghasilkan Hello World
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    const heading = (
      <h1 className='title' id='judul'>
        Hello world
      </h1>
    )
    ReactDOM.render(heading, document.getElementById("root"))
    alert(
      `tipe elemen: ${heading.type}, class: ${heading.props.className}, id: ${heading.props.id}, children: ${heading.props.children}`
    )
  </script>
</body>

Menambah dan Menjalankan Kode Javascript dalam JSX

Kita mengetahui bahwasanya JSX adalah sintaks React khusus yang akan dikonversi ke bentuk JavaScript asli. Oleh karenanya, sangat memungkinkan bagi kita untuk menambah dan menjalankan kode Javascript ke dalam JSX, salah satunya memanggil variabel. Cara menambahkannya adalah dengan menggunakan tanda kurung kurawal { }.

Berikut adalah beberapa contoh penambahan kode Javascript ke dalam JSX:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    const helloWorld = "Hello world"
    const heading = (
      <h1 class='title' id='judul'>
        {helloWorld}
      </h1>
    )
    ReactDOM.render(heading, document.getElementById("root"))
  </script>
</body>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    const clickAlert = () => {alert("Tombol diklik")}
    const className = "btn-alert"
    const children = "Klik Me !"
    const button = (
      <button
      className={className}
      onClick={clickAlert}
      >
      {children}
    </button>
    )
    ReactDOM.render(button, document.getElementById('root'))
  </script>
</body>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    const clickAlert = () => {
      alert("Tombol diklik")
    }
    const className = "btn-alert"
    const children = "Klik Me !"
    const props = {
      className,
      onClick: clickAlert,
      children,
    }
    const button = <button {...props} />
    ReactDOM.render(button, document.getElementById("root"))
  </script>
</body>

Inline CSS di Elemen JSX

Cara memberikan inline style pada JSX yakni dengan menambahkan atribut style berisi object dari properti dan nilai CSS. Contoh kode di bawah ini, object style berisi properti css dibuat dalam pola penulisan camelCase beserta nilainya, kemudian gunakan object tersebut sebagai nilai pada atribut style dalam JSX.

Perhatikan beberapa contoh styling JSX berikut ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <style>
    .btn-alert {
      padding: 0.5rem 1rem;
      background-color: green;
      color: white;
    }
  </style>
  <script type="text/babel">
    const clickAlert = () => {
      alert("Tombol diklik")
    }
    const className = "btn-alert"
    const children = "Klik Me !"
    const props = {
      className,
      onClick: clickAlert,
      children,
    }
    const button = <button {...props} />
    ReactDOM.render(button, document.getElementById("root"))
  </script>
</body>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    // buat variabel style berisi object dengan properti css
    const style = {
      padding: "0.5rem 1rem",
      backgroundColor: "green",
      color: "white",
    }
    const clickAlert = () => {
      alert("Tombol diklik")
    }
    const className = "btn-alert"
    const children = "Klik Me !"
    const props = {
      className,
      style, // tambahkan style ke dalam props
      onClick: clickAlert,
      children,
    }
    const button = <button {...props} />
    ReactDOM.render(button, document.getElementById("root"))
  </script>
</body>

Cukup mudah bukan dalam membuat inline-style pada JSX. 😁

Atribut HTML yang Didukung JSX

Atribut HTML adalah informasi tambahan yang ada di dalam tag HTML, atribut HTML bisa opsional namun juga bisa wajib pada beberapa tag HTML.

Berikut ini contoh tag HTML beserta atributnya:

1
2
3
4
5
6
<img
  src="https://www.w3schools.com/tags/img_girl.jpg"
  alt="Girl in a jacket"
  width="500"
  height="600"
/>

Dari tag HTML di atas dapat diketahui bahwa:

  • Tag HTML <img /> dipakai untuk menampilkan image (gambar)
  • atribut src adalah atribut wajib ada untuk tag img
  • atribut alt, width, height adalah atribut opsional untuk tag img

Pada React JSX, kita bisa menemui berbagai tag beserta atributnya, format penulisan atribut yang digunakan pada JSX tidak lagi mengikuti kebab-case, melainkan mengikuti format penulisan camelCase.

Berikut ini daftar atribut html yang didukung pada JSX:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked classID className colSpan cols content contentEditable
contextMenu controls coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload radioGroup readOnly rel required reversed role
rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes
span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex
target title type useMap value width wmode wrap
React mendukung custom tag HTML sebagai bentuk pemanggilan komponen React, selain itu kita bisa menggunakan custom atribut sebagai referensi untuk properti (props) komponen dalam transfer data yang akan dibahas di artikel lainnya.

React Custom Atribut: Key

key adalah atribut khusus dari React yang tidak ada pada HTML, key digunakan untuk mengidentifikasi masing-masing anggota dari sebuah daftar sehingga memudahkan React dalam mengetahui item mana yang ditambahkan, berubah, maupun dihapus. key diisi dengan identitas yang unik, biasanya identifikasi unik yang digunakan pada key sama dengan id yang ada pada data. Pembahasan mengenai key akan dilanjutkan pada artikel lainnya.

React Custom Atribut: Ref

ref adalah atribut khusus dari React yang tidak ada pada HTML. ref berasal dari reference pada sebuah elemen HTML, yang berarti kita bisa mengakses langsung sebuah elemen HTML menggunakan ref, dan tentu saja membuat kita bisa memodifikasi atau mengubah elemen tersebut menggunakan ref tanpa perlu merender ulang elemen tersebut. Kita akan membahas ref lebih lanjut di artikel lainnya.

React Custom Atribut: dangerouslySetInnerHTML

dangerouslySetInnerHTML adalah atribut khusus dari React sebagai pengganti dari javascript innerHTML yang membuat kita bisa memasukkan html ke dalam jsx. Hal ini sangat berguna saat aplikasi kita memiliki fitur user-submitted-content (konten yang dikirim oleh pengguna) seperti blog, sehingga user bisa memasukkan tag html seperti <img>, <b>, dll.

Perhatikan contoh penggunaan dangerouslySetInnerHTML berikut ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    const data = "<strong>Contoh TANPA dangerouslySetInnerHTML</strong>"
    const props = {
      children: data,
    }
    const divRender = <div {...props} />
    ReactDOM.render(divRender, document.getElementById("root"))
  </script>
</body>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
  <script type="text/babel">
    const data = "<strong>Contoh dengan dangerouslySetInnerHTML</strong>"
    const props = {
      __html: data,
    }
    const divRender = <div dangerouslySetInnerHTML={props} />
    ReactDOM.render(divRender, document.getElementById("root"))
  </script>
</body>

Dari dua contoh di atas dapat diketahui bahwa tanpa adanya atribut dangerouslySetInnerHTML maka data yang berisi tag HTML tidak akan terender.