Beginners Guide to React JS

Introduction

This post is directed towards giving readers a basic idea about React JS Technology. It focuses on the importance of React JS in the front-end development industry. It also focuses on the use of components – functional and class, also its pros and cons. It also contains the description about the life-cycle methods in react both prior and after introduction to React 16.0 and above.

What will we learn at the end of the Blog? —-> A basic understanding about React JS, the use of virtual DOM, the lifecycle methods and the components.

What is React JS React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It allows developers to change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. This corresponds to the view layer in the MVC template. In React, instead of using regular JavaScript, it uses JSX. JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. Below is a JSX snippet.

Also, below is a snippet showing how JSX in converted into JS internally.

What is Virtual DOM? In React, there is a concept of Virtual DOM which is like a lightweight copy of the actual DOM. So for every object that exists in the original DOM there is a duplicate for that in Virtual DOM. Now you might be wondering, how virtual DOM helps in improving the performance? As we have seen, JSX is internally interpreted into individual DOM elements, so whenever there is a change in the component, only the impacted DOM element is updated preventing the reload of the entire page. That’s how React Virtual DOM improves the performance in case of large enterprise applications.

What are React components? Components are independent and reusable bits of code that make the React JS application. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function. Component can be of two types in React, namely, Class Component and Functional Component Class component –> Class components are the ones that extend React.Component and have access to the react life-cycle methods. These components can also update the state(explained in the next section) of the component. Functional component –> These are just a function that return a particular DOM element. They are also known as stateless components as they don’t have access to state and life-cycle methods.

What is State and Prop? State and props(acronym for properties) are both simple JS objects, that hold information that influences the output of the render. They have a few differences, props are transferred from one component to another, let it be functional or class component, whereas state is indigenous to a particular class component. Props are immutable, whereas state is mutable. State can be update using setState. Below is a snippet that shows how props are passed on to class components and how the value is used in creating the indigenous state of the component. It also shows how to update the state using setState. NOTE: If we try to update state directly, without the method setState, we can get stuck in a problem due to the asynchronous nature of state, that would covered in subsequent posts.

What are React life-cycle methods? This methods are only present in the Class components and not in functional components. The lifecycle of a class component in react is broken down into 3 phases 1. Mounting – Birth 2. Updating – Growth 3. Unmounting – Death Lets discuss these in brief. Mounting –> Constructor : This is called at the beginning of component. All the state initialization should be handled here. ComponentWillMount : This is called just after the state initialization and just before the render is called. After this the component is created and ready to be used. Never use setState in this lifecycle. Render : More precisely speaking, render is called after every DOM update, let it be, on mount or on update. ComponentDidUpdate : This method is called after the first Render. This the place where we can make API calls and we can make the state updates. Updating –> ComponentWillReceiveProps : It receives the updated state from an external store ShouldComponentUpdate : Based on the props value, it defines if the component is to be rendered. By default the return value is set to true. ComponentWillUpdate : Called before the render method. Remember not to make any state updates under this lifecycle Render : Called after update. ComponentDidUpdate : Called after the render method. Unmounting –> ComponentWillUnmount : This method is the last lifecycle method denoting the death of the react component. We can make some garbage collection activities under this section.

NOTE: The above explanation is prior to react 16. We will have detailed explanation about each individual sections in subsequent posts.