ReactJS | Reemplazo de módulo caliente

Siempre se recomienda comenzar su viaje de reacción utilizando la aplicación create-react que se puede encontrar aquí. Ahorra mucho tiempo ya que todo el backend básico de la aplicación se proporciona después de la instalación, y solo nos queda ocuparnos de los detalles de implementación. Cada vez que hacemos cambios en el archivo central principal ‘app.js’ dentro de create-react-app, y visitamos el host local, vemos que la página se actualiza después de actualizar el contenido.
‘archivo app.js’

// 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;

En el código anterior, declaramos una variable y luego la imprimimos usando el método de procesamiento proporcionado por reaccionar, esta es una parte de ella. En el archivo app.js, escribimos el JSX principal (javascript XML) que incluye javascript dentro de las etiquetas HTML. Después del JSX, exportamos el contenido para que ReactDOM pueda usarlo y finalmente mostrarlo dentro del elemento especificado. El código para ‘index.js’ que hace uso de ReactDOM se parece al siguiente código:
‘archivo index.js’

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();

Producción:

Ahora, cada vez que hagamos algún tipo de cambio en nuestro archivo app.js y lo guardemos, reaccionar lo compilará y el contenido modificado se mostrará en la web. Actualizará la página cada vez que la guardemos, aunque se recomienda hacer uso del Reemplazo del Módulo HOT, que nos permite recargar nuestra aplicación en el navegador sin necesidad de actualizar la página. Mejora la experiencia como desarrollador. Para hacer uso de este módulo, nuestro código dentro de ‘index.js’ se parecerá al siguiente código:
‘archivo index.js actualizado’

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();
}

Ahora, el navegador no debería actualizarse, aunque el contenido debería actualizarse.