Tutorial React JS Part 7: Pengertian Babel JS dan Cara Akses Babel JS

Salah satu struktur terpenting di React adalah react element. Semua materi yang akan kita bahas sepanjang React dipakai untuk memanipulasi element ini.

Dalam tutoral sebelumnya telah dibahas bahwa React element dibuat menggunakan method React.createElement(). Untuk element yang sederhana, penggunaannya masih terasa mudah. Akan tetapi bisa menjadi sangat rumit untuk halaman web yang perlu ratusan tag HTML.

Sebagai alternatif yang lebih praktis, React mengadopsi cara penulisan JSX. Namun sebelum bisa menggunakan JSX, kita butuh bantuan Babel JS sebagai penerjemah kode JSX menjadi React Element. Inilah topik bahasan kita kali ini, yakni mengenal pengertian Babel JS dan cara aksesnya.

React merupakan library JavaScript, oleh karena itu agar bisa memahami kode-kode React, harus punya basic JavaScript terlebih dahulu. Duniailkom juga tersedia Tutorial Belajar JavaScript, atau lebih pas lagi dari eBook/buku JavaScript Uncover yang membahas JavaScript dengan lebih dalam.

Pengertian Babel JS

Babel (https://babeljs.io) adalah library JavaScript yang berfungsi untuk "menerjemahkan" kode-kode JavaScript terbaru agar bisa berjalan di web browser lama.

Sebagai contoh, fitur ES6 seperti template string, arrow function, atau spread operator bisa dipastikan tidak akan berjalan di web browser tua. Jika web kita diakses, bisa tampil berantakan atau tidak bisa di akses sama sekali.

Daripada menulis ulang kode JavaScript, Babel bisa menerjemahkan kode ES6 menjadi kode JS biasa (ES5). Ini dikenal dengan istilah transcompiler.

Selain tugas utama sebagai transcompiler, Babel juga mendukung proses konversi kode JSX menjadi method React.createElement(). Betul, secara internal Babel akan membaca kode-kode JSX untuk diterjemahkan menjadi method React.createElement().


Cara Mengakses File Babel JS

Sama seperti file react.js dan react-dom.js, file babel.js juga tersedia di CDN berikut:

https://unpkg.com/babel-standalone@6.26.0/babel.js

Sehingga kita sudah bisa membuat file template untuk menjalankan JSX:

<!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>
  <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 src="https://unpkg.com/babel-standalone@6.26.0/babel.js" 
  crossorigin></script>
  
  <script type="text/babel">
    //... kode JavaScript + React disini
  </script>

</body>
</html>

Saya mengakses 3 file JavaScript antara baris 11 – 16, yakni react.development.js, react-dom.development.js, dan babel.js.

Selain itu perhatikan baris 18, terdapat tambahan atribut type="text/babel" ke dalam tag <script>. Atribut ini wajib ditambah agar kode JavaScript bisa diproses oleh Babel.

Di baris 9 juga terdapat satu tag <div id="root"> yang saya siapkan sebagai nilai input untuk method ReactDOM.render(). Disinilah react element akan ditampilkan.


Tes Babel Dengan Kode JSX

Penjelasan lebih lanjut tentang JSX akan kita bahas dalam tutorial setelah ini. Akan tetapi untuk uji coba file babel sudah berhasil diakses, bisa jalankan kode berikut:

<!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>
  <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 src="https://unpkg.com/babel-standalone@6.26.0/babel.js" 
  crossorigin></script>
  
  <script type="text/babel">
    const myElement = <h1 id='judul'>Hello React</h1>;
    console.log(myElement);
    
    ReactDOM.render(myElement, document.getElementById('root'));
  </script>

</body>
</html>

Dan berikut hasilnya:

Tutorial React - Pengertian Babel JS dan Cara Aksesnya

Sukses!, kode JSX sudah tampil di web browser. Hasil perintah console.log(myElement) juga mengkonfirmasi bahwa konstanta myElement berisi sebuah react element.

Pesan warning "You are using the in-browser Babel transformer… " boleh diabaikan karena itu sekedar informasi tambahan dari babel.


Dalam tutorial ini kita sudah berhasil mengakses file Babel dan malakukan uji coba dengan kode JSX. Tutorial selanjutnya akan membahas lebih dalam apa itu JSX dan bagaimana cara penulisan JSX di React.

Saat ini di Duniailkom tersedia eBook / buku React Uncover. Dengan 604 halaman A4, materi di buku jauh lebih banyak daripada tutorial React di web Duniailkom. Penjelasan lebih lanjut bisa ke: React Uncover – Panduan Belajar Library React JS.

2 Comments

  1. Jellan Arta
    03 Mar 22

Add Comment