Apa Itu React? Library Javascript yang Mendisrupsi Dunia Web Development

Bisa dibilang Membangun sebuah Web itu mirip dengan orang yang membangun Rumah. Bagian demi bagian harus dibangun semuanya dari awal seperti pondasi, dinding, atap, dan detail detail kecil lainnnya. Bedanya web development lebih mirip membangun gedung tumbuh. Sedikit demi sedikit memiliki fitur / kapasitas yang menyesuaikan kebutuhan pengunjung.

Jaman dulu hal yang dibahas seputar web development sangat sederhana yaitu HTML dan CSS. Karena zaman itu kebutuhannya hanya menyampaikan informasi dengan cepat. Tren mulai berubah ketika menjadikan website tempat manusia beraktivitas. Membutuhkan tampilan yang interaktif, maka diciptakanlah Javascript, membutuhkan data yang dinamis, dilibatkanlah bahasa pemrograman PHP lengkap dengan database untuk melakukannya.

Ya, itulah yang dilakukan oleh Mark Zuckerberg bersama rekan-rekan mahasiswa dan teman sekamarnya di Harvard College. Membangun web aplikasi bernama Facebook yang membuat banyak pengguna sadar bahwa Internet bisa memberikan manfaat lebih. Salah satunya adalah bersosialisasi. Siapa yang ga tertarik bisa melihat berinteraksi, berkirim foto, berkirim pesan secara online. Singkat cerita Facebook memiliki pertumbuhan pengguna yang terus tumbuh yang menuntut aplikasi web bisa memenuhi kebutuhan penggunanya. Para engineer web pun akhirnya menghadapi masalah dan dilema yang besar.

Aplikasi facebook semakin kompleks dengan jutaan pengguna yang berinteraksi secara realtime. Aktivitas seperti update status, like, comment, membuat para engineer harus memutar otak bagaimana memfasilitasi itu semua. Jadi ga langsung bilang “wah ga bisa kalau gitu” keren yak engineernya.

Tampilan yang harus berubah secara Realtime, dan rentetan kejadian harus sesuai dengan interaksi yang harus dilakukan, para engineer harus menemui masalah bagaimana cara update tampilan website secara Realtime. Artinya bagaimana cara mengubah DOM browser bisa sesuai dengan apa yang dimaksud user. Berlomba lomba para developer menciptakan library seperti Angular, Backbone, dll

Apa itu React ?

Ada anak baru datang namanya Jornad Walke, menawarkan prototype solusi yang akhirnya dinilai memiliki pendekatan yang tepat untuk mengubah cara para web developer membangun web yang sangat kompleks. setidaknya sudah terbukti hingga sekarang / 1 dekade lebih. Prototype itu bernama React. Bayangin semua tim facebook yang kelimpungan untuk menyelesaikan masalah besar untuk mengupdate DOM, ada anak baru bisa memecahkan solusi dari masalah besar itu. Kadang kita butuh pemikiran baru yang tidak terjebak dengan paradigma “biasanya” untuk menyelesaikan masalah.

Jadi apa itu React ? React atau ReactJS adalah library javascript yang menjadi jawaban dari masalah besar saat membangun user interface web interaktif yang sangat kompleks.

Apa yang membuat Reactjs populer dan Istimewa ?

Setidaknya hel berikut adalah pendekatan menarik React dalam menyelesaikan masalah komplkes web development kompleks sehingga membuat React semakin populer.

Component Based Architecture: Mirip bikin lego untuk web

Membuat bagian demi bagian website mirip seperti kita membuat mainan dari lego. Setiap potongan kecil web Interface adalah “component” yang bisa kita buat dan gunakan (re-use) berulang kali dimana saja layaknya lego untuk membentuk antarmuka / interface yang lebih kompleks. Kebayang, kan? Setiap tombol, bagian navigasi, atau bahkan notifikasi di aplikasi bisa dibuat menjadi komponen yang terpisah, bisa digunakan ulang, dan mudah diatur. Misalnya, kalau kita punya tombol "Like" di satu tempat, kita bisa langsung mengambil komponen itu dan menggunakannya di tempat lain, tanpa perlu menulis ulang kodenya. Hal itu yang membuat React disebut library yang Deklaratif (do less, get more)

