Menulis Markup dengan JSX

JSX adalah perpanjangan sintaksis untuk menulis kode seperti HTML dalam file JavaScript. Meskipun ada beberapa cara lain, JSX lebih dipilih oleh sebagian besar developer React dan codebase karena kepadatannya.

Anda akan mempelajari

Mengapa React mencampur markup dan logika render
Perbedaan JSX dengan HTML
Cara menampilkan informasi menggunakan JSX

JSX: Meletakkan markup ke JavaScript

Website selama ini terbuat dari HTML, CSS, dan JavaScript. Selama bertahun-tahun, pengembang website menaruh konten di HTML, desain di CSS, dan logika di JavaScript—tidak jarang di file yang berbeda! Konten dibangun di HTML sedangkan logika halaman disimpan secara terpisah dalam JavaScript:

markup HTML dengan latar belakang berwarna ungu dan sebuah div dengan dua children tag: p dan form. — HTML

Tiga fungsi JavaScript dengan latar belakang kuning: onSubmit, onLogin, and onClick. — JavaScript

Namun, seiring dengan situs yang makin iteraktif, logika semakin menentukan konten. JavaScript mengatur HTML! Inilah mengapa dalam React, logika render dan markup berada di satu tempat yang sama—komponen.

Komponen React dengan HTML dan JavaScript digabung dari contoh sebelumnya. Fungsi bernama Sidebar yang memanggil fungsi isLoggedIn, berwarna kuning. Tag p dari sebelumnya bersarang dalam fungsi berwarna ungu, dan sebuah tag Form mereferensi ke komponen yang ada di diagram berikutnya. — Komponen React `Sidebar.js`

Komponen React dengan HTML dan JavaScript dari contoh sebelumnya digabung. Fungsi bernama Form memiliki dua handler onClick dan onSubmit berwarna kuning. Setelah itu diikuti oleh HTML berwarna ungu. HTML tersebut memiliki elemen form dan elemen input di dalamnya, masing-masing dengan prop onClick. — Komponen React `Form.js`

Menggabungkan logika render dan markup untuk sebuah tombol memastikan mereka tersinkronasi dengan satu sama lain pada tiap perubahan. Sebaliknya, detil yang tidak berhubungan, markup untuk tombol dan sidebar, juga tidak terhubung dengan satu sama lain, membuat perubahan masing-masing menjadi lebih aman.

Masing-masing komponen React adalah fungsi JavaScript yang bisa memiliki markup yang di-render oleh React ke peramban. Komponen React menggunakan ekstensi sitaksis yang bernama JSX untuk merepresentasikan markup tersebut. JSX terlihat sangat mirip dengan HTML, namun lebih ketat dan dapat menampilkan informasi secara dinamis. Cara terbaik untuk memahami JSX adalah dengan langsung mengubah beberapa markup HTML menjadi JSX.

Catatan

JSX dan React adalah dua hal yang berbeda. Mereka masing-masing digunakan secara bersama, namun anda dapat digunakan sendiri secara independen. JSX merupakan ekstensi sintaks, sedangkan React adalah library JavaScript.

Mengubah HTML menjadi JSX

Anggap anda memiliki HTML yang alid:

<h1>Daftar Tugas Putri</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Putri" 
  class="photo"
>
<ul>
    <li>Mengerjakan PR
    <li>Pergi belanja
    <li>Minum vitamin
</ul>

Dan anda ingin meletakkannya di komponen:

export default function TodoList() {
  return (
    // ???
  )
}

Jika anda salin dan tempel secara langsung, maka dia tidak akan bekerja:

Fork

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Daftar Tugas Putri</h1>
    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Putri" 
      class="photo"
    >
    <ul>
      <li>Mengerjakan PR
      <li>Pergi belanja
      <li>Minum vitamin
    </ul>

Ini dikarenakan JSX lebih ketat dan memiliki banyak peraturan dibandingkan HTML! Jika anda membaca pesan error yang tertera, pesan tersebut akan mengarahkanmu untuk memperbaiki markup, atau anda bisa mengikuti panduan berikut.

Catatan

Umumnya, pesan error pada React akan memandu anda mencari sumber masalah yang ada di kode. Jangan lupa membaca pesan error jika anda stuck!

Aturan JSX

1. Hanya mengembalikan satu elemen

Untuk mengembalikan lebih dari satu elemen, bungkus mereka dengan satu tag parent.

Contohnya, anda dapat menggunakan tag <div>:

<div>
  <h1>Daftar Tugas Putri</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Putri" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

Jika anda tidak ingin menambahkan <div> pada markup, anda dapat <> dan </> saja:

<>
  <h1>Daftar Tugas Putri</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Putri" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

