Raya Tekno

logo react js

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.

contoh script react js
contoh script react js

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.

Baca Juga  Raya Tekno - Penyedia Informasi Teknologi Terpercaya

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)
Baca Juga  Apa itu Saas

render adalah metode siklus hidup yang paling penting dan satu-satunya yang diperlukan dalam komponen apa pun. Biasanya dipanggil setiap kali status komponen diperbarui, yang harus tercermin dalam antarmuka pengguna.

JSX
JSX, atau Ekstensi Sintaks JavaScript, adalah ekstensi untuk sintaks bahasa JavaScript.[22] Tampilannya mirip dengan HTML, JSX menyediakan cara untuk menyusun rendering komponen menggunakan sintaksis yang familiar bagi banyak developer. Komponen React biasanya ditulis menggunakan JSX, meskipun tidak harus (komponen juga dapat ditulis dalam JavaScript murni). JSX mirip dengan sintaks ekstensi lain yang dibuat oleh Facebook untuk PHP yang disebut XHP.

Arsitektur di luar HTML
Arsitektur dasar React melampaui rendering HTML di browser. Misalnya, Facebook memiliki bagan dinamis yang dirender ke tag <kanvas>, dan Netflix serta PayPal menggunakan pemuatan universal untuk merender HTML identik di server dan klien.

Demikianlah sekilas perkenalan tentang mengenal React JS, semoga bermanfaat.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.