React.Js adalah salah satu Library dari Bahasa pemrograman JavaScript yang sangat populer buatan Facebook yang digunakan untuk proses pengembangan aplikasi web atau aplikasi mobile. React.Js merupakan Kumpulan snippet kode dari Bahasa pemrograman JavaScript yang dapat digunakan secara berulang untuk mendesain user interface.
Dapat kalian ketahui bahwa React.Js ini bukanlah framework dari Bahasa pemrograman JavaScript, kenapa? Karena React.Js ini hanya bekerja untuk melakukan render komponen interface dari aplikasi. React.Js hanya framework alternatif seperti Angular.Js dan Vue.Js, yang sama – sama dapat digunakan untuk fungsi yang kompleks
Berbagai Fitur React.Js
React.Js mempunyai bebrapa fitur utama yang lebih unggul dari Library JavaScript lainnya. Berikut fitur yang dimiliki React.Js:
- JSX
JSX adalah ekstensi untuk Bahasa pemrograman JavaScript yang biasa digunakan dalam membuat elemen React.Js. Programmer atau Developer biasanya menggunakan untuk embed (menyematkan) dari kode HTML pada objek JavaScript. Karena dapat memproses penyematan ekspresi dan fungsi dari JavaScript yang valid, JSX juga dapat membantu mempersingkat struktur kode menjadi kompleks.
Lihat kode berikut ini untuk contoh dari embed ekspresi JSX:
const name = 'John Smith;
const element = h1>Hello, {name}/h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
Dalam baris kedua, pemanggilan untuk variable name (nama) dalam elemen React dan diletakkan dalam kurung kurawal.
Untuk ReactDOM.render itu sendiri memilki fungsi untuk merender elemen React.Js yang berada dalam struktur data DOM (Document Object Model), pada user interface.
JSX juga dapat membantu kalian untuk mencegah adanya Cross-Site Scripting (XSS). Nilai dari JSX akan diubah melalui DOM React dan sebelum melakukan render menjadi string nilai tersebut dilakukan embed (menyematkan) terlebih dahulu. Hasilnya, dari pihak ketiga tidak bisa melaukan inject kode tambahan di dalam input user, kecuali sudah tertulis jelas di dalam aplikasi.
- DOM Virtual
DOM (Document Object Model) mempunyai fungsi untuk membuat halaman dari website ke dalam struktur data (tree/pohon). Data Dom Virtual ini disimpan oleh React.Js di dalam memorinya, maka, jika ada perubahan di bagian tertentu di dalam struktur data tersebut, tidak usah kalian render ulang dari awal.
Setiap adanya perubahan pada bagian data, React.Js akan melakukan pembuatan struktur dari data DOM Virtual yang baru dan dibandingkan dengan struktur data sebelumnya, dan mencari cara untuk penerapan perubahan pada data DOM yang asli yang disebut dengan proses diffing.
Maka dari itu, perubahan dari user interface hanya dapat mempengaruhi bagian tertentu saja pada struktur data DOM yang asli, proses perubahan render ini juga dapat dilakukan dengan cepat dan hemat resource. Ya, ini akan membantu sekali untuk kalian yang sedang melakukan projek besar dan perlu interaksi dengan user.
- Komponen dan Properti React.Js
Pemisahan user interface menjadi beberapa kode itu dilakukan oleh React.Js dan nantinya dapat digunakan Kembali atau dapat digunakan ulang, yang disebut dengan komponen. Komponen yang ada pada React.Js akan melakukan cara kerjanya yang hampir sama dengan Bahasa pemrograman JavaScript, yang disebut dengan props (properti) dan sama sama menerima input orbiter.
React.Js akan menghasilkan elemen yang akan dilihat oleh user pada bagian user interface. Dibawah ini contoh dari elemen React.Js:
function Welcome(props) {
return h1>Hello, {props.name}/h1>;
}
Kalian dapat menambahkan komponen sebanyak mungkin dan tetap akan terlihat rapi.
- Manajemen State
Keadaan (State) merupakan objek dari bahasa pemrograman JavaScript yang dapat mewakili bagian sebuah komponen. Setiap user melakukan interaksi dengan aplikasi, state akan Malukan perubahan, dengan merender user interface baru untuk tampilan perubahan dari interaksi yang dilakukan
Manajemen state ini memeilki fitur yang dapat mengacu pada prosedur untuk mengelola keadaan yang dilakukan pada aplikasi React.Js. menyimpan data ke dalam library manajemen state pihak ketiga adalah salah satu contoh dari fitur manajemen state, dan dapat memicu proses rendering ulang setiap pengubahan data.
Fungsi dari library manajemen state untuk mempermudah komunikasi dan proses pembagian data antara komponen React.Js. Beberapa library yang ada pada pihak ketiga manajemen state dan paling populer adalah Redux dan Recoil.
