React

**React** (dikenal juga dengan **React.js** atau **ReactJS**) adalah libray JavaScript yang digunakan untuk membangun *[[Antarmuka pengguna|user interface]]* yang interaktif berbasis *component*. React yang dibuat oleh Facebook (sekarang Meta) dan bersifat *open source* (sumber terbuka), sehingga dapat digunakan oleh siapa saja secara gratis. Saat ini React dikelola oleh Meta, komunitas, dan perusahaan individu.

## Sejarah dan riwayat
React dibuat oleh Jordan Walke, seorang insinyur perangkat lunak yang bekerja di Facebook. Jordan Walke merilis prototipe awal React yang kemudian diberi nama dengan "*FaxJS*". React dibuat oleh Jordan Walke yang dipengaruhi oleh XHP, sebuah *library component* HTML untuk bahasa pemrograman PHP. XHP pertama kali digunakan pada fitur News Feed Facebook pada tahun 2011 dan kemudian digunakan pada Instagram pada tahun 2012.

Terdapat kerangka kerja (*framework*) React native yang memungkinkan pengembang (*developer*) membuat aplikasi Android, IOS, dan Universal Windows Platform (UWP) dengan menggunakan React. Kerangka kerja tersebut diperkenalkan oleh Facebook di acara React Conf pada Februari 2015 dan bersifat *open source* (sumber terbuka) pada Maret 2015.

Pada tanggal 18 April 2017 Facebook mengumumkan React Fiber yang merupakan sebuah algoritma baru untuk *rendering.* React Fiber menjadi dasar dari setiap perubahan, termasuk peningkatan dan pengembangan fitur pada *library* React di masa mendatang. Meskipun dengan adanya perubahan tersebut, penulisan sintaks (*syntax code*) tidak mengalami perubahan. Hana saya, cara sintaks tersebut dijalankan yang berubah. Algoritma atau sistem *rendering* lama React yaitu Stack, dikembangkan pada saat fokus sistem pada perubahan dinamis yang tidak dipahami. Stack dinilai lambat dalam menggambar suatu animasi yang rumit, misalnya yaitu pada kondisi untuk menyelesaikan semuanya dalam satu bagian. Sementara React Fiber dapat membagi atau memecah animasi menjadi berdasarkan segmen yang dapat tersebar di beberapa *frame.* Demikian pula, struktur halaman dapat dipecah menjadi segmen-segmen yang dapat dipertahankan dan diperbarui secara terpisah. Fungsi JavaScript dan objek virtual DOM tersebut disebut *fibers* dan masing-masingnya dapat dioperasikan dan diperbarui secara terpisah, yang memungkinkan proses *rendering* menjadi lebih lancar.

## Sintaks
Berikut ini adalah contoh dasar penggunaan React untuk *web*, yang ditulis dalam JSX dan JavaScript :
```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';

const Greeting = () => {
    return (
        <div className="hello-world">
            <h1>Hello, world!</h1>
        </div>
    );
};

const App = () => {
    return <Greeting />;
};

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);
```
Berdasarkan dokumen HTML di bawah ini :
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>
```
Fungsi (*function*)`Greeting` adalah komponent (*component*) React yang menampilkan "Hello, World". Ketika ditampilkan pada *web browser,* maka hasilnya adalah *rendering* dari :
```html
<div class="hello-world">
  <h1>Hello, world!</h1>
</div>
```


## Fitur penting

### Deklaratif
React menganut paradigma pemrograman deklaratif, yang mana pengembang (*developer*) mendesain tampilan untuk setiap status (*state*) aplikasi. Kemudian React akan memperbarui dan me-*render* komponen saat data berubah.

### Komponen (''component'')
Kode React dibangun atau terbuat dari entitas yang disebut komponen (*component*). Komponen-komponen tersebut dapat digunakan kembali (*reusable*) dan harus dibentuk dalam folder *src* yang ditulis dengan aturan Pascal Case sebagai konvensi penamaannya. Komponen dapat di-*render* ke elemen tertentu di DOM dengan menggunakan *library* React DOM. Ketika proses *rendering* pengembang (*developer*) dapat meneruskan (*pass*) nilai (*values*) yang ada di antara komponent, yang disebut dengan *props.*
```
import React from "react";
import Tool from "./Tool";
const Example = () => {
  return (
    <>
      <div className="app">
        <Tool name="Gulshan" />
      </div>
    </>
  );
};

export default Example;
```
Pada contoh di atas, properti `name` dengan nilai (valu) "Gulshan" telah diteruskan dari komponent dari `Example`komponen ke komponen `Tool`. Selain itu, bagian kode`return` dibungkus dengan *tag* karena ada batasan dalam `return`  fungsinya, yaitu hanya dapat mengembalikan satu nilai. Jadi semua elemen dan komponen JSX terikat menjadi satu tag.

Dua cara utama untuk mendeklarasikan komponen dalam React adalah dengan *function components* dan *class-based components.*

### ''Functional Component''
*Functional component* dideklarasikan dengan fungsi yang mengembalikan (*return*) beberapa kode JSX. Pada React versi 16.8 ke atas, *functional component* dapat menggunakan *state* dengan menerapkan *Hooks*. Contohnya adalah sebagai berikut :
```
const Greeter = () => <div>Hello World</div>;
```


### JSX
JSX (*JavaScript Syntax Extension*) atau juga dikenal dengan Javascript XML. JSX merupakan *extension* React untuk sintaks bahasa pemrograman JavaScript yang menyediakan cara untuk menyusun elemen pada komponen react. Sintaks JSX mirip seperti HTML, sehingga mudah digunakan oleh para pengembang (*developer*).

Komponen (*component*) React biasanya ditulis dengan menggunakan JSX, meskipun hal tersebut tidak harus dilakukan karena komponen juga dapat ditulis dalam JavaScript murni. JSX sama halnya dengan *extension* lain yang dibuah oleh Facebook untuk bahasa pemrograman PHP, yaitu XHP.

## Versi React

## Lihat pula

* Next.js
* React Router
* Vue.js
* JavaScript

## Daftar pustaka