Top Qs
Timeline
Obrolan
Perspektif

React

Pustaka JavaScript untuk membangun antarmuka pengguna Dari Wikipedia, ensiklopedia bebas

Remove ads
Untuk sumber terbuka kerangka kerja aplikasi mobile, lihat React Native.

React (dikenal juga dengan React.js atau ReactJS) adalah libray JavaScript yang digunakan untuk membangun 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.[1] Saat ini React dikelola oleh Meta, komunitas, dan perusahaan individu.[2][3][4]

Fakta Singkat Tipe, Versi pertama ...
Remove ads

Sejarah dan riwayat

Ringkasan
Perspektif

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".[5][6] 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.[6]

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.[7]

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.[8] Meskipun dengan adanya perubahan tersebut, penulisan sintaks (syntax code) tidak mengalami perubahan.[9] 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.[8]

Remove ads

Sintaks

Berikut ini adalah contoh dasar penggunaan React untuk web, yang ditulis dalam JSX dan 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 :

<!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 :

<div class="hello-world">
  <h1>Hello, world!</h1>
</div>
Remove ads

Fitur penting

Ringkasan
Perspektif

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.[10]

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.[11]

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 Examplekomponen ke komponen Tool. Selain itu, bagian kodereturn 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.[12] 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.[13] 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.[14]

Remove ads

Versi React

Ringkasan
Perspektif
Informasi lebih lanjut Versi, Tangal rilis ...
Remove ads

Lihat pula

Daftar pustaka

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads
Remove ads