Tutorial ReactJS Part #1: Pengenalan Dasar ReactJS

Saat ini perkembangan javascript untuk frontend semakin berkembang dan semakin banyak library yang ada untuk meningkatkan kualitas frontend semakin baik. Saat ini dari banyak library UI yang populer, react JS urutan pertama pada tahun 2022 dari segi populeritas.

Sekarang ini eranya ReactJS merajai untuk para developer forntend.

Apa itu ReactJS?

ReactJS adalah library JavaScript deklaratif, efisien, dan fleksibel untuk membangun komponen UI yang dapat digunakan kembali. Ini adalah library berbasis komponen open-source yang bertanggung jawab untuk UI aplikasi. Ini awalnya dikembangkan dan dikelola oleh Facebook dan kemudian digunakan dalam produk-produknya seperti WhatsApp & Instagram.

Mungkin teman-teman semua berangapan bahwa ReactJS merupakan framework, padahal ReactJS itu melainkan hanya sebuah library untuk membuat UI.

Sejarah ReactJS

React JS adalah sebuah pustaka javascript yang dibuat oleh facebook, ia bukan sebuah framework MVC. ReactJS bersifat composable user interface yang berarti pengguna bisa membuat berbagai UI dan nantinya bisa dibagi dalam beberapa komponen dan juga bersifat reusable component yang berarti komponennya bisa digunakan kembali tanpa harus membangun kembali dari awal lagi, React JS bisa digunakan untuk membangun antarmuka pengguna yang khusus untuk tampilan aplikasi dalam satu halaman yang menangani tampilan pada web dan aplikasi seluler.

Resmi dirilis pada tahun 2013, ReactJS dibuat oleh Jordan Walke. ReactJS ini telah menjadi salah satu pustaka UI terpenting dalam Javascript, dan telah digunakan oleh Facebook, Instagram, Netflix, Spotify, Medium hingga Twitter. React telah mengubah cara Anda membangun antarmuka UI, kebanyakan orang menyebut React JS sebuah framework. Secara teknis React JS bukanlah sebuah framework melainkan sebuah library yang digunakan untuk membuat UI.

Jordan Walke merupakan salah satu karyawan Facebook, prototipe ReactJS yang ia rilis pertama kali Fax JS yang terinspirasi dari XHP. Facebook menyadari bahwa aplikasi web milik mereka semakin kompleks, ada banyak bagian yang harus terus menerus di update seperti pada bagian news feed, chat list, chat box, dan lainnya secara realtime. Untuk memenuhi hal tersebut, sangat tidak memungkinkan untuk menggunakan JQuery yang masih tradisional karena memakan banyak biaya kedepannya. Memanipulasi DOM membutuhkan resource yang besar, sehingga React JS hadir untuk memberikan solusi berupa Virtual DOM yang menurut mereka lebih cepat.

Kenapa menggunakan ReactJS?

Tujuan utama ReactJS adalah untuk mengembangkan Antarmuka Pengguna (UI) yang meningkatkan kecepatan aplikasi. Ini menggunakan DOM virtual (objek JavaScript), yang meningkatkan kinerja aplikasi. DOM virtual JavaScript lebih cepat daripada DOM biasa. Kita dapat menggunakan ReactJS di sisi klien dan server serta dengan kerangka kerja lainnya. Ini menggunakan komponen dan pola data yang meningkatkan keterbacaan dan membantu memelihara aplikasi yang lebih besar.

DOM adalah objek yang dibuat oleh browser setiap kali halaman web dimuat. Ini secara dinamis menambahkan atau menghapus data di bagian belakang dan ketika ada modifikasi yang dilakukan, maka setiap kali DOM baru dibuat untuk halaman yang sama. Pembuatan DOM yang berulang ini membuat pemborosan memori yang tidak perlu dan mengurangi kinerja aplikasi.

Oleh karena itu, kerangka kerja ReactJS teknologi baru diciptakan yang menghilangkan kelemahan ini. ReactJS memungkinkan Anda untuk membagi seluruh aplikasi Anda menjadi berbagai komponen. ReactJS masih menggunakan aliran data tradisional yang sama, tetapi tidak langsung beroperasi pada Document Object Model (DOM) browser secara langsung; sebagai gantinya, ia beroperasi pada DOM virtual. Artinya, alih-alih memanipulasi dokumen di browser setelah perubahan pada data kami, ini menyelesaikan perubahan pada DOM yang dibuat dan dijalankan sepenuhnya di memori. Setelah DOM virtual diperbarui, React menentukan perubahan apa yang dibuat pada DOM browser yang sebenarnya. React Virtual DOM ada seluruhnya dalam memori dan merupakan representasi dari DOM browser web. Karena itu, ketika kita menulis komponen React, kita tidak menulis langsung ke DOM; sebagai gantinya, kita menulis komponen virtual yang bereaksi akan berubah menjadi DOM.

Persiapan Awal untuk Belajar ReactJS

Beberapa tools yang harus teman semua persiapkan untuk belajar ReactJS:

• Web Browser
• Teks Editor (rekomendasi VS Code)
• Nodejs dan NPM

Untuk proses instalasi Node JS dan NPM teman semua bisa pelajar di website resmi npm.

https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

Demikian tutorial kali ini saya buat semoga bermanfaat untuk teman-teman semua.

Terimakasih….