ReactJS | Hot Module Replacement

It is always recommended to start your react journey using the create-react-app which can be found here. It saves a lot of time as all the basic application backend is provided after installation, and we are only left to deal with the implementation details. Whenever we make changes in the main core ‘app.js’ file inside the create-react-app, and visit the localhost then we see that the page refreshes itself after updating the content.
‘app.js file’

filter_none

edit
close

play_arrow

link
brightness_4
code

// using a variable and printing it in jsx
// app.js inside the src folder of create-react-app
  
// import statements
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
  
class App extends Component {
 // react method which is used to print
 // content on to the screen.
  render() {
    const helloWorld = `How you doin'?`;
    return (
      <div className="App">
        <h2>{helloWorld}</h2>
      </div>
    );
  }
}
// exporting the default app 
// so it can be used in other modules
export default App;

chevron_right


In the above code we are declaring a variable and then printing it using the render method provide by react, this is one part of it. In the app.js file, we write the main JSX( javascript XML ) which includes javascript inside the HTML tags. After the JSX we export the content so that ReactDOM can make use of it and then finally show it inside the specified element. The code for the ‘index.js’ which makes use of the ReactDOM looks like the code below:
‘index.js file’

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
  
ReactDOM.render(<App />, document.getElementById('root'));
  
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

chevron_right


Output:

Now whenever we make any kind of change to our app.js file and save it, react will compile it and the changed content will be shown on the web. It will refresh the page every time we save it, though it recommended to make use of the HOT Module Replacement, which allows us to reload our application in the browser without refreshing the page. It improves the experience as a developer. In order to make use of this module, our code inside the ‘index.js’ will look something like the code below:
‘updated index.js file’

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
  
ReactDOM.render(<App />, document.getElementById('root'));
  
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
  
// Hot Module Replacement
if(module.hot){
    module.hot.accept();
}

chevron_right


Now, the browser shouldn’t refresh though the content should be updated.



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.