Ketika belajar tentang pengembangan web, mungkin kamu pernah mendengar mengenai React JS. Istilah ini dapat menjadikan kamu bertanya-tanya. Apa itu React JS? Fungsinya untuk apa? Lalu Apa hubungannya dengan JavaScript?
Wawasan mengenai React JS adalah sesuatu yang kami rasa sangat penting. Khususnya jika kamu ingin membuat User Interface (UI) website yang menarik dan nyaman.
Ingin tahu lebih dalam mengenai React JS? Pada Artikel ini kami akan menjelaskan apa itu React JS serta fungsi dan keunggulannya.
Apa itu React JS?
React JS adalah library JavaScript yang umum dipakai ketika mengembangkan UI suatu website atau aplikasi web.
Jadi, React JS bisa dianggap layaknya perpustakaan yang berisi berbagai kode JavaScript yang telah tertulis (pre-written). Kamu tinggal mengambil kode yang ingin kamu pakai. Sehingga, ini membuat proses coding jadi lebih efisien dengan framework JavaScript yang ada tersebut.
Sebentar, apakah kamu belum tau apa itu JavaScript? Jika belum tahu, JavaScript adalah bahasa pemrograman yang bisa membantu kamu membuat konten web yang dinamis, seperti form, slideshow, ataupun konten interaktif lainnya.
Dengan JavaScript, kamu bisa membuat tampilan UI website yang lebih menarik. Nah, inilah mengapa library ini bermanfaat untuk membangun UI, karena implementasi kode JavaScript di website kamu bisa menjadi lebih mudah.
Oh ya, library ini juga memiliki sifat open source. Artinya, isinya akan terus berkembang lantara semua orang bebas memodifikasi kode di dalamnya.
Berkat fungsionalitasnya, React JS adalah salah satu library yang sangat populer saat ini. Saat ini ada lebih dari satu juta website yang telah memakainya. Bahkan website-website terkenal misalnya bbc.com, paypal.com, serta yahoo.com pun juga menggunakannya.
Apa Kelebihan React JS?
Di atas, kita telah membahas sebagian fungsi dari library ini, yaitu untuk mempermudah pemakaian JavaScript. Selain itu, ada dua fitur tambahan yang jadi keunggulannya yaitu JSX dan Virtual DOM.
Kedua fitur ini yang seringkali disebut apabila React JS sedang dibandingkan dengan library JavaScript yang lain – seperti Inferno JS ataupun Preact. Oleh sebab itu, mari kita bahas kedua fitur tersebut secara lebih detail!
JSX
JSX adalah extension syntax JavaScript yang bisa memungkinkan kamu untuk kustomisasi Document Object Model (DOM) dengan kode bergaya HTML.
Untuk mengetahui fungsi JSX dengan lebih jelas, kamu perlu mengetahui mengenai DOM terlebih dahulu.
DOM adalah application programming interface (API) yang memiliki fungsi untuk mengatur struktur halaman web. Nah, untuk menambahkan konten dinamis ke dalam halaman web, pengembang harus memodifikasi DOM terlebih dulu.
Dengan kata lain, JSX akan mempermudah kamu untuk menambahkan konten dinamis ke dalam web. Karena extension ini dapat membantu kamu untuk memasukkan syntax bergaya HTML ke dalam DOM.
Akan tetapi, JSX bukanlah bahasa HTML. Mungkin penjelasan sederhananya seperti ini: JSX terlihat mirip seperti HTML, namun mempunyai fungsi seperti JavaScript.
Selain itu, kamu juga bisa memakai JSX di berbagai browser. Karena JSX cocok dengan seluruh platform browser modern – seperti Chrome ataupun Firefox.
Virtual DOM
Ketika pengembang mengupdate DOM dengan memakai JSX, React JS akan membuat Virtual DOM, yaitu salinan dari DOM asli yang ingin di update.
Nah, Virtual DOM berfungsi untuk melihat bagian dari DOM asli yang berubah. Contohnya, ketika user website mengklik tombol like atau comment, tentu bagian yang perlu berubah hanya bagian like dan comment saja, bukan?
Ketika telah menemukan bagian yang perlu diubah, React JS hanya akan mengubah bagian itu saja. Jadi, user tidak perlu reload satu halaman penuh untuk melihat perubahannya.
Hal ini bisa berpengaruh terhadap performa website. Karena setiap perubahan tampilan hanya dilakukan pada bagian yang diperlukan saja.
Tanpa Virtual DOM, website kamu akan menggunakan HTML untuk update DOM. Sehingga, seluruh DOMnya mesti di muat ulang untuk menampilkan perubahan walaupun di satu bagian terkecil – seperti mengklik tombol like atau menambahkan komentar.
Itulah pembahasan mengenai Mengenal React JS yang kami rangkum untuk kamu. Semoga bermanfaat bagi kamu. Sekian dan terima kasih
See You!!!