How can ReactJS 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.

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.

--

--

--

Your Digital Transformation partner. We are here to share knowledge on varied technologies, updates; and to stay in touch with the tech-space.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

This month’s most useful tools for developers > January 2017

Let’s flatten that multi-dimensional array

What is Deno? Node.js Vs. Deno

Configure DTM in AEM

Why is React JS Best Choice for SaaS Based Product Development?

Top 10 Mistakes to Avoid When Using React

Do’s and Don’ts to Keep in Mind for a Clean and Well Coded Angular App.

[Action required] Your RSS.app Trial has Expired — Sat Feb 12 2022

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Payoda Technology Inc

Payoda Technology Inc

Your Digital Transformation partner. We are here to share knowledge on varied technologies, updates; and to stay in touch with the tech-space.

More from Medium

Working with a UX designer and optimizing my projects user flow.

Using framer-motion in React to add animation to Routes within your app.

UI/UX Best Practices for Web Forms

jQuery Mask Code Example

Website Structure in AEM — Multi-Site Manager(MSM)