Belajar React: JSX di Browser

JSX tidak bisa dijalankan di browser begitu saja, karena browser, bahkan yang terbaru sekalipun, hanya mendukung javascript murni saja. Agar bisa menggunakan sintak JSX di browser, kita harus menggunakan librari lain yang bernana Babel.

Apa itu Babel ?

Babel is a JavaScript compiler.

Begitu kata website-nya, bisa dikunjungi di https://babeljs.io. Babel adalah javascript compiler. Secara teknis, Babel bisa kita gunakan untuk men-transformasi-kan bahasa javascript modern (EcmaScript 6) dan atau JSX React menjadi javascript yang didukung oleh browser.

Bagaimana menggunakan Bebel di Browser ?
Untuk menjalankan babel di browser, kita cukup memuat librari Babel langsung:

Namun, text javascript yang ingin kita transformasikan, tidak lagi disertakan dengan HTML sebagai tipe text/javascript, melainkan sebagai tipe text/babel

Contoh:

Pada artikel sebelumnya dimana kita membuat program Hello World, kita belum menggunakan JSX.

Mari kita rubah kode tersebut diatas menjadi menggunakan JSX.

Tambahkan script librari babel setelah librari react:

Gunakan JSX. Ganti kode berikut

menjadi:

Hasil akhir:

Simpan dengan nama 2-jsx.html dan buka di browser, maka akan tampil pesan sederhana “Hello World” seperti yang sudah kita lakukan sebelumnya.

Discussion