Cara menggunakan contoh javascript objek bersarang

Pada tutorial React sebelumnya telah dipelajari tentang cara membuat React Element dan merender React Element. Tapi itu hanya 1 elemen

Untuk praktek sebenarnya, kita membutuhkan elemen HTML yang bersifat “nested” atau elemen bersarang, yang artinya ada banyak elemen di dalam elemen lainnya. Struktur tabel, formulir, atau daftar HTML membutuhkan kombinasi dari banyak elemen HTML

Inilah yang akan dibahas pada lanjutan tutorial React Duniailkom yaitu cara menampilkan dan merender banyak Elemen React

React adalah pustaka JavaScript, oleh karena itu untuk memahami kode React, Anda harus memiliki JavaScript dasar terlebih dahulu. Duniailkom juga tersedia Tutorial Belajar JavaScript atau lebih tepatnya dari JavaScript Uncover eBook/buku yang membahas JavaScript lebih mendalam

Cara Membuat Elemen Bereaksi Bersarang

Dalam tutorial tentang Pengertian dan Cara Membuat Elemen React, kita telah mempelajari argumen ketiga dari metode React. createElement() dapat diisi dengan elemen anak. Argumen ketiga ini dapat digunakan untuk membuat struktur elemen bersarang

Berikut adalah contoh penggunaannya

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Uncover</title>
</head>
<body>
  <h1>Belajar React</h1>

  <div id="root"></div>

  <script src="https://unpkg.com/react@17/umd/react.development.js" 
  crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" 
  crossorigin></script>
  <script>
    const myMenu = React.createElement('ul', {},
      [
        React.createElement('li', {}, 'Espresso'),
        React.createElement('li', {}, 'Cappuccino'),
        React.createElement('li', {}, 'Moccacino')
      ]
    );

    ReactDOM.render(myMenu, document.getElementById('root'));
  </script>
</body>
</html>

Untuk argumen ketiga dari React. createElement() pada baris 18, saya isi dengan array yang elemennya terdiri dari 3 panggilan ke metode React. createElement() antara baris 20 – 22. Ini adalah cara membuat elemen bersarang di React

Dengan kode tersebut, konstanta myMenu akan berisi struktur HTML berikut

<ul>
  <li>Espresso</li>
  <li>Cappuccino</li>
  <li>Moccacino</li>
</ul>

Selain itu, argumen kedua dari setiap metode React. createElement() diisi dengan objek kosong " {} ". Ini adalah cara lain untuk menunjukkan bahwa kita tidak memerlukan atribut apa pun

Berikut adalah hasil dari kode di atas

Konstanta myMenu berhasil ditampilkan dan berupa unordered list

Elemen Bereaksi Memerlukan Atribut "kunci"

Kode sebelumnya sudah berhasil muncul, namun masih ada beberapa masalah. Saat tab konsol dibuka, pesan peringatan berikut akan muncul

Yang perlu diperhatikan, ini adalah pesan tingkat peringatan, bukan kesalahan. Sebenarnya tidak ada yang salah dengan kode program kita, tetapi React membutuhkan pengoptimalan tambahan saat memproses data berulang seperti daftar

Tim pengembang react ingin membuat proses manipulasi DOM se-efisien mungkin. Salah satu cara adalah dengan mewajibkan setiap react element memiliki identitas khusus agar mudah membedakan satu element dengan element lain. Untuk tag berulang seperti

, React butuh tambahan atribut key.

Inilah arti dari pesan "Peringatan. Setiap anak dalam daftar harus memiliki penyangga "kunci" unik di tab konsol. Pesan peringatan ini akan sering kita jumpai jika lupa menambahkan atribut key saat menampilkan data berulang

Untungnya, apa yang diinginkan React cukup mudah dilakukan. Cukup tambahkan atribut kunci dengan nilai unik ke setiap elemen reaksi. Nilai atribut kunci boleh bebas, baik berupa angka, huruf, atau kombinasi keduanya asalkan tidak ada yang berulang

Berikut salah satu solusi yang bisa digunakan

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Uncover</title>
</head>
<body>
  <h1>Belajar React</h1>

  <div id="root"></div>

  <script src="https://unpkg.com/react@17/umd/react.development.js" 
  crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" 
  crossorigin></script>
  <script>
    const myMenu = React.createElement('ul', {},
      [
        React.createElement('li', {key:'a'}, 'Espresso'),
        React.createElement('li', {key:'b'}, 'Cappuccino'),
        React.createElement('li', {key:'c'}, 'Moccacino')
      ]
    );

    ReactDOM.render(myMenu, document.getElementById('root'));
  </script>
</body>
</html>

Sebagai argumen kedua dari metode React. createElement() , saya isi atribut key dengan nilai huruf 'a', 'b' dan 'c'. Akibatnya, pesan peringatan tidak lagi muncul

Dalam tutorial ini kita telah belajar cara membuat elemen reaksi bersarang dan menampilkannya di halaman. Meskipun mungkin, tapi ini bukan cara yang praktis. Bayangkan jika kita perlu membuat tabel yang terdiri dari banyak elemen

Untungnya, React menyediakan fitur JSX (JavaScript XML) untuk membuat elemen react menjadi lebih praktis. Namun, kami memerlukan bantuan pustaka Babel untuk "menerjemahkan" kode JSX ke dalam Elemen React. Ini materi selanjutnya yaitu Cara Mengakses Library Babel JS

Saat ini di Duniailkom tersedia eBook/buku React Uncover. Dengan 604 halaman A4, materi dalam buku ini jauh lebih banyak dibandingkan dengan tutorial React di website Duniailkom. Penjelasan lebih lanjut bisa ke. React Uncover – React JS Library Learning Guide