Content deleted Content added
m →JSX: remove space |
|||
Line 73:
</syntaxhighlight>
In the above example, the <code>name</code>
Note: In the above example, we can see that in return section it have <DIV> Tag because there are some limitation in return function, It's only return single value that's why we binding all JSX element or component into single <DIV> tag.▼
▲
The two primary ways of declaring components in React are through function components and class-based components.▼
▲The two primary ways of declaring components in React are through function components and class-based components. <DIV> <DIV>
=== Functional components ===
Function components are declared with a function that then returns some JSX.
Line 99:
===Virtual DOM===
Another notable feature is the use of a virtual [[Document Object Model]], or [https://tekolio.com/react-virtual-dom-explained-in-simple-words/ virtual DOM]. React creates an [[In-memory processing|in-memory]] data-structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently.<ref name="workingwiththebrowser">{{cite web |url=https://reactjs.org/docs/refs-and-the-dom.html |title=Refs and the DOM |website=React Blog}}</ref> This process is called '''reconciliation'''. This allows the programmer to write code as if the entire page is rendered on each change, while the React libraries only render subcomponents that actually change. This selective rendering provides a major performance boost.<ref name=":0">{{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}}</ref> It saves the effort of recalculating the CSS style, layout for the page and rendering for the entire page.<ref name=":0" />
=== Lifecycle methods ===
Line 129:
===Architecture beyond HTML===
The basic 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|url=https://facebook.github.io/react/blog/2013/06/05/why-react.html|title=Why did we build React? – React Blog}}</ref> and Netflix and [[PayPal]] use universal loading to render identical HTML on both the server and client.<ref name="paypal-isomorphic-reactjs">{{cite web|title=PayPal Isomorphic React|url=https://medium.com/paypal-engineering/isomorphic-react-apps-with-react-engine-17dae662379c | 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 | url-status=live }}</ref><ref name="netflix-isomorphic-reactjs">{{cite web|title=Netflix Isomorphic React|url=http://techblog.netflix.com/2015/01/netflix-likes-react.html}}</ref>
=== React hooks ===
Line 160:
==History==
React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called "FaxJS".<ref>{{cite web |last1=Walke |first1=Jordan |title=FaxJS |url=https://github.com/jordwalke/FaxJs |access-date=11 July 2019}}</ref><ref name="papp" /> He was influenced by [[XHP]], an [[HTML]] component library for [[PHP]]. It was first deployed on Facebook's [[News Feed]] in 2011 and later on [[Instagram]] in 2012.<ref>{{cite web|url=https://www.youtube.com/watch?v=A0Kj49z6WdM|title=Pete Hunt at TXJS}}</ref> It was open-sourced at JSConf US in May 2013.<ref name="papp">{{cite news |last1=Papp |first1=Andrea |title=The History of React.js on a Timeline |url=https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/ |access-date=11 July 2019 |work=RisingStack |date=4 April 2018}}</ref>
[[React Native]], which enables native [[Android (operating system)|Android]], [[iOS]], and [[Universal Windows Platform|UWP]] development with React, was announced at Facebook's React Conf in February 2015 and open-sourced in March 2015.
| |||