React mengadopsi konsep "gradual adoption", dimana kita bisa menggunakan react se-sedikit mungkin. Atau dengan kata lain kode program website tidak harus semuanya dibuat dengan react, cukup bagian yang diperlukan saja.
Misal, kita memiliki web yang sudah jadi berbasiskan HTML, CSS dan PHP. Kemudian ingin menambah efek interaktif di bagian tabel dengan react, maka itu tidak jadi masalah.
File react yang diperlukan hanya ada 2, yakni react.js dan react-dom.js. Dengan mengakses keduanya dari tag <script>, sebuah halaman web sudah bisa memproses kode-kode react.
Dalam lanjutan seri Tutorial Belajar React di Duniailkom, kita akan bahas bagaimana cara mengakses kedua file React: react.js dan react-dom.js.
Mengenal File react.js dan react-dom.js
Sebelumnya sudah di singgung kalau react hanya butuh dua buah file saja, yakni react.js dan react-dom.js. Apa fungsi file-file ini?
- File react.js berisi kode inti library react. Setiap file yang perlu menjalankan kode react wajib mengaksesnya. Disinilah terdapat class utama React seperti React.Component, React.createElement(), React.Fragment, dll.
- File react-dom.js berisi kode untuk menampilkan hasil pemrosesan react ke halaman web. Pada file inilah terdapat deklarasi method ReactDOM.render() yang hampir selalu kita butuhkan.
Jika sama-sama wajib dipakai, kenapa tidak digabung saja menjadi satu file?
Pemisahan dua file ini karena tim pengembang react ingin membuat "library universal" yang memungkinkan react dipakai di luar web. Salah satu hasilnya adalah React Native dimana kita bisa membuat aplikasi mobile (android dan iOS) menggunakan React.
Di react native nanti, file react.js tetap diperlukan, akan tetapi file react-dom.js diganti dengan file lain yang bertugas untuk menampilkan kode React di perangkat mobile.
Membuat Template HTML untuk React (CDN)
Sekarang saatnya membuat file template untuk mengakses file react.js dan react-dom.js. Terdapat 2 alternatif: mengakses file react yang ada di CDN atau mendownload kedua file untuk diakses secara offline.
Salah satu keunggulan mengakses file yang sudah ada di CDN adalah tidak perlu repot-repot mendownloadnya. Cukup tulis ke dalam tag <script> dan kode react siap digunakan. Syaratnya, kita harus terhubung ke internet ketika menjalankan kode program.
Dokumentasi react sudah menyediakan alamat file CDN untuk file react.js dan react-dom.js, yakni di:
https://unpkg.com/react@17/umd/react.development.js
https://unpkg.com/react-dom@17/umd/react-dom.development.js
Atau versi minified di :
https://unpkg.com/react@17/umd/react.production.min.js
https://unpkg.com/react-dom@17/umd/react-dom.production.min.js
Kelompok pertama adalah versi yang belum dikecilkan (unminified). Ini ditandai dengan kata "development" di dalam nama file. Anda bebas ingin memakai versi yang mana saja.
Berikut template HTML dasar yang mengakses file react di CDN:
<!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> <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> //... kode JavaScript + React disini </script> </body> </html>
Di baris 10 dan 12 saya mengakses file react.development.js dan react-dom.development.js menggunakan tag <script> biasa. Tambahan atribut crossorigin berfungsi agar web browser "tidak komplain" karena kita mengakses file di luar server dan bisa menampilkan pesan error yang sesuai.
Dengan kedua file ini, di baris 15 kita sudah bisa menulis kode React atau bisa juga membuat file JS terpisah untuk kemudian diakses dari tag <script>.
Membuat Template HTML untuk React (Local/offline)
Template react CDN sebelumnya sudah bisa langsung dipakai. Akan tetapi file tersebut juga bisa di download untuk diakses di komputer lokal. Tujuannya agar kita bisa menjalankan kode react secara offline dan tidak pengaruh seandainya terjadi gangguan di server CDN atau di koneksi internet.
Sebagai persiapan, silahkan buat folder belajar_react di drive D. Kemudian buat juga folder js di dalamnya. Setelah itu buka alamat file react berikut di web browser, lalu save ke dalam folder belajar_react\js\:
https://unpkg.com/react@17/umd/react.development.js
https://unpkg.com/react-dom@17/umd/react-dom.development.js
Setelah selesai, di dalam folder belajar_react\js\ akan terdapat 2 buah file:
react.development.js
react-dom.development.js
Kembali ke folder belajar_react, buat satu file HTML yang mengakses kedua file React ini:
<!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> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <script> //... kode JavaScript + React disini </script> </body> </html>
Sip, template kode React sudah siap digunakan.
Dalam tutorial belajar React kali ini kita sudah akses file React dan membuat sebuah file template HTML. Berikutnya akan dibahas tentang Cara Membuat React Element.