Content deleted Content added
Modernize JSX example with function component instead of Class component |
Thunder491 (talk | contribs) mNo edit summary |
||
| (10 intermediate revisions by 8 users not shown) | |||
Line 33:
== Notable features ==
=== Declarative ===
React adheres to the [[declarative programming]] [[Programming paradigm|paradigm]].<ref>{{Cite web |date=2017-09-27 |title=React Introduction |url=https://www.geeksforgeeks.org/reactjs-introduction/ |access-date=2024-10-12 |website=GeeksforGeeks |language=en-US}}</ref>
=== Components ===
Line 41:
=== Function components ===
Function components, announced at React Conf 2018, and available since React v16.8
<ref name="introducing_hooks"/>
Line 79:
Currently, server components are most readily usable with [[Next.js]]. With Next.js, it's possible to write components for both the server and the client (browser). When a server rendered component is received by the browser, React in the browser takes over and creates the virtual DOM and attach event handlers. This is called hydration.
<ref>{{Cite web |title= hydrate |url=https://18.react.dev/reference/react-dom/hydrate#hydrating-server-rendered-html |access-date=2025-06-19 |language=en
=== Class components ===
Line 104:
Another notable feature is the use of a virtual [[Document Object Model]], or [[Virtual DOM]]. React creates an [[In-memory processing|in-memory]] data-structure, similar to the browser DOM. Every time components are rendered, the result is compared with the virtual DOM. It then updates the browser's displayed DOM efficiently with only the computed differences.<ref name="React Blog">{{cite web |title=Refs and the DOM |url=https://reactjs.org/docs/refs-and-the-dom.html |access-date=2021-07-19 |website=React Blog |archive-date=2022-08-07 |archive-url=https://web.archive.org/web/20220807171328/https://reactjs.org/docs/refs-and-the-dom.html |url-status=live }}</ref> This process is called '''reconciliation'''. This allows the programmer to write code as if the entire page is rendered on each change, while React only renders the components that actually change. This selective rendering provides a major performance boost.<ref name="Codecademy">{{Cite web |title=React: The Virtual DOM |url=https://www.codecademy.com/articles/react-virtual-dom |access-date=2021-10-14 |website=Codecademy |language=en |archive-date=2021-10-28 |archive-url=https://web.archive.org/web/20211028172953/https://www.codecademy.com/articles/react-virtual-dom |url-status=live }}</ref><ref name="Aggarwal">{{cite web |last1=Aggarwal |first1=Sanchit |title=Modern Web-Development using ReactJS |url=https://ijrra.net/Vol5issue1/IJRRA-05-01-27.pdf |website=International Journal of Recent Research Aspects |access-date=11 December 2024 |archive-url=https://web.archive.org/web/20240417143754/https://ijrra.net/Vol5issue1/IJRRA-05-01-27.pdf |archive-date=17 April 2024 |pages=133–137 |date=March 2018 |url-status=live}}</ref>
==== Updates ====
When <code>ReactDOM.render</code><ref>{{Cite web |title=ReactDOM – React |url=https://reactjs.org/docs/react-dom.html |access-date=2023-01-08 |website=reactjs.org |language=en |archive-date=2023-01-08 |archive-url=https://web.archive.org/web/20230108104936/https://reactjs.org/docs/react-dom.html |url-status=live }}</ref> is called again for the same component and target, React represents the new UI state in the Virtual DOM and determines which parts (if any) of the living DOM needs to change.<ref>{{Cite web |title=Reconciliation – React |url=https://reactjs.org/docs/reconciliation.html |access-date=2023-01-08 |website=reactjs.org |language=en |archive-date=2023-01-08 |archive-url=https://web.archive.org/web/20230108105122/https://reactjs.org/docs/reconciliation.html |url-status=live }}</ref>
Line 119:
=== JSX ===
{{Main|JSX (JavaScript)|l1=JSX}}
[[JSX (JavaScript)|JSX]], or JavaScript XML, is an extension to the JavaScript language syntax.<ref>{{cite web |date=2022-03-08 |title=Draft: JSX Specification |url=https://facebook.github.io/jsx/ |access-date=7 April 2018 |website=JSX |publisher=Facebook |language=en-US |archive-date=2022-04-02 |archive-url=https://web.archive.org/web/20220402072504/https://facebook.github.io/jsx/ |url-status=live }}</ref> Similar in appearance to HTML,{{sfn|Wieruch|2020}}{{rp|11}} JSX provides a way to structure component rendering using syntax familiar{{sfn|Wieruch|2020}}{{rp|15}} to many developers. React components are typically written using JSX, although they do not have to be (components may also be written in pure JavaScript). During compilation, JSX is converted to JavaScript code. JSX is similar to another extension syntax created by Facebook for [[PHP]] called [[XHP]].
An example of JSX code:
Line 204:
This pattern is sometimes expressed as "properties flow down, actions flow up". Many implementations of Flux have been created since its inception, perhaps the most well-known being [[Redux (JavaScript library)|Redux]], which features a single store, often called a [[single source of truth]].<ref>{{cite web|title=State Management Tools – Results|url=http://2016.stateofjs.com/2016/statemanagement/|website=The State of JavaScript|access-date=29 October 2021|archive-date=31 May 2022|archive-url=https://web.archive.org/web/20220531133609/http://2016.stateofjs.com/2016/statemanagement/|url-status=live}}</ref>
In February 2019, <code>useReducer</code> was introduced as a [[
== History ==
| |||