ENSIKLOPEDIA

Kembali ke Ensiklopedia Arsip Wikipedia Indonesia

React

React

Penulis asli	Jordan Walke
Pengembang	Meta dan komunitas
Rilis awal	29 Mei 2013 (2013-05-29)
Templat:Kotak info perangkat lunak/simple
Ditulis dalam	JavaScript
Platform	Web platform
Jenis	JavaScript library
Lisensi	MIT License
Situs web	https://reactjs.org/
Repositori	https://github.com/facebook/react

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]

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

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>

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

Versi React

Versi
Versi	Tangal rilis	Perubahan
0.3.0	29 Mei 2013	Initial Public Release
0.4.0	20 Juli 2013	Dukungan untuk komentar node `<div>(/* /}</div>`; peningkatan servcer-side rendering* APIs; penghapusan React.autoBind; dukungan fitur key prop, perbaikan formulir; dan perbaikan bug
0.5.0	20 Oktober 2013	Peningkatan memory usage; dukungan fitur untuk selection and composition event; dukungan untuk getInitialState dan getDefaultProps pada fitur mixins; menambahkan React.version dan React.isValidClass; dan peningkatan kompatibilitas untuk Windows
0.8.0	20 Desember 2013	Menambahkan dukungan untuk rows & cols, defer & async, loop for `<audio>` & `<video>`, autoCorrect attributes; penambahan onContextMenu events; jstransform dan esprima-fb tools yang ditingkatkan; dan peningkatan browserify.
0.9.0	20 Februari 2014	Menambahkan dukungan untuk crossOrigin, download dan hrefLang, mediaGroup dan muted, sandbox, seamless, dan srcDoc, scope attributes; penambahan arrayOf, component, oneOfType, renderable, shape ke React.PropTypes; penambahan dukungan untuk onMouseOver dan onMouseOut event; penambahan dukungan untuk onLoad dan onError pada`<img>` element.
0.10.0	21 Maret 2014	Penambahan dukungan untuk srcSet dan textAnchor attributes; penambahan update function untuk immutable data; memastikan semua void elements tidak menyisipkan tag penutup.
0.11.0	17 Juli 2014	Peningkatan SVG support, normalized e.view event, pembaruan $apply command; penambahan dukungan untuk namespaces; penambahan transformWithDetails API, termasuk pre-built packages di bawah dist/, MyComponent() sekarang mengembalikan (returns) descriptor, bukan sebuah instance.
0.12.0	21 November 2014	Penambahan fitur baru Spread operator ({...}); pengenalan untuk deprecate this.transferPropsTo; penambahan dukungan untuk acceptCharset, classID, manifest HTML attributes, React.addons.batchedUpdates ditambahkan ke API, @jsx React.DOM tidak lagi tersedia; perbaikan masalah dengan CSS Transitions.
0.13.0	10 Maret 2015	Deprecated patterns yang memberikan peringatan di pada versi 0.12 tidak lagi tersedia, ref resolution order telah mengalami perubahan; Penghapusan properties this._pendingState dan this._rootNodeID; dukungan ES6 classes; penambahan API React.findDOMNode (component); dukungan for iterators dan immutable-js sequences; penambahan fitur baru React.addons.createFragment; React.addons.classSet yang sudah tidak digunakan.
0.14.1	29 Oktober 2015	Penambahan dukungan untuk srcLang, default, kind attributes, dan color attribute; memastikan legacy .props access pada DOM nodes; perbaikan scryRenderedDOMComponentsWithClass; penambahan react-dom.js.
15.0.0	7 April 2016	Initial render sekarang menggunakan document.createElement alih-alih menerapkan generating HTML; tidak terdapat `<span>`; peningkatan SVG support, `ReactPerf.getLastMeasurements()` yang bersifat opaque; pengenalan deprecations baru dengan peringata; perbaikan masalah pada multiple small memory , React DOM sekarang mendukung cite dan profile HTML attributes serta cssFloat, gridRow & gridColumn CSS properties.
15.1.0	20 Mei 2016	Perbaikan batching bug; memastikan menggunakan object-assign versi terbaru; perbaikan regression, menghapus penggunaan utilitas gabungan (merge utility); mengubah nama beberapa modules.
15.2.0	1 Juli 2016	Menyertakan informasi component stack; menghentikan validating props pada waktu pemasangan; menambah React.PropTypes.symbol; menambahkan onLoad handling ke `<link>` dan onError handling ke `<source>` element; menambahkan `isRunning()` API; perbaikan kinerja regression.
15.3.0	30 Juli 2016	Menambahkan React.PureComponent; perbaikan masalah nested server rendering; menambahkan xmlns, xmlnsXlink untuk support SVG attributes dan referrerPolicy untuk HTML attributes; memperbarui React Perf Add-on, memperbaiki masalah ref.
15.3.1	19 Agustus 2016	Peningkatan kinerja development builds; membersihkan internal hooks; memperbarui fbjs; peningkatan waktu startup React; perbaikan masalah kebocoran memori (memory leak) ketika server rendering; perbaikan React Test Renderer, mengubah trackedTouchCount invariant menjadi console.error.
15.4.0	16 November 2016	React package dan browser build tidak lagi menyertakan React DOM; peningkatan performa pengembangan (development); perbaikan occasional test failures; pembaruan batchedUpdates API, React Perf, dan`ReactTestRenderer.create()`.
15.4.1	23 November 2016	Restrukturisasi variable assignmentl; perbaikan event handling; kompatibilitas build browser dengan lingkungan AMD yang telah diperbaiki
15.4.2	6 Januari 2017	Perbaikan masalah build; menambahkan dependensi paket yang hilang; perbaikan pesan error.
15.5.0	7 April 2017	Penambahan fitur react-dom/test-utils; menghapus peerDependencies; perbaikan masalah dengan closure compiler; penambahan peringatan penghentian untuk React.createClass dan React.PropTypes; perbaikan bug Chrome.
15.5.4	11 April 2017	Perbaikan kompatibilitas dengan Enzyme dengan mengekspos batchedUpdates pada shallow renderer; pembaruan versi prop-types, perbaikan react-addons-create-fragment package untuk menyertakan loose-envify transform.
15.6.0	13 Juni 2017	Penambahan dukungan untuk variabel CSS pada style attribute dan Grid style properties; perbaikan dukungan AMD untuk addons yang bergantung pada React; menghapus dependency yang tidak diperlukan; penambahan deprecation warning untuk React.createClass dan React.DOM.
16.0.0	26 September 2017	Peningkatan error handling yang lebih baik dengan pengenalan konsep "error boundaries"; React DOM memungkinkan passing non-standard attributes; perubahan kecil pada setState behavior; menghapus react-with-addons.js build, menambahkan React.createClass sebagai create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories; perubahan metode penjadwalan dan siklus hidup.
16.1.0	9 November 2017	Menghentikan rilis Bower; memperbaiki variabel global tambahan yang tidak disengaja pada UMD build; memperbaiki onMouseEnter dan onMouseLeave; memperbaiki placeholder <textarea>; menghapus kode yang tidak digunakan; menambahkan dependensi package.json yang hilang; menambahkan dukungan untuk React DevTools.
16.3.0	29 Maret 2018	Menambahkan dukungan context API yang didukung secara resmi; penambahan packagePrevent baru packagePrevent saat mencoba melakukan render portals dengan SSR; perbaikan masalah pada this.state; perbaikan masalah pada IE/Edge.
16.3.1	3 April 2018	Prefix private API; perbaikan bug performance regression dan error handling pada mode development; penambahan peer dependency; perbaikan positive warning pada IE 11 ketika menggunakan Fragment.
16.3.2	16 April 2018	Perbaikan IE crash; perbaikan lebel pada User Timing measurements; penambahan UMB build; peningkatan kinerja unstable_observedBits API dengan nesting
16.4.0	24 Mei 2018	Penambahan dukungan untuk Pointer Events specification; penambahan kemampuan untuk specify propTypes; perbaikan reading context; perbaikan dukungan `getDerivedStateFromProps()`; perbaikan testInstance.parent crash; penambahan komponen React.unstable_Profiler untuk pengukuran kinerja; mengubah nama internal event
16.5.0	5 September 2018	Penambahan dukungan untuk React DevTools Profiler; penanganan kesalahan di lebih banyak kasus edge dengan baik; menambahkan react-dom/profiling; menambahkan event onAuxClick untuk browser; menambahkan movementX dan movementY fields ke mouse events; menambahkan tangentialPressure dan twist fields ke event pointer.
16.6.0	23 Oktober 2018	Menambahkan dukungan untuk contextType; dukungan priority levels, continuations, dan wrapped callbacks; peningkatan gray overlay di Safari iOS; menambahkan React.lazy() untuk komponen pemecahan kode.
16.7.0	20 Desember 2018	Perbaikan kinerja dari React.lazy untuk lazily-loaded components; menghapus fields pada unmount untuk menghindari kebocoran memori; perbaikan bug dengan SSR; perbaikan performance regression.
16.8.0	6 Februari 2019	Penambahan Hooks; penambahan ReactTestRenderer.act() dan ReactTestUtils.act() untuk batching update; dukungan synchronous thenables passed ke React.lazy(); peningkatan useReducer Hook lazy initialization API.
16.8.6	27 Maret 2019	Perbaikan bailout yang salah di useReducer(); perbaikan iframe warning di Safari DevTools; peringatan jika contextType disetel ke Context.Consumer instead of Context, peringatan jika contextType disetel ke nilai (value) yang tidak valid.
16.9.0	9 Agustus 2019	Penambahan React.Profiler API untuk mengumpulkan pengukuran kinerja secara terprogram; menghapus stable_ConcurrentMode demi stable_createRoot.
16.10.0	27 September 2019	Perbaikan masalah edge case di mana pembaruan hook tidak bisa melakukan memoized; perbaikan heuristic untuk menentukan waktu hydrate, agar tidak melakukan kesalahan selama pembaruan. Penghapusan additional fiber fields selama kondisi unmount untuk menghemat memori; perbaikan bug pada required text fields di Firefox; cenderung pada Object.is dibanding polyfill inline, apabila tersedia; perbaikan bug ketika mixing suspense dan error handling.
16.10.1	28 September 2019	Perbaikan regression pada aplikasi Next.js dengan mengizinkan suspense mismatch selama hidrasi
16.10.2	3 Oktober 2019	Perbaikan regression pada react-native-web dengan memulihkan urutan argumen di event plugin extractors
16.11.0	22 Oktober 2019	Perbaikan mouseenter handlers; menghapus unstable_createRoot dan unstable_createSyncRoot experimental API (tersedia di Experimental channel sebagai createRoot dan createSyncRoot.)
16.12.0	14 November 2019	React DOM - Perbaikan passive effects (`useEffect`) yang tidak diaktifkan pada aplikasi multi-root. React Is - Perbaikan `lazy` dan`memo`yang dianggap sebagai instead of components
16.13.0	26 Februari 2020	Penambahan fitur pada React Concurrent mode. Perbaikan regresi (regressions) pada React core library dan React Dom.
16.13.1	19 Maret 2020	Perbaikan bug pada legacy mode Suspense. Mengembalikan fitur warning untuk pembaruan cross-component yang berlangsung pada class render lifecycles
16.14.0	14 Oktober 2020	Penambahan dukungan untuk fitur baru JSX transform.
17.0.0	20 Oktober 2020	"No New Features" - memungkinkan pembaruan React secara bertahap dari versi lama. Penambahan baru pada JSX Transform, perubahan pada Event Delegation
17.0.1	22 Oktober 2020	React DOM - perbaikan masalah pada IE11
17.0.2	22 Maret 2021	React DOM - penghapusan dependensi yang tidak digunakan untuk mengatasi`SharedArrayBuffer`cross-origin isolation warning.
18.0.0	29 Maret 2022	Concurrent React; automatic batching; fitur baru Suspense; transitions; Client and Server Rendering APIs; fitur baru Strict Mode Behaviors; fitur baru Hooks ^[15]
18.1.0	26 April 2022	Banyak perbaikan dan peningkatan kinerja
18.2.0	14 Juni 2022	Banyak perbaikan dan peningkatan kinerja

