Wikipedia

React.js

Pustaka JavaScript untuk membangun antarmuka pengguna
Revisi sejak 4 Desember 2022 14.58 oleh Syariful Msth (bicara | kontrib) (→‎Sejarah dan riwayat)
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.js
Tipekerangka web, Pustaka perangkat lunak dan JavaScript library
Versi pertama29 Mei 2013 (2013-05-29)
Versi stabil
18.2.0 (14 Juni 2022)
GenreJavaScript library
LisensiMIT License
Karakteristik teknis
Sistem operasiLintas platform
Bahasa pemrogramanJavascript
Informasi pengembang
PembuatJordan Walke
PengembangMeta dan komunitas
Sumber kode
Kode sumberPranala
Ubuntunode-react
Informasi tambahan
Situs webhttps://reactjs.org/
BlogBlog oficial
Stack ExchangeEtiqueta
Subredditreactjs
Panduan penggunaLaman panduan
Twitter: reactjs
Sunting di Wikidata Sunting di Wikidata • Sunting kotak info • L • B
Info templat
Bantuan penggunaan templat ini

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

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. Pengembang mendesain tampilan untuk setiap status aplikasi, dan React memperbarui dan merender komponen saat data berubah. Hal ini berbeda dengan pemrograman imperatif.[10]

Komponen

Kode React terbuat dari entitas yang disebut komponen. Komponen-komponen ini dapat digunakan kembali dan harus dibentuk dalam folder SRC mengikuti Pascal Case sebagai konvensi penamaannya (kapitalisasi camelCase). Komponen dapat dirender ke elemen tertentu di DOM menggunakan pustaka React DOM.

DOM Virtual

Fitur penting lainnya adalah penggunaan Model Objek Dokumen virtual, atau DOM virtual. React membuat cache struktur data dalam memori, menghitung perbedaan yang dihasilkan, dan kemudian memperbarui DOM yang ditampilkan browser secara efisien.[11]  Proses ini disebut rekonsiliasi. Hal ini memungkinkan pemrogram untuk menulis kode seolah-olah seluruh halaman dirender pada setiap perubahan, sedangkan pustaka React hanya merender subkomponen yang benar-benar berubah. Rendering selektif ini memberikan peningkatan kinerja yang besar.  Ini menghemat upaya menghitung ulang gaya CSS, tata letak halaman dan rendering untuk seluruh halaman.[12]

Arsitektur di luar HTML

Arsitektur dasar React berlaku di luar rendering HTML di browser. Misalnya, Facebook memiliki bagan dinamis yang dirender ke <canvas> tag,[13] dan Netflix serta PayPal menggunakan pemuatan universal untuk merender HTML identik di server dan klien.[14]

Sejarah

React dibuat oleh Jordan Walke, seorang insinyur perangkat lunak di Facebook, yang merilis prototipe awal React yang disebut "FaxJS".[15] Ia dipengaruhi oleh XHP, sebuah pustaka komponen HTML untuk PHP. Ini pertama kali digunakan di News Feed Facebook pada tahun 2011 dan kemudian di Instagram pada tahun 2012.  Itu bersumber terbuka di JSConf AS pada Mei 2013.

React Native , yang memungkinkan pengembangan Android, iOS, dan UWP asli dengan React, diumumkan di React Conf Facebook pada Februari 2015 dan open-source pada Maret 2015.

Pada tanggal 18 April 2017, Facebook mengumumkan React Fiber, satu set algoritma internal baru untuk rendering, berlawanan dengan algoritma rendering lama React, Stack.  React Fiber akan menjadi dasar dari setiap peningkatan dan pengembangan fitur perpustakaan React di masa mendatang.  [ perlu pembaruan ] Sintaks sebenarnya untuk pemrograman dengan React tidak berubah; hanya cara sintaks dijalankan yang telah berubah. Sistem rendering lama React, Stack, dikembangkan pada saat fokus sistem pada perubahan dinamis tidak dipahami. Stack lambat untuk menggambar animasi yang rumit, misalnya, mencoba menyelesaikan semuanya dalam satu bagian. Fiber memecah animasi menjadi segmen-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 DOM virtual disebut "serat", dan masing-masing dapat dioperasikan dan diperbarui secara terpisah, memungkinkan perenderan di layar yang lebih mulus.[8]

Pada 26 September 2017, React 16.0 dirilis ke publik.

Pada 10 Agustus 2020, tim React mengumumkan kandidat rilis pertama untuk React v17.0, terkenal sebagai rilis besar pertama tanpa perubahan besar pada API yang dihadapi pengembang React.

