Question

我刚开始在ReactJS工作，我正在学习一个基本的React教程。

我创建了一个项目，并添加了Babel，React，ReactDOM，Webpack，Express作为依赖项。

现在我有Counter.js：

import React, {Component} from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
  }

  render() {
    return (
      <button onClick={() => {this.setState({ count: this.state.count + 1 });}}>
        Count: {this.state.count}
      </button>
    );
  }
}
export default Counter;

main.js（在webpack.config.js文件中定义为应用程序的入口点）：

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter.js';

ReactDOM.render(<Counter/>,document.getElementById("warbox"));

问题在于，当我启动应用程序时，组件不会在页面上呈现，并且React DevTool Chrome扩展程序也不会亮起（如果这有任何意义）。

似乎无法准确找出问题所在。任何帮助表示赞赏。抱歉，如果它太基础了。

index.html：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div id="warbox"></div>
    <script src="bundle.js"></script>
</body>
</html>

更新：已解决。我想我应该更新让其他人看到的东西。下面是我遇到的问题：显然需要通过明确运行webpack来更新bundle.js。进行更改后，我不得不停止服务器并运行webpack并重新启动服务器。它工作了！

React Component没有启动项目

0 个答案: