Reactjs 使用带有React config的网页包的代码未正确呈现

我在React中建立了一个简单的计算器。它包含两个用于输入数字的输入，一个按钮用于在单击时添加数字，另一个顶部标题包含结果，该结果具有一个

onClick

处理程序以动态显示结果

这是一个工作演示：

但是，当我在本地服务器上启动此项目时，代码不起作用。DOM元素正确加载，但单击处理程序不会更改结果。我怀疑这可能与我的Webpack配置有关（输出不正确），但我不确定，因为我尝试了许多不同的修复，但都没有成功

项目文件结构

.
└── dist
    ├── bundle.js
    ├── bundle.js.map
    └── index.html
└── node_modules
└── src
    ├── app.jsx
    ├── calculator.jsx
    └── index.html
└── .babelrc
└── package.json
└── package-lock.json
└── webpack.config.js

package.json

{
  "name": "react-calculator",
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/preset-env": "^7.14.0",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "start": "webpack serve",
    "build": "webpack"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/app.jsx",
  output: {
    filename: "bundle.js",
  },
  mode: "development",
  devtool: "source-map",
  devServer: {
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, "./dist"),
    compress: true,
    hot: true,
    port: 8080,
    publicPath: "/dist",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/index.html"),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx", "*"],
  },
};

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

/src/app.jsx

import React from "react";
import ReactDOM from "react-dom";

import Calculator from "./calculator";

document.addEventListener("DOMContentLoaded", function () {
  ReactDOM.render(<Calculator />, document.getElementById("app"));
});

import React from "react";

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num1: "",
      num2: "",
      result: 0
    };

    this.setNum1 = this.setNum1.bind(this);
    this.setNum2 = this.setNum2.bind(this);
    this.add = this.add.bind(this);
  }

  setNum1(e) {
    this.setState({ num1: Number(e.target.value) });
  }

  setNum2(e) {
    this.setState({ num2: Number(e.target.value) });
  }

  add(e) {
    e.preventDefault();
    const sum = this.state.num1 + this.state.num2;
    this.setState({ result: sum });
  }

  render() {
    return (
      <div>
        <h1>{this.state.result}</h1>

        <input onChange={this.setNum1} value={this.state.num1} />
        <input onChange={this.setNum2} value={this.state.num2} />
        <br />

        <button onClick={this.add}>+</button>
      </div>
    );
  }
}

export default Calculator;

从“React”导入React；
从“react dom”导入react dom；
从“/Calculator”导入计算器；
document.addEventListener（“DOMContentLoaded”，函数（）{
ReactDOM.render（，document.getElementById（“app”）；
});

/src/calculator.jsx

import React from "react";
import ReactDOM from "react-dom";

import Calculator from "./calculator";

document.addEventListener("DOMContentLoaded", function () {
  ReactDOM.render(<Calculator />, document.getElementById("app"));
});

import React from "react";

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num1: "",
      num2: "",
      result: 0
    };

    this.setNum1 = this.setNum1.bind(this);
    this.setNum2 = this.setNum2.bind(this);
    this.add = this.add.bind(this);
  }

  setNum1(e) {
    this.setState({ num1: Number(e.target.value) });
  }

  setNum2(e) {
    this.setState({ num2: Number(e.target.value) });
  }

  add(e) {
    e.preventDefault();
    const sum = this.state.num1 + this.state.num2;
    this.setState({ result: sum });
  }

  render() {
    return (
      <div>
        <h1>{this.state.result}</h1>

        <input onChange={this.setNum1} value={this.state.num1} />
        <input onChange={this.setNum2} value={this.state.num2} />
        <br />

        <button onClick={this.add}>+</button>
      </div>
    );
  }
}

export default Calculator;

从“React”导入React；
类计算器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
num1:“”，
num2:“”，
结果：0
};
this.setNum1=this.setNum1.bind（this）；
this.setNum2=this.setNum2.bind（this）；
this.add=this.add.bind（this）；
}
setNum1（e）{
this.setState（{num1:Number（e.target.value）}）；
}
setNum2（e）{
this.setState（{num2:Number（e.target.value）}）；
}
加（e）{
e、 预防默认值（）；
const sum=this.state.num1+this.state.num2；
this.setState（{result:sum}）；
}
render（）{
返回(
{this.state.result}


+
);
}
}
导出默认计算器；

/src/index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>React Calculator</title>
    <script src="bundle.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

反应计算器