React JS Adalah : Definisi , Pengertian & Cara Installnya – Saat ini, framework atau kerangka kerja dan library front-end menjadi bagian penting dari tumpukan pengembangan web modern. React JS adalah library front-end yang secara bertahap menjadi kerangka kerja untuk pengembangan web modern dalam komunitas JavaScript.
Bagi Anda yang baru mengenal pengembangan web, atau mencoba mencari tahu tentang hal-hal yang berkaitan dengan belajar React JS, ITBOX akan menjelaskan pengertian React, fungsi, dan cara instalasinya.
React JS Adalah ? Simak Panduan Lengkapnya
Apa itu React JS?
React JS adalah kerangka kerja dan library JavaScript sumber terbuka yang dikembangkan oleh Facebook. Ini digunakan untuk membangun user interface yang interaktif dan aplikasi web dengan cepat dan efisien dengan kode yang jauh lebih sedikit daripada yang Anda lakukan dengan JavaScript vanilla.
Di React JS, Anda bisa mengembangkan aplikasi dengan membuat komponen yang dapat digunakan kembali dan dapat Anda anggap sebagai blok Lego independen. Komponen-komponen tersebut adalah bagian individual dari final interface yang saat dirakit membentuk seluruh user interface aplikasi.
Peran utama React dalam aplikasi adalah untuk menangani lapisan tampilan aplikasi itu seperti V dalam pola model-view-controller (MVC) dengan memberikan eksekusi rendering terbaik dan paling efisien.
Daripada berurusan dengan seluruh user interface sebagai satu unit, React mendorong pengembang untuk memisahkan UI kompleks ini menjadi komponen individu yang dapat digunakan kembali yang membentuk blok bangunan dari keseluruhan UI.
Dengan demikian, framework ini menggabungkan kecepatan dan efisiensi JavaScript dengan metode manipulasi DOM yang lebih efisien untuk merender halaman web lebih cepat dan membuat aplikasi web yang sangat dinamis dan responsif.
Cara Kerja React JS
Saat Anda meminta halaman web dengan mengetikkan URL-nya ke browser web Anda, maka browser Anda kemudian mengirimkan permintaan untuk halaman web tersebut, kemudian dirender oleh browser Anda. Kemudian apabila Anda mengklik tautan di halaman web itu untuk membuka halaman lain pada situs web, akan ada permintaan baru yang dikirim ke server untuk mendapatkan halaman baru tersebut.
Pola pemuatan bolak-balik antara browser Anda (klien) dan server ini berlanjut untuk setiap halama baru yang coba Anda akses di situs web. Pola tersebut digunakan untuk memuat situs web sehingga bisa berfungsi dengan baik, tetapi Anda juga perlu pertimbangkan situs web yang sangat bergantung pada pergerakan data.
Selain itu, saat data berubah dalam aplikasi JavaScript tradisional, diperlukan manipulasi DOM manual untuk mencerminkan perubahan ini. Anda harus mengidentifikasi data mana yang berubah dan memperbarui DOM untuk mencerminkan perubahan tersebut, sehingga halaman dimuat ulang secara penuh.
React JS mengambil pendekatan yang berbeda dengan membiarkan Anda membangun single-page application (SPA). Aplikasi ini hanya memuat satu dokumen HTML pada permintaan pertama. Selanjutnya SPA akan memperbarui bagian, konten, atau badan halaman web tertentu yang perlu diperbarui menggunakan JavaScript.
Pola ini dikenal sebagai perutean sisi klien karena klien tidak perlu memuat ulang halaman web lengkap untuk mendapatkan halaman baru setiap kali pengguna membuat permintaan baru. Alih-alih, React mencegat permintaan dan hanya mengambil dan mengubah bagian yang perlu diubah tanpa harus memicu pemuatan ulang halaman penuh. Pendekatan ini menghasilkan kinerja yang lebih baik dan pengalaman pengguna yang lebih dinamis.
Kelebihan React JS
React unggul sebagai library Javascript karena memiliki fitur tambahan berupa JSX dan Virtual DOM. Dua fitur ini seringkali disebut apabila React JS dibandingkan dengan library JavaScript lainnya, misalnya Inferno JS ataupun Preact.
Untuk mengetahui apa yang unggul, mari kita lihat detail dari kedua fitur tersebut!
· JSX
JSX merupakan extension syntax JavaScript dan bisa Anda gunakan sebagai alat memodifikasi Document Object Model atau DOM dengan kode html. Untuk memahami fungsi JSX secara jelas, ketahui lebih dulu mengenai apa itu DOM.
DOM merupakan application programming interface atau API dan memiliki fungsi untuk menyusun struktur pada halaman web. Lalu untuk memberi tambahan konten dynamic di laman web, developer harus memodifikasi DOM.
Artinya, JSX akan memberi kemudahan untuk memperbanyak konten dinamis dikarenakan extension ini bisa digunakan untuk memasukkan kode bergaya html pada DOM. Namun perlu diingat bahwa JSX bukan HTML. Singkatnya, JSx tampak seperti html, tetapi fungsinya seperti Javascript.
Selain itu, Anda bisa memanfaatkan JSX di berbagai jenis browser karena JSX mampu mencocokkan diri dengan banyak platform browser, misalnya Chrome atau Mozilla Firefox.
· Virtual DOM
Saat developer melakukan update pada DOM menggunakan JSX, react akan membentuk Virtual DOM yang merupakan salinan DOM asli. Virtual DOM ini nanti akan digunakan untuk mengamati DOM asli yang berubah setelah diupdate.
Jadi, secara sederhananya Virtual DOM berguna untuk melihat bagian dari DOM versi sebelumnya yang telah mengalami perubahan. Setelah menemukan bagian DOM yang perlu dilakukan perubahan, React JS nantinya hanya mengubah bagian itu saja. Maka pengguna tak harus reload semua halaman untuk mengetahui perubahannya.
Jika tidak ada Virtual DOM, maka website hanya akan menggunakan html saat mengupdate DOM. Sehingga Anda harus melakukan reload pada semua halaman untuk melihat perubahan pada satu bagian.
Cara Menginstall
Setelah mengetahui apa itu React JS dan keunggulannya, selanjutnya adalah cara install React JS. Langkah-langkahnya tidak terlalu rumit, Anda bisa mengikuti panduan React JS installation berikut ini:
- Unduh installer js.
Apa itu Node JS? Node JS merupakan virtual environment yang digunakan pada framework lain, termasuk framework React. Selanjutnya tunggu proses install hingga selesai.
- Buatlah folder baru sebagai tempat instalasi react. Contohnya folder di D:\React-JS
- Buka CMD atau command prompt dan ketikan npm -v
- Masuk ke dalam folder instalasi yang sudah Anda buat. Lalu ketikan:
- d:
- cd React-js (nama folder “React-JS” bisa diganti dengan nama lain sesuai keinginan Anda)
- Selanjutnya ketik kode berikut saat melakukan install react: npm install -g create-react-app
- Untuk melihat apakah proses instalasi berhasil, Anda tinggal mengeceknya melalui versi react dengan cara ketik: create-react-app –version
- Langkah berikutnya Anda hanya perlu buat project react Anda untuk pertama kali. Anda bisa melakukan cara berikut yaitu dengan mengetik kode secara berturut-turut:
- create-react-app web-react-saya (nama “web-react-saya” bisa diganti dengan nama lain sesuai project milik Anda)
- cd web-react-saya
- npm start
- Setelah Anda selesai membuat project, nantinya muncul laman web yang memiliki alamat localhost:3000 dan terbuka otomatis.
- Jika ada error muncul, Anda tidak perlu panik. Ketikan kode berikut pada CMD untuk mengatasinya:
- npm install
- npm start
Kesimpulan
Nah itu dia penjelasan singkat mengenai React JS berikut cara kerja dan cara menginstallnya. Untuk lebih jelasnya mengenai cara penggunaan framework ini, Anda bisa melihat React JS tutorial melalui video YouTube dengan visualisasi yang lebih rinci. Semoga bermanfaat!