Pada 29 Maret 2022, React 18 dirilis yang memperkenalkan penyaji bersamaan baru, batching otomatis, dan dukungan untuk rendering sisi server dengan Suspense.

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 Improve Memory usage, Support for Selection and Composition events, Support for getInitialState and getDefaultProps in mixins, Added React.version and React.isValidClass, Improved compatibility for Windows.
0.8.0 20 Desember 2013 Added support for rows & cols, defer & async, loop for <audio> & <video>, autoCorrect attributes. Added onContextMenu events, Upgraded jstransform and esprima-fb tools, Upgraded browserify.
0.9.0 20 Februari 2014 Added support for crossOrigin, download and hrefLang, mediaGroup and muted, sandbox, seamless, and srcDoc, scope attributes, Added any, arrayOf, component, oneOfType, renderable, shape to React.PropTypes, Added support for onMouseOver and onMouseOut event, Added support for onLoad and onError on <img> elements.
0.10.0 21 Maret 2014 Added support for srcSet and textAnchor attributes, add update function for immutable data, Ensure all void elements don't insert a closing tag.
0.11.0 17 Juli 2014 Improved SVG support, Normalized e.view event, Update $apply command, Added support for namespaces, Added new transformWithDetails API, includes pre-built packages under dist/, MyComponent() now returns a descriptor, not an instance.
0.12.0 21 November 2014 Added new features Spread operator ({...}) introduced to deprecate this.transferPropsTo, Added support for acceptCharset, classID, manifest HTML attributes, React.addons.batchedUpdates added to API, @jsx React.DOM no longer required, Fixed issues with CSS Transitions.
0.13.0 10 Maret 2015 Deprecated patterns that warned in 0.12 no longer work, ref resolution order has changed, Removed properties this._pendingState and this._rootNodeID, Support ES6 classes, Added API React.findDOMNode(component), Support for iterators and immutable-js sequences, Added new features React.addons.createFragment, deprecated React.addons.classSet.
0.14.1 29 Oktober 2015 Added support for srcLang, default, kind attributes, and color attribute, Ensured legacy .props access on DOM nodes, Fixed scryRenderedDOMComponentsWithClass, Added react-dom.js.
15.0.0 7 April 2016 Initial render now uses document.createElement instead of generating HTML, No more extra <span>s, Improved SVG support, ReactPerf.getLastMeasurements() is opaque, New deprecations introduced with a warning, Fixed multiple small memory leaks, React DOM now supports the cite and profile HTML attributes and cssFloat, gridRow and gridColumn CSS properties.
15.1.0 20 Mei 2016 Fix a batching bug, Ensure use of the latest object-assign, Fix regression, Remove use of merge utility, Renamed some modules.
15.2.0 1 Juli 2016 Include component stack information, Stop validating props at mount time, Add React.PropTypes.symbol, Add onLoad handling to <link> and onError handling to <source> element, Add isRunning() API, Fix performance regression.
15.3.0 30 Juli 2016 Add React.PureComponent, Fix issue with nested server rendering, Add xmlns, xmlnsXlink to support SVG attributes and referrerPolicy to HTML attributes, updates React Perf Add-on, Fixed issue with ref.
15.3.1 19 Agustus 2016 Improve performance of development builds, Cleanup internal hooks, Upgrade fbjs, Improve startup time of React, Fix memory leak in server rendering, fix React Test Renderer, Change trackedTouchCount invariant into a console.error.
15.4.0 16 November 2016 React package and browser build no longer includes React DOM, Improved development performance, Fixed occasional test failures, update batchedUpdates API, React Perf, and ReactTestRenderer.create().
15.4.1 23 November 2016 Restructure variable assignment, Fixed event handling, Fixed compatibility of browser build with AMD environments.
15.4.2 6 Januari 2017 Fixed build issues, Added missing package dependencies, Improved error messages.
15.5.0 7 April 2017 Added react-dom/test-utils, Removed peerDependencies, Fixed issue with Closure Compiler, Added a deprecation warning for React.createClass and React.PropTypes, Fixed Chrome bug.
15.5.4 11 April 2017 Fix compatibility with Enzyme by exposing batchedUpdates on shallow renderer, Update version of prop-types, Fix react-addons-create-fragment package to include loose-envify transform.
15.6.0 13 Juni 2017 Add support for CSS variables in style attribute and Grid style properties, Fix AMD support for addons depending on react, Remove unnecessary dependency, Add a deprecation warning for React.createClass and React.DOM factory helpers.
16.0.0 26 September 2017 Improved error handling with introduction of "error boundaries", React DOM allows passing non-standard attributes, Minor changes to setState behavior, remove react-with-addons.js build, Add React.createClass as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, changes to the behavior of scheduling and lifecycle methods.
16.1.0 9 November 2017 Discontinuing Bower Releases, Fix an accidental extra global variable in the UMD builds, Fix onMouseEnter and onMouseLeave firing, Fix <textarea> placeholder, Remove unused code, Add a missing package.json dependency, Add support for React DevTools.
16.3.0 29 Maret 2018 Add a new officially supported context API, Add new packagePrevent an infinite loop when attempting to render portals with SSR, Fix an issue with this.state, Fix an IE/Edge issue.
16.3.1 3 April 2018 Prefix private API, Fix performance regression and error handling bugs in development mode, Add peer dependency, Fix a false positive warning in IE11 when using Fragment.
16.3.2 16 April 2018 Fix an IE crash, Fix labels in User Timing measurements, Add a UMD build, Improve performance of unstable_observedBits API with nesting.
16.4.0 24 Mei 2018 Add support for Pointer Events specification, Add the ability to specify propTypes, Fix reading context, Fix the getDerivedStateFromProps() support, Fix a testInstance.parent crash, Add React.unstable_Profiler component for measuring performance, Change internal event names.
16.5.0 5 September 2018 Add support for React DevTools Profiler, Handle errors in more edge cases gracefully, Add react-dom/profiling, Add onAuxClick event for browsers, Add movementX and movementY fields to mouse events, Add tangentialPressure and twist fields to pointer event.
16.6.0 23 Oktober 2018 Add support for contextType, Support priority levels, continuations, and wrapped callbacks, Improve the fallback mechanism, Fix gray overlay on iOS Safari, Add React.lazy() for code splitting components.
16.7.0 20 Desember 2018 Fix performance of React.lazy for lazily-loaded components, Clear fields on unmount to avoid memory leaks, Fix bug with SSR, Fix a performance regression.
16.8.0 6 Februari 2019 Add Hooks, Add ReactTestRenderer.act() and ReactTestUtils.act() for batching updates, Support synchronous thenables passed to React.lazy(), Improve useReducer Hook lazy initialization API.
16.8.6 27 Maret 2019 Fix an incorrect bailout in useReducer(), Fix iframe warnings in Safari DevTools, Warn if contextType is set to Context.Consumer instead of Context, Warn if contextType is set to invalid values.
16.9.0 9 Agustus 2019 Add React.Profiler API for gathering performance measurements programmatically. Remove unstable_ConcurrentMode in favor of unstable_createRoot
16.10.0 27 September 2019 Fix edge case where a hook update wasn't being memoized. Fix heuristic for determining when to hydrate, so we don't incorrectly hydrate during an update. Clear additional fiber fields during unmount to save memory. Fix bug with required text fields in Firefox. Prefer Object.is instead of inline polyfill, when available. Fix bug when mixing Suspense and error handling.
16.10.1 28 September 2019 Fix regression in Next.js apps by allowing Suspense mismatch during hydration to silently proceed
16.10.2 3 Oktober 2019 Fix regression in react-native-web by restoring order of arguments in event plugin extractors
16.11.0 22 Oktober 2019 Fix mouseenter handlers from firing twice inside nested React containers. Remove unstable_createRoot and unstable_createSyncRoot experimental APIs. (These are available in the Experimental channel as createRoot and createSyncRoot.)
16.12.0 14 November 2019 React DOM - Fix passive effects (useEffect) not being fired in a multi-root app.