Virtual DOM: Ubah hanya yang perlu diubah

Alasan selanjutnya mengapa React begitu populer adalah efisiensi resource komputer dalam mengupdate tampilan. Konsep itu bernama Virtual DOM. Sekilas, DOM (Document Object Model) adalah struktur yang merepresentasikan tampilan / informasi yang ada di halaman web, dan setiap kali ada perubahan, cara lama adalah menghapus semua struktur DOM dan memberikan semua struktur DOM yang baru. Padahal yang berubah hanya sedikit. Tapi harus “ngerepotin” banyak pihak.
Virtual DOM punya pendekatan yang unik. Daripada menghancurkan semua dan membangun ulang dengan yang baru, kenapa tidak diganti saja yang perlu diganti. Virtual DOM berperan untuk meng-capture struktur DOM lama (real DOM) dan Baru (Virtual DOM), lalu dicari perbedaannya. maka React akan memperbaruhi bagian yang berubah, tidak seluruh halaman.

JSX: Menulis JavaScript seolah olah menulis HTML

JSX memungkinkan kita menulis HTML di dalam Javascript agar experience web developer yang biasa menulis HTML lebih banyak, ketika menulis kode javascript berasa nulis HTML biasa. Padahal HTML yang dia tulis adalah kode Javascript bukan kode HTML. Ini tentu sangat membantu, karena kita bisa langsung melihat struktur tampilan DOM seperti apa yang akan tersusun tanpa kita harus repot buka browser dan inspect element. Misalnya, saat kita ingin membuat sebuah tombol, kita cukup menuliskannya dalam format JSX:

const TombolLike = <button>Like</button>;

One-Way Data Binding / Flow: Aliran Data yang Jelas

Mekanisme perubahan data pada React dibuat satu arah. Dari State ke komponen, Dari parent ke Child. Mirip seperti aliran dana dari pemerintah pusat hingga ke desa. Sehingga dengan mekanisme yang jelas, mekanisme debugging akan mudah diprediksi

React dan Ekosistemnya

Bisa dibilang karena library ini sangat populer, dalam perjalanannya React memiliki banyak library atau framework pendukung seperti React Router, Redux, Zustand, Nextjs, Remix menjadikan React sebagai library yang memiliki ekosistem yang sangat besar. Apa keuntungan dari ekosistem yang besar ? tentu mencari tenaga yang terampil akan dimudahkan. Sama seperti membeli mobil di Indonesia, MPV seperti Avanza banyak diminati karena banyak bengkel dan sparepart yang mendukung sehingga nilai ekonomi akan tinggi. Berbeda jika kita membeli mobil yang sparepartnya hanya ada di negara tertentu, mahal.

Kenapa React Menjadi Pilihan Banyak Perusahaan?

Kemampuan dan daya tariknya membuat banyak perusahaan yang menjadikan teknologi sebagai produk utama (Netflix, AirBnb, Tokopedia, Instagram) memilih Reactjs sebagai Stack Teknologi utamanya. Bukan hanya karena performanya, namun juga karena kemudahan dan pemeliharaan yang relatif mudah. Dengan kemampuan seperti komponen yang reusable, tim engineer web akan bekerja lebih cepat dan yang paling pentin tanpa batasan kemampuan fitur. Apapun bentuk user experience dan Interface nya, React siap mewujudkannya.

Apakah React masih relevan seiring perkembangan Zaman ?

Setidaknya muncul framework populer yang terus dimaintenance seperti Nextjs, Remix, React akan selalu menjadi nyawa dari framework populet tersebut. Dan setidaknya juga masih ada Facebook yang sampai saat ini masih menggunakan React.

Kesimpulan

React lebih dari sekadar library JavaScript. Ia adalah jawaban bagi masalah pembaruhan struktur DOM yang lebih cepat, dinamis, dan mudah di-maintain. React juga telah menjadi fondasi dari banyak aplikasi web modern yang kita gunakan sehari-hari. Dalam dunia yang selalu melibatkan teknologi untuk bergerak cepat ini, React memberi developer kebebasan untuk mewujudkan aplikasi dengan cara yang lebih efektif dan efisien..