React组件未在DOM上呈现

Question

我正在浏览http://andrewhfarmer.com/build-your-own-starter/#0-intro上的React教程，并且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配置上设置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 个解决方案

解决方案1
1 2017-02-02 03:36:11

解决方案2
0 2017-02-02 05:00:24

解决方案3
0 2017-02-02 13:30:36

解决方案4
0 2017-08-22 09:01:37

React组件未在DOM上呈现

问题描述

4 个解决方案

解决方案1 1 2017-02-02 03:36:11

解决方案2 0 2017-02-02 05:00:24

解决方案3 0 2017-02-02 13:30:36

解决方案4 0 2017-08-22 09:01:37

解决方案1
1 2017-02-02 03:36:11

解决方案2
0 2017-02-02 05:00:24

解决方案3
0 2017-02-02 13:30:36

解决方案4
0 2017-08-22 09:01:37