React Is - Fix lazy and memo types considered elements instead of components

16.13.0 26 Februari 2020 Features added in React Concurrent mode.

Fix regressions in React core library and React Dom.

16.13.1 19 Maret 2020 Fix bug in legacy mode Suspense.

Revert warning for cross-component updates that happen inside class render lifecycles

16.14.0 14 Oktober 2020 Add support for the new JSX transform.
17.0.0 20 Oktober 2020 "No New Features" enables gradual React updates from older versions.

Add new JSX Transform, Changes to Event Delegation

17.0.1 22 Oktober 2020 React DOM - Fixes a crash in IE11
17.0.2 22 Maret 2021 React DOM - Remove an unused dependency to address the SharedArrayBuffer cross-origin isolation warning.
18.0.0 29 Maret 2022 Concurrent React, Automatic batching, New Suspense Features, Transitions, Client and Server Rendering APIs, New Strict Mode Behaviors, New Hooks [16]
18.1.0 26 April 2022 Many fixes and performance improvements
18.2.0 14 Juni 2022 Many more fixes and performance improvements

Lihat pula

Daftar pustaka

  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 Inggris). 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 Inggris). Diakses tanggal 2022-12-04. 
  7. ^ "Introducing React Native – React Blog". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-12-04. 
  8. ^ a b c 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 Inggris). 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. ^ "Refs and the DOM – React". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-11-30. 
  12. ^ "React: The Virtual DOM". Codecademy (dalam bahasa Inggris). Diakses tanggal 2022-11-30. 
  13. ^ "Why did we build React? – React Blog". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-11-30. 
  14. ^ Account, PayPal Tech Blog Admin (2018-07-09). "Isomorphic React Apps with React-Engine". The PayPal Technology Blog (dalam bahasa Inggris). Diakses tanggal 2022-11-30. 
  15. ^ Disclaimer:, 2022-11-30, diakses tanggal 2022-11-30 
  16. ^ "React v18.0". reactjs.org (dalam bahasa Inggris). Diakses tanggal 2022-04-12. 
Diperoleh dari "https://wiki-indonesia.club/w/index.php?title=React.js&oldid=22245884"