Tips Penggunaan JSX untuk Pemula

Secara umum, sintaksis JSX mirip seperti HTML. Jika Anda familier dengan HTML, secara natural Anda mampu menuliskan JSX. Namun, ada beberapa hal yang perlu Anda perhatikan ketika menuliskan JSX.


Variabel di JSX

Kapan pun Anda ingin menggunakan JavaScript expression (sesuatu yang menghasilkan nilai) di JSX, Anda perlu membungkus expression dalam kurung kurawal seperti ini.

render() {
  const name = 'Dicoding';
 
  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>Today is {new Date().toLocaleDateString()}</p>
      <p>What is 2 + 2? {2 + 2}</p>
    </div>
  )
}

Tidak menampilkan apa pun

Jika Anda ingin komponen tidak menampilkan apa pun, cukup kembalikan fungsi atau method render dengan null. Contohnya seperti ini.

render() {
  if (isLoading()) {
    return null;
  }
  return (
    ...
  );
}

Conditional Rendering

Kemampuan dalam menampilkan UI berdasarkan state merupakan fondasi dari Front-End Framework apa pun. Biasanya masing-masing framework menyediakan cara “native”-nya masing-masing. Berikut contoh penerapan conditional rendering di framework Angular dan Vue.

// Angular
<h1 *ngIf="authed; else elseBlock">Welcome back!</h1>
<ng-template #elseBlock>
  <h1>Login to see your dashboard</h1>
</ng-template>


// Vue
<h1 v-if="authed">Welcome back!</h1>
<h1 v-else>Login to see your dashboard</h1>

Di React, conditional rendering dapat dicapai menggunakan pendekatan yang berbeda. Alih-alih membuat caranya sendiri, conditional rendering di React dapat dicapai hanya dengan if else standar JavaScript karena pada dasarnya React hanyalah JavaScript.

Mungkin pendekatan ini bisa menimbulkan pro dan kontra, tetapi bila Anda sudah terbiasa dengan conditional menggunakan if else, seharusnya Anda akan merasa nyaman. Berikut adalah contoh conditional rendering di React.

render() {
  const authed = isAuthed()
 
  if (authed) {
    return <h1>Welcome back!</h1>
  } else {
    return <h1>Login to see your dashboard</h1>
  }
}

Bahkan, bila keputusan render hanya bergantung pada satu kondisi, sebenarnya Anda bisa menggunakan ternary operator untuk mempersingkat penulisan kode.

render() {
  return isAuthed()
  ? <h1>Welcome back!</h1>
  : <h1>Login to see your dashboard</h1>
}

Anda juga bisa melakukan conditional rendering di dalam JSX dengan menuliskan expression di dalam tanda kurung kurawal.

render() {
  return (
  <div>
    <Logo />
    {isAuthed() === true
      ? <h1>Welcome back!</h1>
      : <h1>Login to see your dashboard</h1>}
  </div>
)
}

React Fragments

Simak HTML kode berikut ini.

<h1>Hello, Dicoding</h1>
<p>Today is a great day!</p>

Di HTML, kode di atas merupakan valid, tapi jika kita mengubahnya ke JSX seperti kode di bawah ini, ia menjadi tidak valid.

render() {
  return (
  <h1>Hello, Dicoding</h1>
  <p>Today is a great day!</p>
)
}

Seperti yang sudah Anda ketahui, JSX hanya dapat mengembalikan satu top level element (root element), sedangkan kode di atas terdapat dua top level element. Kita dapat memperbaiki permasalahan ini dengan membungkus seluruh element di dalam div.

render() {
  return (
  <div>
    <h1>Hello, Dicoding</h1>
    <p>Today is a great day!</p>
  </div>
)
}

Cara ini memang memperbaiki masalah, tetapi dapat menimbulkan masalah lain yaitu semantik elemen. Mengapa? Karena kita baru saja membuat ekstra elemen (div) yang sebetulnya tidak kita harapkan. Solusi dari permasalahan ini adalah gunakanlah React.Fragment. Jika Anda ingin mengembalikan satu top level element saja tanpa ingin mengubah markup, bungkuslah seluruh element dengan <React.Fragment>.

render() {
  return (
    <React.Fragment>
      <h1>Hello, Dicoding</h1>
      <p>Today is a great day!</p>
    </React.Fragment>
  )
}

Penggunaan React.Fragment memiliki cara pintas yakni cukup dengan menuliskan tanda <>..</> seperti ini.

render() {
  return (
    <>
      <h1>Hello, Dicoding</h1>
      <p>Today is a great day!</p>
    </>
  )
}

Sebelumnya : Debugging Component menggunakan React DevTools Selanjutnya : Rangkuman Stateful Component