📑 Table of Contents▼
Untuk sumber terbuka kerangka kerja aplikasi mobile, lihat React Native.
React
Penulis asliJordan Walke
PengembangMeta dan komunitas
Rilis awal29 Mei 2013 (2013-05-29)
Templat:Kotak info perangkat lunak/simple
Ditulis dalamJavaScript
PlatformWeb platform
JenisJavaScript library
LisensiMIT License
Situs webhttps://reactjs.org/
Repositorihttps://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

sunting

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

sunting

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

sunting

Deklaratif

sunting

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)

sunting

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

sunting

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

sunting

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

sunting
Versi
VersiTangal rilisPerubahan
0.3.029 Mei 2013Initial Public Release
0.4.020 Juli 2013Dukungan untuk komentar node <div>(/* */}</div>; peningkatan servcer-side rendering APIs; penghapusan React.autoBind; dukungan fitur key prop, perbaikan formulir; dan perbaikan bug
0.5.020 Oktober 2013Peningkatan 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.020 Desember 2013Menambahkan 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.020 Februari 2014Menambahkan 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.021 Maret 2014Penambahan dukungan untuk srcSet dan textAnchor attributes; penambahan update function untuk immutable data; memastikan semua void elements tidak menyisipkan tag penutup.
0.11.017 Juli 2014Peningkatan 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.021 November 2014Penambahan 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.010 Maret 2015Deprecated 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.129 Oktober 2015Penambahan dukungan untuk srcLang, default, kind attributes, dan color attribute; memastikan legacy .props access pada DOM nodes; perbaikan scryRenderedDOMComponentsWithClass; penambahan react-dom.js.
15.0.07 April 2016Initial 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.020 Mei 2016Perbaikan batching bug; memastikan menggunakan object-assign versi terbaru; perbaikan regression, menghapus penggunaan utilitas gabungan (merge utility); mengubah nama beberapa modules.
15.2.01 Juli 2016Menyertakan 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.030 Juli 2016Menambahkan 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.119 Agustus 2016Peningkatan 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.016 November 2016React package dan browser build tidak lagi menyertakan React DOM; peningkatan performa pengembangan (development); perbaikan occasional test failures; pembaruan batchedUpdates API, React Perf, danReactTestRenderer.create().
15.4.123 November 2016Restrukturisasi variable assignmentl; perbaikan event handling; kompatibilitas build browser dengan lingkungan AMD yang telah diperbaiki
15.4.26 Januari 2017Perbaikan masalah build; menambahkan dependensi paket yang hilang; perbaikan pesan error.
15.5.07 April 2017Penambahan 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.411 April 2017Perbaikan 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.013 Juni 2017Penambahan 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.026 September 2017Peningkatan 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.09 November 2017Menghentikan 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.029 Maret 2018Menambahkan 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.13 April 2018Prefix 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.216 April 2018Perbaikan IE crash; perbaikan lebel pada User Timing measurements; penambahan UMB build; peningkatan kinerja unstable_observedBits API dengan nesting
16.4.024 Mei 2018Penambahan 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.05 September 2018Penambahan 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.023 Oktober 2018Menambahkan 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.020 Desember 2018Perbaikan 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.06 Februari 2019Penambahan 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.627 Maret 2019Perbaikan 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.09 Agustus 2019Penambahan React.Profiler API untuk mengumpulkan pengukuran kinerja secara terprogram; menghapus stable_ConcurrentMode demi stable_createRoot.
16.10.027 September 2019Perbaikan 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.128 September 2019Perbaikan regression pada aplikasi Next.js dengan mengizinkan suspense mismatch selama hidrasi
16.10.23 Oktober 2019Perbaikan regression pada react-native-web dengan memulihkan urutan argumen di event plugin extractors
16.11.022 Oktober 2019Perbaikan mouseenter handlers; menghapus unstable_createRoot dan unstable_createSyncRoot experimental API (tersedia di Experimental channel sebagai createRoot dan createSyncRoot.)
16.12.014 November 2019React DOM - Perbaikan passive effects (useEffect) yang tidak diaktifkan pada aplikasi multi-root.

React Is - Perbaikan lazy danmemoyang dianggap sebagai instead of components

16.13.026 Februari 2020Penambahan fitur pada React Concurrent mode.

Perbaikan regresi (regressions) pada React core library dan React Dom.

16.13.119 Maret 2020Perbaikan bug pada legacy mode Suspense.

Mengembalikan fitur warning untuk pembaruan cross-component yang berlangsung pada class render lifecycles

16.14.014 Oktober 2020Penambahan dukungan untuk fitur baru JSX transform.
17.0.020 Oktober 2020"No New Features" - memungkinkan pembaruan React secara bertahap dari versi lama.

Penambahan baru pada JSX Transform, perubahan pada Event Delegation

17.0.122 Oktober 2020React DOM - perbaikan masalah pada IE11
17.0.222 Maret 2021React DOM - penghapusan dependensi yang tidak digunakan untuk mengatasiSharedArrayBuffercross-origin isolation warning.
18.0.029 Maret 2022Concurrent React; automatic batching; fitur baru Suspense; transitions; Client and Server Rendering APIs; fitur baru Strict Mode Behaviors; fitur baru Hooks [15]
18.1.026 April 2022Banyak perbaikan dan peningkatan kinerja
18.2.014 Juni 2022Banyak perbaikan dan peningkatan kinerja

Lihat pula

sunting

Daftar pustaka

sunting
  1. ^ "React – A JavaScript library for building user interfaces". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-12-04.
  2. ^ Krill, Paul (2014-05-15). "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld (dalam bahasa Inggris). Diakses tanggal 2022-12-04.
  3. ^ "Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews". InfoQ (dalam bahasa Inggris). Diakses tanggal 2022-12-04.
  4. ^ 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.
  5. ^ Disclaimer:, 2022-12-02, diakses tanggal 2022-12-04
  6. ^ a b 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.
  7. ^ "Introducing React Native – React Blog". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-12-04.
  8. ^ a b React Fiber Architecture, 2022-11-30, diakses tanggal 2022-11-30
  9. ^ 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.
  10. ^ "React - The Complete Guide (incl. Hooks, React Router and Redux) [Video]". www.oreilly.com (dalam bahasa Inggris). Diakses tanggal 2022-11-30.
  11. ^ "Components and Props – React". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-12-04.
  12. ^ "Hooks at a Glance – React". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-12-05.
  13. ^ "JSX". facebook.github.io. Diakses tanggal 2022-12-05.
  14. ^ "XHP: A New Way to Write PHP". www.facebook.com. Diakses tanggal 2022-12-05.
  15. ^ "React v18.0". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-04-12.

📚 Artikel Terkait di Wikipedia

Prefiks

konsentrat kontra-, contoh: kontradiksi kuasi-, contoh: kuasilegislatif meta-, contoh: metamorfosis mono-, contoh: monodrama pan-, contoh: panasea pant-

Transformator (pembelajaran mendalam)

attention", dan "prefixLM" seperti dalam "prefix language modeling" bukanlah "prefixLM" seperti dalam "prefix language model". Semua transformer memiliki