ReactJS atau React adalah library JavaScript populer buatan Facebook yang digunakan dalam proses pengembangan aplikasi mobile dan web. React berisi kumpulan snippet kode JavaScript (disebut ‘komponen’) yang bisa digunakan berulang kali untuk mendesain antarmuka pengguna.

Perlu diketahui bahwa ReactJS bukanlah framework JavaScript, karena hanya bertugas untuk untuk merender komponen area tampilan aplikasi. React adalah alternatif untuk framework seperti Angular dan Vue, yang sama-sama bisa digunakan untuk membuat fungsi yang kompleks.

Nah, selain menjelaskan apa itu React, kami akan membahas fitur, kelebihan, dan cara kerjanya. Kami juga akan membandingkan perbedaan ReactJS dan React Native terkait perannya di industri aplikasi web dan seluler.

Kemudian, kami akan memberikan contoh cara deploy (meluncurkan) aplikasi React di hPanel Hostinger. Tanpa berlama-lama lagi, mari mulai mempelajari apa itu React!

React memiliki beberapa fitur utama yang menjadikannya lebih unggul dibandingkan dengan library JavaScript lainnya. Bagian di bawah ini akan menjelaskan fitur-fitur ini dan kegunaannya dalam proses development aplikasi mobile dan web.

JSX adalah ekstensi syntax JavaScript yang digunakan dalam pembuatan elemen React. Developer menggunakannya untuk menyematkan (embed) kode HTML pada objek JavaScript. Karena bisa memproses embedding ekspresi dan fungsi JavaScript yang valid, JSX pun membantu mempersingkat struktur kode yang kompleks.

Mari lihat blok kode berikut, yang mencontohkan cara embed ekspresi di JSX:

const name = 'John Smith;
const element = h1>Hello, {name}/h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Pada baris kedua, kami memanggil variabel name (nama) di dalam sebuah elemen React dengan meletakkannya di dalam kurung kurawal.

Sementara itu, fungsi ReactDOM.render() akan merender elemen React pada struktur data DOM (Document Object Model), yang mendeskripsikan antarmuka penggunanya (UI).

JSX juga membantu mencegah serangan XSS (Cross-Site Scripting). Secara default, DOM React mengubah nilai yang disematkan di JSX menjadi string sebelum merendernya. Hasilnya, pihak ketiga tidak bisa inject kode tambahan melalui input user, kecuali ditulis dengan jelas dalam aplikasi.

Tenang, nanti kita akan mempelajari peran JSX dalam pembuatan komponen React secara lebih mendetail.

Document Object Model (DOM) berfungsi untuk menyajikan halaman web dalam tampilan struktur data (tree/pohon). ReactJS menyimpan struktur data DOM Virtual ini dalam memorinya, sehingga kalau ada perubahan pada bagian tertentu dalam struktur data tersebut, Anda tidak perlu merender ulang semuanya.

Setiap kali ada perubahan data, ReactJS akan membuat satu struktur data DOM Virtual baru dan membandingkannya dengan yang sebelumnya, lalu mencari cara tercepat untuk menerapkan perubahan tersebut pada DOM yang asli. Proses ini disebut diffing.

Jadi, perubahan UI hanya akan memengaruhi bagian tertentu dalam struktur data DOM yang asli, sehingga proses render perubahan pun bisa lebih cepat dan lebih hemat resource. Tentu saja, ini akan sangat membantu bagi proyek berskala besar yang perlu banyak interaksi user.

ReactJS memisahkan antarmuka pengguna menjadi beberapa potong kode tersendiri yang nantinya bisa digunakan lagi, yang disebut komponen. Cara kerja komponen React mirip dengan fungsi JavaScript, yaitu sama-sama menerima input arbitrer yang disebut properti atau props.

Elemen React yang dihasilkan (return) akan menentukan bagaimana tampilan antarmuka pengguna yang dilihat oleh user (sisi klien). Berikut contoh komponen fungsi yang menghasilkan elemen React:

function Welcome(props) {
  return h1>Hello, {props.name}/h1>;
}

Anda boleh menambahkan sebanyak mungkin komponen, dan semuanya akan tetap terlihat rapi.

State (keadaan) adalah objek JavaScript yang mewakili satu bagian dari sebuah komponen. Setiap kali user berinteraksi dengan aplikasi, state juga akan berubah, dengan merender UI baru guna menampilkan perubahan dari interaksi tersebut.

Fitur manajemen state ini mengacu pada prosedur yang dilakukan untuk mengelola keadaan sebuah aplikasi React. Contohnya seperti menyimpan data di library manajemen state pihak ketiga, dan memicu proses rendering ulang setiap kali data diubah.

Library manajemen state berfungsi untuk mempermudah komunikasi dan proses berbagi data di antara komponen React. Ada beberapa library manajemen state pihak ketiga yang tersedia saat ini, yang paling populer adalah Redux dan Recoil.

Redux memiliki store terpusat yang berfungsi untuk menjaga state sebuah aplikasi agar terus berjalan sesuai prediksi. Library ini juga meminimalkan inkonsistensi data, dengan tidak mengizinkan dua komponen untuk memperbarui state aplikasi secara bersamaan.

Arsitektur Redux memiliki error log untuk mempermudah proses debug, dan memiliki prosedur penataan kode yang ketat sehingga maintenance jadi lebih mudah. Selain itu, Redux memiliki banyak add-on dan kompatibel dengan semua layer antarmuka pengguna.

Kesimpulannya, Redux agak sedikit rumit dan kurang optimal untuk aplikasi kecil dengan satu sumber data.

Recoil adalah library manajemen state JavaScript yang dirilis oleh Facebook. Library ini memiliki fungsi murni yang disebut selector, bertugas untuk menghitung data dari atom (unit yang bisa diubah dari sebuah state).

Beberapa komponen bisa memanfaatkan atom yang sama, dan oleh karena itu, bisa menggunakan state yang sama pula.

Penggunaan atom dan selector mengurangi state yang tidak dibutuhkan, menyederhanakan kode, serta meniadakan proses rendering ulang yang terlalu sering untuk React dan komponen turunan apa pun.

Recoil lebih cocok untuk pemula daripada Redux, karena konsep intinya jauh lebih mudah dipahami.

Navigasi terprogram adalah peristiwa di mana rangkaian kode menghasilkan sebuah tindakan yang mengarahkan user ke area tertentu. Contohnya adalah proses login dan mendaftar akun, yang secara terprogram akan mengarahkan user ke halaman baru.

React Router, library standar React untuk perutean, menyediakan berbagai metode navigasi terprogram yang aman antarkomponen tanpa mengharuskan user mengklik link apa pun.

Metode utama yang digunakan dalam navigasi terprogram biasanya adalah komponen Redirect, atau history.push() sebagai opsi lainnya.

Singkatnya, package React Router menyinkronkan antarmuka pengguna dengan URL sehingga Anda bisa mengontrol tampilan aplikasi React tanpa bergantung pada link.