React features

2 Min. Read
Oct 14, 2019

React Important Features

ReactJs is one of the most popular JavaScript library used by web developers. React has many new features with additional simplified features, appreciable and large community. React is small compared other frameworks like Node, Rails but is popular because of its simplified features. You can use it to render just one page or even just some component of your app.

Some of the features of React are:

  • JSX
  • Components
  • One way Data Binding
  • Virtual DOM

JSX (JavaScript XML)

JSX is an XML/HTML-like syntax used by React. The syntax is intended to be used by preprocessors (like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse. by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code. In addition, JSX allows us to put HTML into JavaScript. Lets see an example of JSX code:

1
2
3
4
5
6
7
var listItem = (
        <div border='2'>
          <div className="col-8" >Hello React!!!</div>
          <input type="button" className="col-1 btn bg-info mx-1 text-light" value="Edit"/>
          <input type="button" className="col-1 btn bg-danger text-light" value="Delete"/>
         </div>
            );

Components

Components are the building blocks of a React app. In other words, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear in the display.

Functional Component:

1
const Welcome = () => <h1> Welcome to React Features </h1>; // Welcome to React Features

This component can be called in a index.html file within script tag as:

1
ReactDOM.render(<Welcome />, document.getElementById('root'));

One way Data binding

ReactJS is outlined in such a way that it takes unidirectional information stream or one-way information binding. The advantages of one-way information binding is to give you superior control through the application.

Virtual DOM

React uses Virtual DOM to update document rather than from Real DOM directly because of higher performance efficiency. Virtual DOM is in-memory representation of Real DOM. It is lightweight JavaScript object which is copy of Real DOM. Updating virtual DOM in ReactJS is faster because ReactJS uses:

  • Efficient diff algorithm
  • Batched update operations
  • Efficient update of sub tree only
  • Uses observable to detect change. Observable helps to find modified components easily.

Whenever setState() method is called, ReactJS creates the whole Virtual DOM from scratch. Creating a whole tree is very fast so it does not affect the performance. At any given time, ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and other with the previous state Virtual DOM.

Summary

React has been rapidly growing popularity among developers due to its simplified features like JSX, components, virtual DOM etc. So, with these features react can make any beginner understand the concept and learn it easily.