Question

我正在http://andrewhfarmer.com/build-your-own-starter/#0-intro处理反应教程，Counter组件不会显示在页面上。 html出现如下：

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

main.js

console.log('Hello World!');
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';


ReactDOM.render(
    React.createElement(Counter),
    document.getElementById('mount')
);

Counter.js

import React from 'react';


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

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

export default Counter;

webpack.config.js

var path = require('path');

var config = {
  context: path.join(__dirname, 'src'),
  entry: [
    './main.js',
  ],
  output: {
    path: path.join(__dirname, 'www'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader'],
      },
    ],
  },
  resolveLoader: {
    root: [
      path.join(__dirname, 'node_modules'),
    ],
  },
  resolve: {
    root: [
      path.join(__dirname, 'node_modules'),
    ],
  },
};
module.exports = config;

我们运行服务器：

cchilders@cchilders-Latitude-E7240:~/CodeTutorials/build-react-starter$ node server.js 
in the component
in the tester
in the component
in the tester
Example app listening at http://:::3000
Hash: d51a7c75081bea020fb1
Version: webpack 1.14.0
Time: 1297ms
    Asset    Size  Chunks             Chunk Names
bundle.js  744 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 707 kB [rendered]
    [0] multi main 28 bytes {0} [built]
 [179] ./src/Counter.js 2.63 kB {0} [built]
webpack: bundle is now VALID.

刷新页面在终端中不显示任何内容，但开发人员工具控制台在每次刷新时显示Hello World!

似乎模板没有呈现，但是我的朋友最后一次按照原样运行了教程（中间件中的public方面可能已经服务了它）

为什么此服务器不提供/的文件？

代码位于https://bitbucket.org/servandoavila1/codetutorials

谢谢

Answer 1

您无需使用document.addEventListener('DOMContentLoaded', function() {。

class Counter extends React.Component {
    constructor() {
        super();
        this.state = {
            count: 0,
        };
    }

    render() {
        return (
            <button
                onClick={() => {
                    this.setState({ count: this.state.count + 1 });
                }}
            >
                Count: {this.state.count}
            </button>
        );
    }
}


    ReactDOM.render(
        React.createElement(Counter),
        document.getElementById('mount')
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="mount"></div>

Answer 2

您上次运行npm run compile的时间是什么时候？

我自己刚刚完成了本教程并遇到了与您相同的问题。我可以在添加React之后再次运行npm run compile来解决它。

似乎教程可能缺少一个步骤，因为在添加React之后需要再次编译bundle.js。

Answer 3

尝试在webpack config上设置publicPath

var config = {
  ...
  output: {
    path: path.join(__dirname, 'www'),
    publicPath: '/',
    filename: 'bundle.js',
  },
  ...
}

确保['es2015', 'react']

上有.babelrc个预设

提示：在main.js上你可以这样做

ReactDOM.render(
    <Counter />,
    document.getElementById('mount')
);

Answer 4

在loader.config.js文件中使用如下的JSX加载程序：

loaders: [
     {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',

        query: {
           presets: ['es2015', 'react']
        }
     }
  ]

React组件不在DOM上呈现

4 个答案: