Блог

Главная - Вопросы по программированию - Нет ошибки, так почему мой компонент не отображается?

Нет ошибки, так почему мой компонент не отображается?

#reactjs #webpack

#reactjs #webpack

Вопрос:

Я новичок в этом материале React и спотыкаюсь, пытаясь понять все движущиеся части. Я запустил сервер с сервером разработки webpack и пытаюсь отобразить свой код на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']
        }
      }
    ]
  }
};

Однако, несмотря на отсутствие каких-либо сообщений об ошибках и успешное подключение моего сервера, я ничего не отображаю.

Ответ №1:

Похоже, вы даже не загружаете пакет:

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

Ответ №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>