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]
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 digunakna 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, micalnya 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]
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
>
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]
Kode React dibangun atau terbuat dari entitas yang disebut komponen (
component
). Komponen-komponen tersebut dapat digunakan kembali (reusable) dan harus dibentuuk 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
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
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 (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
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
|
- ^
"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 Inggris)
. Diakses tanggal
2022-12-04
.
- ^
Disclaimer:
, 2022-12-02
, diakses tanggal
2022-12-04
- ^
a
b
Hamori, Ferenc (2018-04-04).
"The History of React.js on a Timeline"
.
RisingStack Engineering
(dalam bahasa Inggris)
. Diakses tanggal
2022-12-04
.
- ^
"Introducing React Native ? React Blog"
.
reactjs.org
(dalam bahasa Inggris)
. Diakses tanggal
2022-12-04
.
- ^
a
b
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 Inggris)
. 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
.