How to Reload Page in React Apps

How to Reload Page in React Apps

React refresh or reload page example; In this tutorial, you will learn how to reload or refresh web page in react js apps wtih javascript window.location.reload() method. And as well as, learn how to refresh react component with hooks.

To refresh a page, you need to use the javascript window.location.reload() in React apps.

Now in this How to refresh a Page in React tutorial will provide you step by step guide on how to use JS method to refresh or reload web page in react js app with the bootstrap 4 library.

React Reload or Refresh Page Example

  • Step 1 – Create React App
  • Step 2 – Install React Bootstrap
  • Step 3 – Create Page Component
  • Step 4 – Improt Page Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install React Bootstrap

In this step, execute the following command to install react boostrap library into your react app:

npm install bootstrap --save

npm install react-bootstrap bootstrap

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>How to refresh a Page in React</h2>
    </div>
  );
}

export default App;

Step 3 – Create Page Component

In this step, create PageComponent.js file. So, visit the src directory of your react js app and create a simple web page component file named PageComponent.js. And add the following code into it:

import React from 'react'

class PageComponent extends React.Component{

      const refreshPage = ()=>{
         window.location.reload();
      }

    render(){
        return(
        	<div>
                <h1>{Math.random()}</h1>
                <button onClick={refreshPage}>Refresh</button>
            </div> 
        )  
    }
}

export default PageComponent;

Step 4 – Import Page Component in App.js

In this step, you need to add PageComponent.js file in src/App.js file:

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import PageComponent from './PageComponent'

function App() {  
    
  return (  
    <div className="App">  
      <PageComponent />  
    </div>  
  );  
}  

export default App;

If you want to refresh your react component, so you can use the following code with your react app:

import React from 'react'

class PageComponent extends React.Component{

  handleRefresh = () => {
    // by calling this method react re-renders the component
    this.setState({});
  };

    render(){
        return(
           <div>
            <h1>{Math.random()}</h1>
            <button onClick={this.handleRefresh}>Refresh component</button>
          </div>
        )  
    }
}

export default PageComponent;

If you want to refresh a component using hooks, so you can use the following code with your react app:

import React from 'react'

class PageComponent extends React.Component{

  const [value,setValue] = useState();

  const refresh = ()=>{
      // it re-renders the component
     setValue({});
  }
    render(){
        return(
            <div>
              <p>{Math.random()}</p>
              <button onClick={refresh}>Refresh component</button>
            </div>
        )  
    }
}

export default PageComponent;

Conclusion

React refresh or reload page example; In this tutorial, you have learned how to reload or refresh web page in react js apps wtih javascript window.location.reload() method.

Recommended React JS Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *