|
| name = React
| logo = [[File:React.js logo.svg|250px|React.js logo]]
| author = JordanSome WalkeGuys
| developer = [[Facebook]], [[Instagram]] and community
| released = {{Start date|20131208}}
| status = ActiveAwesome
| latest release version = 0.14.3
| latest release date = {{Start date and age|2015|11|18}}
| platform = [[Cross-platform]]
| programming language = [[JavaScript]]
| genre = [[JavaScript library]]
| license = [[BSD licenses#3-clause|3-Clause BSD]] with Facebook addendum (not [[Open Source Initiative|OSI-approved]])
| size = 128 KiB production<br />559 KiB development
| website = {{URL|reactjs.com}}
}}
'''React''' is a '''YouTube''' video series, that was created by The Fine Bros. They own the term 'react'. However, '''The Gamer From Mars''' decided to say they didn't, and therefore has had his channel deleted. They will delete any video with the word 'react' in the title and will continue to never go off YouTube as they make enough money for YouTube to take other channels, such as '''I Hate Everything''' and '''Geybey Cunfurmed'''
'''React''' (sometimes styled '''React.js''' or '''ReactJS''') is an [[open-source software|open-source]] [[JavaScript library]] providing a view for data rendered as [[HTML]]. React views are typically rendered using components that contain additional components specified as custom HTML tags. React promises programmers a model in which subcomponents cannot directly affect enclosing components ("data flows down"); efficient updating of the HTML document when data changes; and a clean separation between components on a modern [[single-page application]].
It is maintained by [[Facebook]], [[Instagram]] and a community of individual developers and corporations.<ref>{{cite web | website=InfoWorld | title=React: Making faster, smoother UIs for data-driven Web apps | url=http://www.infoworld.com/article/2608181/javascript/react--making-faster--smoother-uis-for-data-driven-web-apps.html}}</ref><ref>{{cite web | website=InfoQ | title=Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews | url=http://www.infoq.com/news/2013/06/facebook-react}}</ref><ref>{{cite web | title=JavaScript’s History and How it Led To ReactJS | url=http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/ | website=The New Stack}}</ref> According to [[JavaScript]] analytics service [[Libscore]], React is currently being used on the homepages of [[Netflix]], [[Imgur]], [[Bleacher Report]], [[Feedly]], [[Airbnb]], [[SeatGeek]], [[HelloSign]], and others.<ref>{{cite web|url=http://libscore.com/#React|title=Libscore|work=libscore.com}}</ref>
As of January 2015, React and React Native are Facebook's top two open-source projects by number of stars on [[GitHub]],<ref>{{cite web|url=https://code.facebook.com/posts/1236426443040107/open-source-in-2015-a-year-of-growth/|title=Open Source in 2015: A Year of Growth}}</ref> and React is the 9th most starred project of all time on GitHub.<ref>{{cite web|url=https://github.com/search?o=desc&q=stars%3A%3E1&s=stars&type=Repositories|title=GitHub search results sorted by number of stars}}</ref>
== History ==
React was created by Jordan Walke, a software engineer at Facebook. He was influenced by [[XHP]], an [[HTML]] component framework for [[PHP]].<ref>{{cite web|title=React (JS Library): How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook?|url=https://www.quora.com/React-JS-Library/How-was-the-idea-to-develop-React-conceived-and-how-many-people-worked-on-developing-it-and-implementing-it-at-Facebook/answer/Bill-Fisher-17|website=Quora}}</ref> It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com 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. React Native, which enables native iOS and Android development with React, was announced at Facebook's React.js Conf in February 2015 and open-sourced in March 2015.
==Notable features==
=== One-way data flow ===
Properties, a set of immutable values, are passed to a component's renderer as properties in its HTML tag.
A component cannot directly modify any properties passed to it, but can be passed callback functions that
do modify values. This mechanism's promise is expressed as "properties flow down and actions flow up".
For example, a shopping cart component might include multiple product line components. Rendering a product line uses only the
properties passed to it and cannot affect the shopping cart's total due. However, the product line could be passed a callback function
as a property which would be called when a 'delete this product' button was pushed and that callback function could affect the total due.
=== Virtual DOM ===
Another notable feature is the use of a "virtual [[Document Object Model|DOM]]." React creates an in-memory data structure cache,
computes the resulting differences, and then updates the browser's displayed DOM
efficiently.<ref name=instrument>{{cite web|title=An Introduction to React.js|url=http://www.instrument.com/developers/an-introduction-to-react-js|publisher=Instrument}}</ref><ref name=workingwiththebrowser>{{cite web|title=Working With the Browser|url=http://facebook.github.io/react/docs/working-with-the-browser.html|website=React}}</ref>
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.
For example, a shopping cart component would be written to render the entire shopping cart on any change of data. If a product line subcomponent had no changes to the properties, a cached rendering would be used. This means the relatively slow full update to the browser's DOM would be avoided. Alternately, if the product line quantity had changed, the product line subcomponent would be rendered; the resulting HTML might differ in only one node, and only that node would be updated in the DOM.
=== JSX ===
React components are typically written in JSX (Programming language), a JavaScript extension syntax allowing easy quoting of HTML and using HTML tag syntax to render subcomponents.<ref>{{Cite web|title = JSX in Depth |url = https://facebook.github.io/react/docs/jsx-in-depth.html|accessdate = 2015-11-17}}</ref> HTML syntax is processed into JavaScript calls of the React library. Developers may also write in pure JavaScript. JSX is similar to another extension syntax created by Facebook for PHP, [[XHP]].
=== Architecture Beyond HTML ===
The basic architecture of React applies beyond rendering HTML in the browser. For example, Facebook has dynamic charts that render to <canvas> tags<ref>https://facebook.github.io/react/blog/2013/06/05/why-react.html</ref> and Netflix uses isomorphic loading to render identical HTML on both the server and client.<ref name=paypal-isomorphic-reactjs>{{cite web|title=PayPal Isomorphic React|url=https://www.paypal-engineering.com/2015/04/27/isomorphic-react-apps-with-react-engine/}}</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 Native ====
React Native libraries announced by Facebook in 2015 <ref>https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/</ref> provide the React architecture to native iOS and Android applications.
== Future Development ==
Project status can be tracked via the core team discussion forum.<ref>{{Cite web|title = Meeting Notes|url = https://discuss.reactjs.org/c/meeting-notes|website = React Discuss|accessdate = 2015-12-13}}</ref> However major changes to React go through the [https://github.com/reactjs/react-future Future of React repo], Issues and PR.<ref>{{Cite web|title = reactjs/react-future - The Future of React|url = https://github.com/reactjs/react-future|website = GitHub|accessdate = 2015-12-13}}</ref><ref>{{Cite web|title = facebook/react - Feature request issues|url = https://github.com/facebook/react/labels/Type:%20Feature%20Request|website = GitHub|accessdate = 2015-12-13}}</ref> This enables the React community to provide feedback on new potential features, experimental APIs and JavaScript syntax improvements.
=== Sub Projects ===
The status of the React sub-projects is updated in the project wiki.<ref>{{Cite web|title = facebook/react Projects wiki|url = https://github.com/facebook/react/wiki/Projects|website = GitHub|accessdate = 2015-12-13}}</ref>
=== Facebook CLA ===
In order to contribute to React or any Facebook [[Free and open-source software|OS]] project, one should fill the Facebook [[Contributor License Agreement|CLA]].<ref>{{Cite web|title = facebook/react - CONTRIBUTING.md|url = https://github.com/facebook/react/blob/master/CONTRIBUTING.md#contributor-license-agreement-cla|website = GitHub|accessdate = 2015-12-13}}</ref><ref>{{Cite web|title = Contributing to Facebook Projects|url = https://code.facebook.com/cla|website = Facebook Code|accessdate = 2015-12-13}}</ref>
== Patents clause controversy ==
The initial public release of React in May 2013 used a standard [[Apache License|Apache License 2.0]]. In October 2014, React 0.12.0 replaced this with a [[BSD licenses#3-clause|3-clause BSD license]] and added a separate PATENTS text file that permits usage of any Facebook patents related to the software.<ref>{{cite web|title=React CHANGELOG.md|url=https://github.com/facebook/react/blob/master/CHANGELOG.md#0120-october-28-2014|website=GitHub}}</ref>
<blockquote>''"The license granted hereunder will terminate, automatically and without notice, if you (or any of your subsidiaries, corporate affiliates or agents) initiate directly or indirectly, or take a direct financial interest in, any Patent Assertion: (i) against Facebook or any of its subsidiaries or corporate affiliates, (ii) against any party if such Patent Assertion arises in whole or in part from any software, technology, product or service of Facebook or any of its subsidiaries or corporate affiliates, or (iii) against any party relating to the Software. [...] A "Patent Assertion" is any lawsuit or other action alleging direct, indirect, or contributory infringement or inducement to infringe any patent, including a cross-claim or counterclaim."<ref>{{cite web|title=Additional Grant of Patent Rights Version 2|url=https://github.com/facebook/react/blob/b8ba8c83f318b84e42933f6928f231dc0918f864/PATENTS|website=GitHub}}</ref>''</blockquote>
This unconventional clause caused some controversy and debate in the React user community, because it may be interpreted to empower Facebook to revoke the license in many scenarios, for example if Facebook sues the licensee prompting them to take "other action" by publishing the action on a blog or elsewhere. Many expressed concerns that Facebook could unfairly exploit the termination clause or that integrating React into a product might complicate a startup company's future acquisition.<ref>{{cite web|title=A compelling reason not to use ReactJS|first=Austin|last=Liu|url=https://medium.com/bits-and-pixels/a-compelling-reason-not-to-use-reactjs-beac24402f7b|website=Medium}}</ref> At the time, Google reportedly forbade its employees from using any code under this license.<ref>{{cite web|first=Zellyn|last=Hunter|title=Hacker News: React Native is now open source|url=https://news.ycombinator.com/item?id=9271246|website=Y Combinator|access-date=9 December 2015}}</ref>
Based on community feedback, Facebook updated the patent grant in April 2015 to be less ambiguous and more permissive.<ref>{{cite web|title=Updating Our Open Source Patent Grant|url=https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/}}</ref>
==References==
{{Reflist}}
==External links==
{{Portal|Free software}}
* List of React resources – [https://github.com/enaqx/awesome-react AwesomeReact]
* Pro React book – [http://www.pro-react.com Pro React]
* Using Web Components with React – [https://github.com/Wildhoney/Maple.js Maple.js]
* Guide for React ecosystem By Pete Hunt - [https://github.com/petehunt/react-howto React howto]
{{JS templating |state=autocollapse}}
{{Rich Internet applications}}
{{Application frameworks}}
{{ECMAScript}}
{{Facebook navbox}}
Kek
[[Category:Rich Internet application frameworks]]
[[Category:Ajax (programming)]]
[[Category:Software using the BSD license]]
[[Category:Facebook software]]
[[Category:2015 software]]
| 