React (web framework)


React is an open-source JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with rendering data to the DOM, and so creating React applications usually requires the use of additional libraries for state management and routing. Redux and React Router are respective examples of such libraries.

Basic usage

The following is a rudimentary example of React usage in HTML with JSX and JavaScript.




The Greeter function is a React component that accepts a property greeting. The variable App is an instance of the Greeter component where the greeting property is set to 'Hello World!'. The ReactDOM.render method then renders our Greeter component inside the DOM element with id myReactApp.
When displayed in a web browser the result will be


Hello World!



Notable features

Components

React code is made of entities called components. Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass in values that are known as "props":

ReactDOM.render;

The two primary ways of declaring components in React is via functional components and class-based components.
Parallel native technology for creating reusable building blocks of the web — Web Components. Advantage over React components — ability to create components not only for React but also for Angular, other libraries/frameworks, and for projects without any external dependency.

Functional components

Functional components are declared with a function that then returns some JSX.

const Greeting = =>
Hello, !
;

Class-based components

Class-based components are declared using ES6 classes.

class ParentComponent extends React.Component

Virtual DOM

Another notable feature is the use of a virtual Document Object Model, or virtual DOM. React creates an in-memory data-structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently.. 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. It saves the effort of recalculating the CSS style, layout for the page and rendering for the entire page.

Lifecycle methods

Lifecycle methods use a form of hooking that allows execution of code at set points during a component's lifetime.
JSX, or JavaScript XML, is an extension to the JavaScript language syntax. Similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers. React components are typically written using JSX, although they do not have to be. JSX is similar to another extension syntax created by Facebook for PHP called XHP.
An example of JSX code:

class App extends React.Component

;Nested elements
Multiple elements on the same level need to be wrapped in a single container element such as the
element shown above, or returned as an array.
;Attributes
JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component. All attributes will be received by the component as props.
;JavaScript expressions
JavaScript expressions can be used inside JSX with curly brackets :



The example above will render

11



;Conditional statements
If–else statements cannot be used inside JSX but conditional expressions can be used instead.
The example below will render as the string 'true' because i is equal to 1.

class App extends React.Component

The above will render:


true




Functions and JSX can be used in conditionals:

class App extends React.Component

The above will render:


Section 1

Section 2

Section 3



Code written in JSX requires conversion with a tool such as Babel before it can be understood by web browsers. This processing is generally performed during a software build process before the application is deployed.

Architecture beyond HTML

The basic architecture of React applies beyond rendering HTML in the browser. For example, Facebook has dynamic charts that render to tags, and Netflix and PayPal use universal loading to render identical HTML on both the server and client.

React hooks

Hooks are functions that let developers "hook into" React state and lifecycle features from function components. They make codes readable and easily understandable. Hooks don’t work inside classes — they let you use React without classes.
React provides a few built-in Hooks like useState, useContext, useReducer and useEffect to name a few. They are all stated in the Hooks API Reference. useState and useEffect, which are the most used, are for controlling states and side effects respectively in React Components.

Rules of hooks

There are also rules of hooks which must be followed before they can be used.
  1. Hooks should only be called at the top level.
  2. Hooks should only be called from React function components, not normal functions or class components

    Custom hooks

Building your own hooks which are called custom hooks lets you extract component logic into reusable functions. A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. The rules of hooks also apply to them.

Common idioms

React does not attempt to provide a complete "application library". It is designed specifically for building user interfaces and therefore does not include many of the tools some developers might consider necessary to build an application. This allows the choice of whichever libraries the developer prefers to accomplish tasks such as performing network access or local data storage. Common patterns of usage have emerged as the library matures.

Use of the Flux architecture

To support React's concept of unidirectional data flow, the Flux architecture represents an alternative to the popular model-view-controller architecture. Flux features actions which are sent through a central dispatcher to a store, and changes to the store are propagated back to the view. When used with React, this propagation is accomplished through component properties.
Flux can be considered a variant of the observer pattern.
A React component under the Flux architecture should not directly modify any props passed to it, but should be passed callback functions that create actions which are sent by the dispatcher to modify the store. The action is an object whose responsibility is to describe what has taken place: for example, an action describing one user "following" another might contain a user id, a target user id, and the type USER_FOLLOWED_ANOTHER_USER. The stores, which can be thought of as models, can alter themselves in response to actions received from the dispatcher.
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, which features a single store, often called a single source of truth.

Future development

Project status can be tracked via the core team discussion forum. However, major changes to React go through the Future of React repository issues and pull requests. This enables the React community to provide feedback on new potential features, experimental APIs and JavaScript syntax improvements.

History

React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called "FaxJS". 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. It was open-sourced at JSConf US in May 2013.
React Native, which enables native Android, iOS, and UWP development with React, was announced at Facebook's React Conf in February 2015 and open-sourced in March 2015.
On April 18, 2017, Facebook announced React Fiber, a new core algorithm of React library for building user interfaces. React Fiber was to become the foundation of any future improvements and feature development of the React library.
On September 26, 2017, React 16.0 was released to the public.
On February 16, 2019, React 16.8 was released to the public. The release introduced React Hooks.
VersionRelease DateChanges-
0.3.029 May 2013Initial Public Release-
0.4.020 July 2013Support for comment nodes
, Improved server-side rendering APIs, Removed React.autoBind, Support for the key prop, Improvements to forms, Fixed bugs.		-
0.5.020 October 2013Improve Memory usage, Support for Selection and Composition events, Support for getInitialState and getDefaultProps in mixins, Added React.version and React.isValidClass, Improved compatibility for Windows.-
0.8.020 December 2013Added support for rows & cols, defer & async, loop for -
0.9.020 February 2014Added support for crossOrigin, download and hrefLang, mediaGroup and muted, sandbox, seamless, and srcDoc, scope attributes, Added any, arrayOf, component, oneOfType, renderable, shape to React.PropTypes, Added support for onMouseOver and onMouseOut event, Added support for onLoad and onError on elements.-
0.10.021 March 2014Added support for srcSet and textAnchor attributes, add update function for immutable data, Ensure all void elements don't insert a closing tag.-
0.11.017 July 2014Improved SVG support, Normalized e.view event, Update $apply command, Added support for namespaces, Added new transformWithDetails API, includes pre-built packages under dist/, MyComponent now returns a descriptor, not an instance.-
0.12.021 November 2014Added new features Spread operator introduced to deprecate this.transferPropsTo, Added support for acceptCharset, classID, manifest HTML attributes, React.addons.batchedUpdates added to API, @jsx React.DOM no longer required, Fixed issues with CSS Transitions.-
0.13.010 March 2015Deprecated patterns that warned in 0.12 no longer work, ref resolution order has changed, Removed properties this._pendingState and this._rootNodeID, Support ES6 classes, Added API React.findDOMNode, Support for iterators and immutable-js sequences, Added new features React.addons.createFragment, deprecated React.addons.classSet.-
0.14.129 October 2015Added support for srcLang, default, kind attributes, and color attribute, Ensured legacy.props access on DOM nodes, Fixed scryRenderedDOMComponentsWithClass, Added react-dom.js.-
15.0.007 April 2016Initial render now uses document.createElement instead of generating HTML, No more extra s, Improved SVG support, ReactPerf.getLastMeasurements is opaque, New deprecations introduced with a warning, Fixed multiple small memory leaks, React DOM now supports the cite and profile HTML attributes and cssFloat, gridRow and gridColumn CSS properties.-
15.1.020 May 2016Fix a batching bug, Ensure use of the latest object-assign, Fix regression, Remove use of merge utility, Renamed some modules.-
15.2.001 July 2016Include component stack information, Stop validating props at mount time, Add React.PropTypes.symbol, Add onLoad handling to and onError handling to element, Add isRunning API, Fix performance regression.-
15.3.030 July 2016Add React.PureComponent, Fix issue with nested server rendering, Add xmlns, xmlnsXlink to support SVG attributes and referrerPolicy to HTML attributes, updates React Perf Add-on, Fixed issue with ref.-
15.3.119 August 2016Improve performance of development builds, Cleanup internal hooks, Upgrade fbjs, Improve startup time of React, Fix memory leak in server rendering, fix React Test Renderer, Change trackedTouchCount invariant into a console.error.-
15.4.016 November 2016React package and browser build no longer includes React DOM, Improved development performance, Fixed occasional test failures, update batchedUpdates API, React Perf, and ReactTestRenderer.create.-
15.4.123 November 2016Restructure variable assignment, Fixed event handling, Fixed compatibility of browser build with AMD environments.-
15.4.206 January 2017Fixed build issues, Added missing package dependencies, Improved error messages.-
15.5.007 April 2017Added react-dom/test-utils, Removed peerDependencies, Fixed issue with Closure Compiler, Added a deprecation warning for React.createClass and React.PropTypes, Fixed Chrome bug.-
15.5.411 April 2017Fix compatibility with Enzyme by exposing batchedUpdates on shallow renderer, Update version of prop-types, Fix react-addons-create-fragment package to include loose-envify transform.-
15.6.013 June 2017Add support for CSS variables in style attribute and Grid style properties, Fix AMD support for addons depending on react, Remove unnecessary dependency, Add a deprecation warning for React.createClass and React.DOM factory helpers.-
16.0.026 September 2017Improved error handling with introduction of "error boundaries", React DOM allows passing non-standard attributes, Minor changes to setState behavior, remove react-with-addons.js build, Add React.createClass as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, changes to the behavior of scheduling and lifecycle methods.-
16.1.09 November 2017Discontinuing Bower Releases, Fix an accidental extra global variable in the UMD builds, Fix onMouseEnter and onMouseLeave firing, Fix