How can ReactJS enrich your application User Interface?

Let’s take a look at how ReactJS can enrich your application User Interface.

1. ReactJS — Class Component Life Cycle
2. ReactJS — Router

ReactJS — Class Component Life Cycle

• componentWillMount will be executed before the render, on both client and server-side rendering. It is deprecated in the new version of ReactJs, Hence we need to use UNSAFE_componentWillMount to achieve this lifecycle.
• componentDidMount will be executed after the first render, which is applicable only on the client-side. Example methods are, setTimeout or setInterval. You can use this lifecycle to make some API calls.
• componentWillReceiveProps will be executed when the props are updated. We have triggered the set new function to update the state. Once it is updated it will be updated in the child as a prop, hence this lifecycle will take place now. It is deprecated in the new version of ReactJs, Hence we need to use UNSAFE_componentWillReceiveProps to achieve this lifecycle. Also you can use static getDerivedStateFromProps().
• shouldComponentUpdate will return a true or false boolean value. This determines if the component will be updated or not. By default, it will be set a TRUE. If you don’t want to trigger the render method after the state or props are updated, then you can return false.
• componentWillUpdate will be executed before the render method. Whenever the props are updated, then this function will call. It is deprecated in the new version of ReactJs, Hence we need to use UNSAFE_componentWillUpdate to achieve this lifecycle.
• componentDidUpdate will be executed after the render method. Whenever the props are updated, then this function will get executed.
• componentWillUnmount — Whenever the component is unmounted from the dom, this componentWillUnmount gets executed. Eg: Wherever you call and open the Popup on the screen, after your actions/submit. The Popup component gets unmounted from the dom. That time you can call this function to unmount the component completely.

In the below example, I have used the state directly in the class component, it will automatically bind the state to that particular class component. You can also use a constructor to initialize the state.

I used the arrow function in the App component, it will bind the function to the component directly. You need not bind the function to the component manually. If you want to do it that way, then you can bind the function inside the constructor function and use it in the component wherever you want.

App.jsx

Main.js

ReactJS — Router

• Install an NPM package named React Router
  - To install the npm package please run the below code in the command prompt.
  - npm install react-router / npm i react-router
• This above command will only install the react-router into your particular project folder, If you want to install it for global project purpose you should use,
  - npm install -g react-router
• To update the installed npm package in the package.json for future use, you can run the following code in the command prompt,
  - npm install -save react-router / npm install -s react-router
• Component creation
  - For example, we will create four components. In that App, components will be considered as the main menu. Then we can create another three components named: 1.Home, 2.Product, 3.Cart. These components are rendered once the route will be changed.

MenuComponent.jsx

Adding a Router
We can start the routing part now. Using the router we can render the components, before we go to render, we need to import first. We can use the looping or switch in the react to render the component if your project has many pages. Otherwise, you can directly give the Route tag and specify the component to render inside. That is all about routing in react. Well done!

Router.jsx

And there you have it, that’s how ReactJS can enrich your application user interface.

Author: Thirumoorthy Rajendran