反应JS |热模块更换

始终建议使用可在此处找到的 create-react-app 开始您的反应之旅。由于安装后提供了所有基本应用程序后端，因此节省了大量时间，我们只需要处理实现细节。每当我们在 create-react-app 内的主要核心“app.js”文件中进行更改并访问本地主机时，我们都会看到页面在更新内容后自行刷新。
'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 (
      

        
{helloWorld}
      
    );
  }
}
// exporting the default app 
// so it can be used in other modules
export default App;

在上面的代码中，我们声明了一个变量，然后使用 react 提供的 render 方法打印它，这是其中的一部分。在 app.js 文件中，我们编写了主要的 JSX( javascript XML )，它在 HTML 标记中包含了 javascript。在 JSX 之后，我们导出内容，以便 ReactDOM 可以使用它，然后最终将其显示在指定的元素中。使用 ReactDOM 的“index.js”代码如下所示：
'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(, 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();

输出：

现在，每当我们对 app.js 文件进行任何类型的更改并保存它时，react 都会对其进行编译，并且更改的内容将显示在 Web 上。每次我们保存它都会刷新页面，虽然它推荐使用 HOT Module Replacement，它允许我们在浏览器中重新加载我们的应用程序而不刷新页面。它改善了作为开发人员的体验。为了使用这个模块，我们在“index.js”中的代码看起来像下面的代码：
'更新 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(, 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();
}

现在，虽然内容应该更新，但浏览器不应该刷新。