Sample Page

React (sometimes styled React.js or ReactJS) is an 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 to programmers a model in which subcomponents cannot directly affect enclosing components (“data flows down”); efficient coding for updating 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.^[1][2][3] According to JavaScript analytics service Libscore, React is currently being used on the homepages of Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, and others.^[4]

History

React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML components framework for PHP.^[5]

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 modify any properties passed to it, but can be passed callback functions that do modify values. This mechanism 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 DOM.” React renders to an in memory data structure cache, computes the resulting differences, and then updates the browser’s displayed DOM efficiently. ^[6][7] 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 or data. If a product line subcomponent had no changes to the properties, a cached rendering would be used. This means the relatively slow 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 browser’s DOM.

JSX

React components are typically written in JSX, a JavaScript extension syntax allowing easy quoting of HTML and using HTML tag syntax to render subcomponents.^[8] HTML syntax is processed into JavaScript calls of the React library. Developers may also write in pure JavaScript.

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^[9] and NetFlix uses isomorphic loading to render identical HTML on both the server and client.^[10][11]

React Native libraries announced by Facebook in 2015 ^[12] provide the React architecture to native IOS and Android applications.

References

External links

Free software portal

• List of React resources – AwesomeReact
• Using Web Components with React – Maple.js