All Important Facts That You should know About React

React is a Front-end JavaScript library which is developed by Facebook in 2011. It is a component-based library which helps to develop reusable UI components. It is widely used for developing interactive web and mobile applications

 Three main features of React

1. Use Virtual DOM
2. Use server-side rendering
3. Follow unidirectional data flow

Virtual DOM is a copy of the real DOM at it can be considered as a lightweight JavaScript object. It is a node tree that contains elements and their attributes as an object and its properties. Virtual DOM works in three simple steps

1. When the data change happen, the entire UI re-render in virtual DOM
2. Calculate the difference between real and virtual DOM
3. Real DOM will be updated according to the calculations

The major advantage of using React with comparing to other front-end libraries is that it can be conveniently used as both client and server sides. 

React use JSX (JavaScript XML) to implement elements because it is robust and improve the performance. But browser can't read the JSX because it is not an actual JavaScript object. Therefore we need a transformer to change JSX into a JavaScript object. (ex: Babel)

The following points summarize some of the recently used terms that you may use in React programming.

• Props

Props mean properties. They are known as immutable which means read-only components. They behave in a unidirectional way which means they always passed down from parent component to child component and you can not pass it in reverse 

• State

States are the source of data. They are mutable unlike props and when the state change using this.setState() method, component will be rerendered.

There are three phases in the component lifecycle

1. Initial rendering phase: component is about to start and make it's the way to DOM
2. Updating phase: when the state is changed component will re-render
3. Unmounting phase: component is destroyed and removed from the DOM

There are seven different component lifecycle methods in React

1. componentWillMount: execute just before rendering happen in both client and server side
2. coponentDidMount: execute on client side after the first render
3. componentWillRecieveProps: invoke when props are received from the parent class and before another render called
4. shouldComponentUpdate: returns true or false based on the component update condition
5. componentWillUpdate: call before rendering happen in DOM
6. componentDidUpdate: call immediately after rendering happen
7. componentWillUnmount: call after the component removed from DOM