Mengenal React JS

Mengenal React JS | React (juga dikenal sebagai React.js atau ReactJS) adalah library JavaScript front-end dengan lisensi sumber terbuka dan tersedia gratis untuk membangun antarmuka (interface) pengguna berdasarkan komponen UI. React JS dikelola oleh Meta (sebelumnya Facebook) dan komunitas pengembang serta perusahaan individu. React dapat digunakan sebagai basis dalam pengembangan aplikasi satu halaman (SPA), seluler, atau server-render dengan kerangka kerja seperti Next.js. Namun, React hanya berurusan dengan manajemen State dan rendering state tersebut ke DOM, sehingga membuat aplikasi React biasanya memerlukan penggunaan pustaka tambahan untuk routing, serta fungsionalitas pada sisi klien.

Deklaratif
React menganut paradigma pemrograman deklaratif. Pengembang mendesain tampilan untuk setiap status aplikasi, dan React memperbarui dan merender komponen saat data berubah. Ini berbeda dengan pemrograman imperatif.

Komponen
Bereaksi kode terdiri dari entitas yang disebut komponen. Komponen-komponen ini dapat digunakan kembali dan harus dibentuk dalam folder SRC mengikuti Pascal Case sebagai konvensi penamaannya (kapitalisasi camelCase). Komponen dapat dirender ke elemen tertentu di DOM menggunakan pustaka React DOM. Saat merender komponen, seseorang dapat meneruskan nilai antar komponen melalui “alat peraga”.

Baca Juga Mengenal Typescript

Komponen fungsional
Komponen fungsi dideklarasikan dengan fungsi yang kemudian mengembalikan beberapa JSX. Dari React versi 16.8 ke atas, komponen Fungsional dapat menggunakan status menggunakan Hooks.

React Hook
Pada 16 Februari 2019, React 16.8 dirilis ke publik. Rilis ini memperkenalkan React Hooks. Hooks adalah fungsi yang memungkinkan pengembang “terhubung ke” status React dan fitur daur hidup dari komponen fungsi. Hooks tidak bekerja di dalam kelas — mereka membiarkan Anda menggunakan React tanpa kelas. React menyediakan beberapa hook bawaan seperti useState, useContext, useReducer , useMemo dan useEffect. Lainnya didokumentasikan dalam Referensi API Hooks. useState dan useEffect, yang paling umum digunakan, masing-masing adalah untuk mengontrol status dan efek samping.

Virtual DOM
Fitur penting lainnya adalah penggunaan Model Objek Dokumen virtual, atau DOM virtual. React membuat cache struktur data dalam memori, menghitung perbedaan yang dihasilkan, dan kemudian memperbarui DOM yang ditampilkan browser secara efisien. Proses ini disebut rekonsiliasi. Hal ini memungkinkan pemrogram untuk menulis kode seolah-olah seluruh halaman dirender pada setiap perubahan, sedangkan pustaka React hanya merender sub komponen yang benar-benar berubah. Rendering selektif ini memberikan peningkatan kinerja yang besar. Ini menghemat upaya menghitung ulang gaya CSS, tata letak halaman, dan rendering untuk seluruh halaman.

Lifecycle
Metode siklus hidup untuk komponen berbasis kelas menggunakan bentuk pengait yang memungkinkan eksekusi kode pada titik setel selama masa pakai komponen.

ShouldComponentUpdate memungkinkan pengembang untuk mencegah rendering ulang komponen yang tidak perlu dengan mengembalikan false jika render tidak diperlukan.
componentDidMount dipanggil setelah komponen telah “dipasang” (komponen telah dibuat di antarmuka pengguna, seringkali dengan mengaitkannya dengan simpul DOM). Ini biasanya digunakan untuk memicu pemuatan data dari sumber jarak jauh melalui API.
componentWillUnmount dipanggil segera sebelum komponen diruntuhkan atau “dilepas”. Ini biasanya digunakan untuk menghapus dependensi yang menuntut sumber daya ke komponen yang tidak akan dihapus begitu saja dengan pelepasan komponen (mis., menghapus instance setInterval() apa pun yang terkait dengan komponen, atau “eventListener” yang disetel di ” dokumen” karena adanya komponen)