Question

我是这个React的新品牌，并试图了解所有的活动部分。我已经使用webpack dev服务器启动了一个服务器，并尝试将我的代码呈现给http://localhost:8080/，但无济于事。它只是一个简单的表单组件。我的设置方式很可能有很多问题，但同样，还在学习！感谢任何人都能提供的帮助。我有一个index.html文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Practicing Components</title>
</head>
<body>
<div id="app"></div>
<script type='text/babel'></script>
</body>
</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'));

我已经在我的webpack.config.js中设置了我的模块加载器和入口点以及所有这些：

var path = require("path");
module.exports = {
  entry: {
    app: ["./main.js"]
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};

然而，尽管没有任何错误消息并且我的服务器已成功连接，但我什么也没有呈现。

Answer 1

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

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

Answer 2

它不是React。这是HTML代码。它似乎并没有告诉浏览器从任何地方加载捆绑包，例如<script>代码没有属性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>

没有错误，为什么我的组件没有呈现？

2 个答案: