Pengenalan ReactJS

Apa itu React?

React adalah pustaka (library) JavaScript yang digunakan untuk membangun antarmuka pengguna
(UI), terutama untuk aplikasi satu halaman atau single-page applications (SPA). Dikembangkan oleh
Facebook pada tahun 2011 dan dirilis sebagai proyek open-source pada tahun 2013, React
memungkinkan pengembang untuk membangun UI yang dinamis, cepat, dan efisien dengan
memanfaatkan pendekatan berbasis komponen. Komponen dalam React adalah bagian-bagian kecil
dari UI yang bersifat reusable atau dapat digunakan kembali, sehingga sangat memudahkan dalam
membangun antarmuka yang kompleks dengan cara yang terstruktur.

Sejarah Pengembangan React

React diciptakan oleh Jordan Walke, seorang insinyur perangkat lunak di Facebook, sebagai solusi
untuk mengatasi masalah dalam pengelolaan antarmuka pengguna yang dinamis dan kompleks. Pada
saat itu, aplikasi Facebook mengalami kesulitan dalam menjaga kinerja dan kecepatan UI karena
seringnya pembaruan data yang harus diproses. Konsep Virtual DOM diperkenalkan dalam React
untuk mempercepat dan mengoptimalkan proses pembaruan UI, di mana hanya elemen-elemen
yang perlu diperbarui yang akan dimodifikasi dalam DOM.

Pada tahun 2013, React secara resmi dirilis sebagai proyek open-source di GitHub. Sejak saat itu,
React berkembang dengan pesat dan menarik banyak perhatian di industri teknologi, didukung oleh
komunitas yang besar serta digunakan oleh berbagai perusahaan besar, termasuk Instagram, Netflix,
Airbnb, dan Uber.

Alasan Popularitas React

Beberapa faktor yang menjadikan React sangat populer adalah:

1. Virtual DOM: React menggunakan Virtual DOM untuk mengelola perubahan dalam tampilan
aplikasi secara efisien. Dengan membandingkan perubahan dalam versi virtual dan nyata dari
DOM, React hanya memperbarui elemen-elemen yang benar-benar berubah, sehingga
proses rendering menjadi jauh lebih cepat.

2. Pendekatan Berbasis Komponen: React menggunakan pendekatan berbasis komponen yang

memungkinkan pengembang memecah UI menjadi potongan-potongan kecil yang dapat
digunakan kembali. Hal ini tidak hanya meningkatkan keterbacaan dan pemeliharaan kode,
tetapi juga menghemat waktu karena komponen yang sama dapat digunakan di beberapa
bagian aplikasi.

3. Dukungan Ekosistem dan Komunitas: Ekosistem React sangat luas dengan banyak library
pendukung seperti React Router untuk routing, Redux dan Context API untuk manajemen
state, serta berbagai tools testing. Komunitas besar dan aktif juga mempermudah akses ke
dukungan teknis, tutorial, dan resources lainnya.

4. Penggunaan Hooks: Dengan diperkenalkannya React Hooks pada versi 16.8, React memberi
kemudahan dalam mengelola state dan efek samping di dalam komponen fungsional tanpa
perlu menggunakan class. Ini menjadikan pengembangan lebih mudah dan bersih.
 5. Portabilitas dan Kompatibilitas: React bisa digunakan untuk mengembangkan aplikasi web
maupun aplikasi mobile dengan bantuan React Native, sebuah framework turunan dari React
untuk pengembangan aplikasi mobile.

React menjadi pilihan utama bagi pengembang yang mencari solusi yang fleksibel, cepat, dan
scalable untuk membangun antarmuka pengguna modern yang interaktif dan responsif.

Konsep Dasar dalam ReactJS

Komponen
Komponen adalah blok bangunan utama dalam React yang memungkinkan pengembang membagi UI
menjadi bagian-bagian kecil yang independen, dapat digunakan kembali, dan mudah untuk
dipelihara. Ada dua jenis komponen utama dalam React:

 Komponen Fungsional: Ini adalah fungsi JavaScript sederhana yang menerima props sebagai
argumen dan mengembalikan elemen React. Komponen ini lebih sederhana dan lebih
mudah untuk ditulis serta lebih sering digunakan dalam React modern, terutama dengan
adanya Hooks.

function Greeting(props) {

return <h1>Hello, {props.name}!</h1>;

 Komponen Kelas: Komponen kelas merupakan komponen berbasis class dalam ES6, yang
memperluas class React.Component. Komponen kelas memiliki kemampuan untuk
mengelola state (sebelum adanya hooks).

class Greeting extends React.Component {

render() {

return <h1>Hello, {this.props.name}!</h1>;

Dengan struktur berbasis komponen, React memungkinkan kita untuk membangun antarmuka yang
kompleks dengan cara modular, menjadikan setiap bagian UI lebih mudah dipelihara, diuji, dan
digunakan kembali.

State dan Props

State dan Props adalah dua konsep utama yang berfungsi untuk mengelola data dalam komponen
React.
  State: State adalah objek khusus dalam komponen yang digunakan untuk menyimpan data
atau status lokal komponen. Data dalam state bisa berubah seiring berjalannya waktu,
misalnya saat pengguna berinteraksi dengan komponen. Ketika state berubah, React secara
otomatis me-render ulang komponen untuk mencerminkan perubahan tersebut.

function Counter() {

const [count, setCount] = React.useState(0);

return (

<div>

<p>Anda mengklik sebanyak {count} kali</p>

<button onClick={() => setCount(count + 1)}>Klik saya</button>

</div>

);

 Props: Props adalah singkatan dari “properties” yang berfungsi untuk mengirimkan data dari
satu komponen ke komponen lainnya. Props bersifat read-only dan tidak bisa diubah oleh
komponen yang menerima. Dengan props, data atau fungsi bisa diturunkan dari komponen
induk ke komponen anak.

function Greeting(props) {

return <h1>Hello, {props.name}!</h1>;

function App() {

return <Greeting name="Alice" />;

Secara ringkas, state adalah data internal yang dimiliki komponen dan dapat berubah, sementara
props adalah data yang diterima dari komponen induk yang tidak dapat diubah.

Virtual DOM
Virtual DOM adalah representasi ringan dari DOM asli (Document Object Model) yang dimiliki oleh
browser. React menggunakan Virtual DOM untuk meningkatkan performa aplikasi. Berikut cara kerja
Virtual DOM:

1. Ketika ada perubahan pada state atau props, React membuat salinan Virtual DOM baru.
 2. React kemudian membandingkan (diffing) antara Virtual DOM yang baru dan yang lama
untuk melihat bagian mana yang berubah.

3. Setelah mengetahui perbedaannya, React hanya memperbarui elemen yang mengalami

perubahan dalam DOM asli, bukan me-render ulang seluruh elemen. Proses ini dikenal
sebagai reconciliation.

Perbandingan Virtual DOM dengan DOM Asli:

Virtual DOM memungkinkan React untuk melakukan proses rendering secara efisien, terutama
pada aplikasi kompleks yang memerlukan pembaruan UI yang cepat.

Sintaks Dasar dalam React

React memiliki sintaks khusus untuk membuat antarmuka yang disebut JSX. Selain itu, dengan
adanya Hooks, pengembangan dalam React menjadi lebih fleksibel dan efisien. Berikut adalah
penjelasan tentang JSX dan Hooks.

1. JSX (JavaScript XML)

JSX adalah ekstensi sintaks yang memungkinkan kita menulis elemen HTML dalam kode JavaScript.
Walaupun JSX terlihat seperti HTML, ia sebenarnya adalah kombinasi antara JavaScript dan XML,
sehingga harus dikompilasi menjadi JavaScript murni sebelum dieksekusi oleh browser. Dalam React,
JSX memudahkan pengembang untuk membuat komponen dan merender UI karena sintaksnya lebih
intuitif dan mirip dengan HTML.

Contoh penggunaan JSX:

function Greeting() {

const name = "Alice";

return <h1>Hello, {name}!</h1>;

}
Pada contoh di atas:

 <h1>Hello, {name}!</h1> adalah JSX, di mana {name} adalah ekspresi JavaScript yang dapat
dimasukkan langsung dalam elemen JSX.

 JSX juga mendukung logika JavaScript sederhana, seperti ternary operator untuk membuat
keputusan rendering.

Keuntungan menggunakan JSX:

 Mudah Dipahami: JSX membuat kode tampak lebih seperti HTML, sehingga mudah dipahami
oleh pengembang yang sudah terbiasa dengan HTML.

 Dukungan Ekspresi JavaScript: JSX mendukung ekspresi JavaScript, sehingga kita bisa
menggunakan logika di dalam elemen.

 Keamanan XSS: JSX dilengkapi dengan sanitasi otomatis, yang membantu melindungi aplikasi
dari serangan injeksi skrip (XSS).

2. Hooks
Hooks adalah fitur dalam React yang diperkenalkan pada versi 16.8. Hooks memungkinkan kita
menggunakan state dan lifecycle methods dalam komponen fungsional tanpa harus menggunakan
komponen kelas. Berikut adalah beberapa Hooks dasar yang umum digunakan dalam React:

 useState: Hook yang memungkinkan kita menambahkan state lokal dalam komponen
fungsional.

import React, { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);

return (

<div>

<p>Anda mengklik sebanyak {count} kali</p>

<button onClick={() => setCount(count + 1)}>Klik saya</button>

</div>

);

Pada contoh di atas:

useState menerima nilai awal (0 dalam contoh ini) dan mengembalikan sepasang nilai: count
(nilai state) dan setCount (fungsi untuk memperbarui state).
 Saat tombol diklik, setCount digunakan untuk memperbarui nilai count, dan React akan
merender ulang komponen.

 useEffect: Hook yang memungkinkan kita mengelola efek samping, seperti mengambil data
dari API, mengatur event listener, atau mengupdate judul halaman.

import React, { useState, useEffect } from 'react';

function Timer() {

const [seconds, setSeconds] = useState(0);

useEffect(() => {

const interval = setInterval(() => {

setSeconds(prev => prev + 1);

}, 1000);

// Cleanup function

return () => clearInterval(interval);

}, []);

return <p>Waktu berlalu: {seconds} detik</p>;

Pada contoh ini:

o useEffect akan dijalankan setiap kali komponen dirender pertama kali, di mana
interval setiap detik ditambahkan pada seconds.

o Efek tersebut memiliki cleanup function yang menghapus interval saat komponen
dihapus dari DOM.

 useContext: Hook yang memungkinkan kita mengakses data dari konteks global tanpa perlu
menggunakan props drilling.

 useReducer: Hook yang menyediakan cara untuk mengelola state yang kompleks, mirip
dengan Redux.

Keuntungan Menggunakan Hooks:

 Kode Lebih Ringkas: Hooks memungkinkan penggunaan state dan efek samping dalam
komponen fungsional yang lebih sederhana daripada komponen kelas.
  Reuse Logic: Hooks memungkinkan kita membuat custom hooks, yaitu fungsi yang dapat
menyimpan logika tertentu dan digunakan kembali di berbagai komponen.

 Memisahkan Logic dari Struktur: Hooks memungkinkan kita untuk memisahkan logika
pengelolaan state dari logika rendering.

Dengan JSX dan Hooks, pengembangan React menjadi lebih modern, modular, dan efisien. JSX
memberikan kemudahan untuk menyusun UI, sedangkan Hooks memungkinkan penggunaan state
dan lifecycle dalam komponen fungsional.