Lihat pula

Daftar pustaka

↑ "React – A JavaScript library for building user interfaces". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-12-04.
↑ Krill, Paul (2014-05-15). "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld (dalam bahasa Inggris). Diakses tanggal 2022-12-04.
↑ "Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews". InfoQ (dalam bahasa Inggris). Diakses tanggal 2022-12-04.
↑ Dawson, Chris (2014-07-25). "JavaScript's History and How it Led To ReactJS". The New Stack (dalam bahasa American English). Diakses tanggal 2022-12-04.
↑ Disclaimer:, 2022-12-02, diakses tanggal 2022-12-04
1 2 Hámori, Ferenc (2018-04-04). "The History of React.js on a Timeline". RisingStack Engineering (dalam bahasa American English). Diakses tanggal 2022-12-04.
↑ "Introducing React Native – React Blog". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-12-04.
1 2 React Fiber Architecture, 2022-11-30, diakses tanggal 2022-11-30
↑ Lardinois, Frederic (2017-04-18). "Facebook announces React Fiber, a rewrite of its React framework". TechCrunch (dalam bahasa American English). Diakses tanggal 2022-12-04.
↑ "React - The Complete Guide (incl. Hooks, React Router and Redux) [Video]". www.oreilly.com (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
↑ "Components and Props – React". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-12-04.
↑ "Hooks at a Glance – React". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-12-05.
↑ "JSX". facebook.github.io. Diakses tanggal 2022-12-05.
↑ "XHP: A New Way to Write PHP". www.facebook.com. Diakses tanggal 2022-12-05.
↑ "React v18.0". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-04-12.