Tag kosong di atas disebut Fragment. Fragments dapat menggabungkan beberapa tag tanpa memasukkan tag tersebut ke bagian dari HTML.

Pendalaman

Mengapa beberapa tag JSX perlu dibungkus?

JSX mirip dengan HTML, namun di balik layar, mereka berubah menjadi objek literal JavaScript. Anda tidak bisa mengembalikan dua objek dari sebuah fungsi tanpa membungkus mereka ke sebuah senarai. Inilah mengapa anda juga tidak bisa mengembalikan dua tag JSX tanpa membungkus mereka menjadi sebuah fragment.

2. Tutup semua tag

Semua tag JSX harus dapat ditutup: tag tunggal seperti <img> harus ditulis <img />, dan tag ganda seperti <li>oranges harus ditulis <li>oranges</li>.

Berikut adalah gambar dan daftar tugas Putri dengan tag ganda:

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Putri" 
    class="photo"
   />
  <ul>
    <li>Mengerjakan PR</li>
    <li>Pergi Belanja</li>
    <li>Minum vitamin</li>
  </ul>
</>

3. Ubah semua sebagian menjadi camelCase!

JSX berubah menjadi JavaScript dan atribut yang dituis di JSX menjadi key pada objek di JavaScript. Dalam komponen, atribut akan lebih mudah dibaca sebagai variable. Namun JavaScript memiliki beberapa batasan dalam menamai variable. Contohnya, nama variable tidak boleh terdiri dari karakter minus dan tidak boleh menggunakan nama pesanan tertentu seperti class.

Inilah mengapa di React, banyak atribut HTML dan SVG ditulis secara camelCase. Contohnya, stroke-width dapat ditulis sebagai strokeWidth. Dan karena class merupakan nama pesanan, di React kita menulisnya sebagai className, dinamakan sesuai dengan versi DOM-nya:

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Putri" 
  className="photo"
/>

Anda dapat mencari semua atribut pada list DOM component berikut. Jika ada yang salah, jangan takut—React akan menampilkan pesan dengan koreksi ke konsol di peramban.

Sandungan

Untuk beberapa alasan, atribut aria-* dan data-* ditulis menggunakan tanda minus.

Tip: Gunakan JSX Converter

Mengubah atribut di markup yang sudah ada bisa menjadi membosankan! Kami sarankan untuk menggunakan converter untuk mengubah HTML dan SVG-mu menjadi JSX. Converters are very useful in practice, but it’s still worth understanding what is going on so that you can comfortably write JSX on your own.

Berikut hasil jadinya:

Fork

export default function TodoList() {
  return (
    <>
      <h1>Daftar Tugas Putri</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Putri" 
        className="photo" 
      />
      <ul>
        <li>Mengerjakan PR</li>
        <li>Pergi Belanja</li>
        <li>Minum vitamin</li>
      </ul>
    </>
  );
}

Rekap

Sekarang anda paham mengapa ada JSX dan cara menggunakannya pada komponen:

Komponen React menggabungkan logika render dengan markup karena mereka berkaitan.
JSX mirip dengan HTML, dengan beberapa perbedaan. Anda bisa menggunakan converter jika diperlukan.
Pesan error umumnya mengarahkan anda ke sumber masalah pada markup.

Coba tantangan berikut

Tantangan 1 dari 1:
Mengubah beberapa HTML menjadi JSX

HTML berikut telah disalin ke sebuah komponen, tapi bukan JSX yang valid. Coba perbaiki:

Fork

export default function Bio() {
  return (
    <div class="intro">
      <h1>Selamat datang di website saya!</h1>
    </div>
    <p class="summary">
      Anda dapat membaca uneg-unegku di sini.
      <br><br>
      <b>Juga ada <i>foto</b></i> ilmuwan!
    </p>
  );
}

Antara melakukannya dengan manual atau menggunakan converter, terserah Anda!

SebelumnyaMengimpor dan Mengekspor Komponen

SelanjutnyaJavaScript di JSX Menggunakan Kurung Kurawal

Menulis Markup dengan JSX

Anda akan mempelajari

JSX: Meletakkan markup ke JavaScript

Catatan

Mengubah HTML menjadi JSX

Catatan

Aturan JSX

1. Hanya mengembalikan satu elemen

Pendalaman

Mengapa beberapa tag JSX perlu dibungkus?

2. Tutup semua tag

3. Ubah semua sebagian menjadi camelCase!

Sandungan

Tip: Gunakan JSX Converter

Rekap

Coba tantangan berikut

Tantangan 1 dari 1: Mengubah beberapa HTML menjadi JSX

Tantangan 1 dari 1:
Mengubah beberapa HTML menjadi JSX