Pengenalan React Web API

React adalah titik awal dari library React. Jika Anda memuat React dari tag <script> seperti pada contoh Hello World sebelumnya, React API tingkat atas ini tersedia secara global, sehingga bisa digunakan di script manapun. Namun Jika Anda menggunakan ES6 dengan npm (Nodejs), Anda perlu menulis import React from 'react'.

Pada tutorial ini, kita akan mengkonversi kode HTML yang menggunakan HTML DOM API menjadi kode HTML yang menggunakan React API.

React.createElement adalah React API yang digunakan untuk membuat elemen baru, React API ini merupakan salah satu API yang paling banyak digunakan. Sintaksnya kurang lebih seperti ini React.createElement(typeElement, props, children)

HTML Online IDE memudahkan kita untuk mencoba jalankan kode HTML

Sebagai contoh berikut ini terdapat kode yang menggunakan HTML DOM API dan React API:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<body>
  <div id="root"></div>
  <script type="module">
    const rootElement = document.getElementById("root") // cari element id="root"
    const element = document.createElement("h1") // buat element h1
    element.textContent = "Hello World" // tambahkan konten berupa teks ke element h1
    element.className = "title" // tambahkan atribut class="title" pada h1
    rootElement.append(element) // masukkan element div yang telah dibuat ke dalam rootElement
  </script>
</body>

Dari kode HTML di atas, bisa kita buat dalam versi React menggunakan React API React.createElement dengan cara seperti berikut:

Sintaks : React.createElement(type, props, children)

  1. type elemen yang dibuat adalah h1, maka kode menjadi React.createElement('h1', null, null)
  2. props (properti atau atribut) yang dibuat berisi class="title", props berupa object, maka kode menjadi React.createElement('h1', { className: 'title' }, null)
  3. children adalah isi dari elemen berisi kata Hello World, bisa berupa data primitif maupun array, maka kode menjadi React.createElement('h1', { className: 'title' }, 'Hello World')

Sehingga kodenya menjadi:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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 type="module">
    const rootElement = document.getElementById("root") // cari element id="root"
    const element = React.createElement(
      "h1", // buat element type h1
      {
        className: "title", // className untuk menambahkan atribut class
      },
      "Hello World" // tambahkan chidren berisi Hello World
    )
    ReactDOM.render(element, rootElement) // render element yang dibuat ke elemen root
  </script>
</body>

Dari contoh penggunaan HTML DOM API dan React API di atas dapat diketahui bahwa keduanya memiliki kemiripan sebagai berikut :

  • Pembuatan elemen baru sama-sama menggunakan method createElement()
  • Penambahan atribut class pada elemen dilakukan dengan membuat properti className
  • HTML DOM API textContent dan innerHTML kurang lebih sama dengan properti children pada React API

Sedangkan untuk rendering elemen yang dibuat ke elemen tujuan (yakni elemen dengan id = root), HTML DOM menggunakan method append() sedangkan React DOM mengunakan React.render().

Pengayaan React.createElement

Berikut beberapa pengayaan tentang React.createElement yang perlu dipahami.

Membuat kolom input type password:

1
2
3
4
5
6
<input
  id="password"
  type="password"
  name="password"
  placeholder="Masukkan Password"
/>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const inputSubmit = React.createElement(
  "input",
  {
    id: "password",
    type: "password",
    name: "password",
    placeholder: "Masukkan Password",
  },
  null
)

Membuat navigasi:

1
2
3
4
5
6
7
8
<ul id="nav">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
</ul>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var nav = React.createElement(
  "ul",
  { id: "nav" },
  React.createElement(
    "li",
    null,
    React.createElement("a", { href: "#" }, "Home")
  ),
  React.createElement(
    "li",
    null,
    React.createElement("a", { href: "#" }, "About")
  )
)

Pada contoh navigasi di atas terdapat tiga turunan dari ul yakni dari ul > li > a > teks, serta cukup panjang jika ditulis dalam React API, nah pada artikel selanjutnya akan membahas mengenai JSX (Javascript Syntax Extension) yang memudahkan kita dalam menulis html pada React.

©2021, All Rights Reserved

Privacy Policy | DMCA | Telegram