20、React项目开发与调试全解析

React项目开发与调试全解析

1. 理解错误显示机制

在开发过程中，自动重新加载功能让开发者的注意力自然地集中到浏览器窗口，从而可能忽略控制台输出。当代码存在错误时，编译过程无法通过热模块替换（HMR）功能向浏览器发送新模块，导致浏览器显示内容静止。为解决这一问题，webpack生成的捆绑包包含集成的错误显示功能，能在浏览器窗口显示问题详情。

以下是在 App.js 文件中制造错误的示例代码：

import React, { Component } from "react";
import "./App.css";
import reactLogo from "./logo.svg";
let name = "Adam";
const city = "London";
not a valid statement
export default class extends Component {
    message = () => `Hello ${name} from ${city}`;
    render = () =>
        <div className="text-center">
            <h4 className="bg-primary text-white text-center p-3">
                { this.message() }
            </h4>
            <img src={ reactLogo } alt="react