Content deleted Content added
Make clear Next.js is for both backend and frontend, mention hydration |
Thunder491 (talk | contribs) mNo edit summary |
||
| (13 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 102:
=== Virtual DOM ===
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
==== 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:
<syntaxhighlight lang="jsx">
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (▼
<div>▼
<button onClick={() => setCount(count + 1)}>
</div>▼
}▼
}
</syntaxhighlight>
=== Architecture beyond HTML ===
The basic [[Software architecture|architecture]] of React applies beyond rendering HTML in the browser. For example, Facebook has dynamic charts that render to <code><nowiki><canvas></nowiki></code> tags,<ref>{{cite web |last=Hunt |first=Pete |date=2013-06-05 |title=Why did we build React? – React Blog |url=https://facebook.github.io/react/blog/2013/06/05/why-react.html |access-date=2022-02-17 |website=reactjs.org |language=en-US |archive-date=2015-04-06 |archive-url=https://web.archive.org/web/20150406072833/http://facebook.github.io/react/blog/2013/06/05/why-react.html |url-status=dead }}</ref> and Netflix and [[PayPal]] use universal loading to render identical HTML on both the server and client.<ref name="medium.com-2015">{{cite web |date=2015-04-27 |title=PayPal Isomorphic React |url=https://medium.com/paypal-engineering/isomorphic-react-apps-with-react-engine-17dae662379c |url-status=live |archive-url=https://web.archive.org/web/20190208124143/https://www.paypal-engineering.com/2015/04/27/isomorphic-react-apps-with-react-engine/ |archive-date=2019-02-08 |access-date=2019-02-08 |website=medium.com}}</ref><ref name="netflixtechblog.com-2015">{{cite web |date=2015-01-28 |title=Netflix Isomorphic React |url=http://techblog.netflix.com/2015/01/netflix-likes-react.html |access-date=2022-02-14 |website=netflixtechblog.com |language=en-US |archive-date=2016-12-17 |archive-url=https://web.archive.org/web/20161217043150/http://techblog.netflix.com/2015/01/netflix-likes-react.html |url-status=live }}</ref> React can also be used to develop native apps for Android and iOS using [[React Native]].
=== Server-side rendering ===
Line 202 ⟶ 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 ==
| |||