A brief look at React

React is a JavaScript library that provides a set of components and services and enables you to build user interfaces.

Here is a quote from reactjs.org:

The library is developed and maintained by Facebook and is licensed under MIT. It's extensively used in building various applications at Facebook, including Facebook web and Instagram web.

React enables you to build view components that get updated when the application's state changes. The state here could refer to the underlying domain data, or it may reflect where the user is in the application journey. React ensures that the view components reflect the application state.

Here are some of the important features of React:

• JSX: Components in React applications use an XML/HTML-like syntax, known as JSX, to render the view elements. JSX allows you to include HTML in your JavaScript/React code; the familiar syntax of HTML with attributes in your React component's render function does not require you to learn a new templating language. This JSX is then used by preprocessors such as Babel to transpile HTML text to JavaScript objects that the JavaScript engine can understand.
• One-way data binding: React applications are organized as a series of nested components; a set of immutable values are passed to the component's renderer as properties in HTML tags. The component does not modify the properties (or props) it receives from its parent; instead, the child communicates the user actions to its parent component and the parent component modifies these properties by updating the component's state.
• Virtual DOM: In React, for every DOM object, a corresponding virtual DOM object is created that has the same set of properties as the real DOM object. However, the virtual DOM object lacks the power to update the view when the user interacts with the page. Components in React re-render the view elements whenever a change in state is detected, and this re-render updates the virtual DOM tree. React then compares this virtual DOM tree with the snapshot that was created before the update to determine the DOM objects that changed. Finally, React modifies the real DOM by updating only those DOM objects that changed.