Reactjs 没有错误。为什么我的组件不渲染？_Reactjs_Webpack

Reactjs 没有错误。为什么我的组件不渲染？

reactjs webpack

Reactjs 没有错误。为什么我的组件不渲染？,reactjs,webpack,Reactjs,Webpack,我对React这个东西是一个全新的认识，并且在尝试理解所有的运动部件时跌跌撞撞。我已经用webpack dev服务器启动了一个服务器，并试图将我的代码呈现给，但没有效果。它只是一个简单的表单组件。我的设置方式很可能有很多问题，但我仍然在学习！谢谢任何人能提供的帮助。我有一个index.html文件：练习组件此index.html文件正在呈现我的main.js文件： import React from 'react'; import ReactDOM from 'react-dom';

我对React这个东西是一个全新的认识，并且在尝试理解所有的运动部件时跌跌撞撞。我已经用webpack dev服务器启动了一个服务器，并试图将我的代码呈现给，但没有效果。它只是一个简单的表单组件。我的设置方式很可能有很多问题，但我仍然在学习！谢谢任何人能提供的帮助。我有一个index.html文件：


练习组件

此index.html文件正在呈现我的main.js文件：

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

class Main extends React.Component {
  render() {
    return (
      <div>
      <h1>Welcome to the Name Board!</h1>
      <Form />
      <Button />
      </div>
    );
  }
}

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state= {value: 'Please type your name.'};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
        <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

class Button extends React.Component {
  render() {
    return (
      <button value="Submit">
      </button>
    );
  }
}


ReactDOM.render(<Main />, document.getElementById('app'));

但是，尽管没有任何错误消息，并且我的服务器已成功连接，但我没有呈现任何内容。

这不是问题。这是HTML代码。它似乎没有告诉浏览器从任何地方加载捆绑包，例如

标记没有属性

src=“/build/bundle.js”

所以，也许要修复它，在将HTML代码更改为原来的样子之后，您的运气会更好

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Practicing Components</title>
</head>
<body>
  <div id="app"></div>
  <!-- See how "src" is now set to "app.bundle.js"? -->
  <script src='/build/bundle.js'></script>
</body>
</html>


练习组件

它没有反应。这是HTML代码。它似乎没有告诉浏览器从任何地方加载捆绑包，例如

标记没有属性

src=“/build/bundle.js”

所以，也许要修复它，在将HTML代码更改为原来的样子之后，您的运气会更好

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Practicing Components</title>
</head>
<body>
  <div id="app"></div>
  <!-- See how "src" is now set to "app.bundle.js"? -->
  <script src='/build/bundle.js'></script>
</body>
</html>


练习组件

看起来您甚至没有加载捆绑包：

<script src="/build/bundle.js"></script>

看起来您甚至没有加载捆绑包：

<script src="/build/bundle.js"></script>