Getting Started with React JS

React Components

A Component is considered as the main building block of a React application. It makes the undertaking of building UIs a lot simpler. Every part exists in a similar space, yet they work independently from each other and merge all in a parent component, which will be the last UI of your application. 


Each React component have their own structure, strategies just as APIs. They can be reusable according to your needs. For better understanding, consider the whole UI as a tree. Here, the root is the beginning component, and every one of the other pieces becomes branches, which are additionally partitioned into sub-branches.

In ReactJS, we have primarily two sorts of components. They are 

• Functional Components 
• Class Components

Component Life Cycle

In ReactJS, each component creation process includes different lifecycle strategies. These lifecycle methods are named as the segment's lifecycle. These lifecycle methods are not extremely complex and called at different focuses during a component's life. The lifecycle of the component is divided into four stages. They are: 

1. Initial Phase
2. Mounting Phase
3. Updating Phase
4. Unmounting Phase

Each stage contains some lifecycle methods that are explicit to the specific stage.

Initial Stage

It is the main phase of the lifecycle of a ReactJS component. Here, the component begins its excursion on a way to the DOM. Right now, the component contains the default Props and beginning State. These default properties are done in the constructor of a component. The underlying phase just happens once and comprises of the following methods.

• getDefaultProps()

It is utilized to indicate the default value of this.props. It is invoked before the making of the component or any props from the parent is passed into it.

• getInitialState()

It is utilized to indicate the default value of this.state. It is invoked before the creation of the component.

Mounting Phase

Right now, the occurrence of a component is made and inserted into the DOM. It comprises the following methods.

• componentWillMount()

This is invoked preceding a component that gets rendered into the DOM. For the situation, when you call setState() inside this method, the component won't re-render.

• componentDidMount()

This is invoked following a component that gets rendered and set on the DOM. Presently, you can do any DOM questioning tasks.

• render()

This method is characterized by every single component. It is responsible for returning a solitary root HTML node component. On the off chance that you would prefer not to render anything, you can return a null or false value.

Updating Phase

It is the following phase of the lifecycle of a react component. Here, we get new Props and change State. This stage likewise permits us to deal with client connection and provide communication with the component hierarchy. The fundamental point of this phase is to guarantee that the component is showing the most recent version of itself. Dissimilar to the Birth or Death phase, this phase repeats and once more. This phase comprises of the accompanying methods.

• componentWillRecieveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

Unmounting Phase

It is the last stage of the React component lifecycle. It is considered when a component instance is destroyed and unmounted from the DOM. This stage contains just a single method and is given underneath.

• componentWillUnmount()

This method is invoked as soon as possible before a component is destroyed and unmounted for all time. It plays out any fundamental cleanup related assignment, for example, invalidating timers, event listeners, or cleaning up DOM components. On the off chance that a component occasion is unmounted, you can't mount it once more.

Constructor

The constructor is a strategy used to introduce an object's state in a class. It automatically called during the production of an object in a class.

The idea of a constructor is the equivalent in React. The constructor in a React component is called before the component is mounted. At the point when you implement the constructor for a React component, we have to call the super(props) method before some other statement. In the event that you don't call the super(props) method, this.props will be indistinct in the constructor and can prompt bugs.

In React, constructors are mainly utilized for two purposes:

1. It utilized for instating the local condition of the component by assigning an object to this.state.
2. It utilized for binding event handler techniques that happen in your component.

You can't call setState() method straightforwardly in the constructor(). On the off chance that the component needs to utilize local state, you need straightforwardly to utilize 'this.state' to assign the initial state in the constructor. The constructor just uses this.state to assign initial state, and every other method needs to utilize set.state() method.