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. Saat ini React dikelola oleh Meta, komunitas, dan perusahaan individu.
| React.js | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Tipe | kerangka web, Pustaka perangkat lunak dan JavaScript library | ||||||||||
| Versi pertama | 29 Mei 2013 | ||||||||||
| Versi stabil | 18.3.1 (26 April 2024) | ||||||||||
| Genre | JavaScript library | ||||||||||
| Lisensi | MIT License | ||||||||||
| |||||||||||
| |||||||||||
Sumber kode | |||||||||||
| |||||||||||
Sunting di Wikidata • Sunting kotak info • L • B |
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". 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.
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, 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.
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.
Komponen (component) sunting
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.
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. 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. 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 sunting
| 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, danReactTestRenderer.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 |
| 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 mengatasiSharedArrayBuffercross-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 |
| 18.1.0 | 26 April 2022 | Banyak perbaikan dan peningkatan kinerja |
| 18.2.0 | 14 Juni 2022 | Banyak perbaikan dan peningkatan kinerja |
Lihat pula sunting
Daftar pustaka sunting
- "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
- ^ Hámori, 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.
- ^ 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.