Javascript React组件未在DOM上呈现_Javascript_Node.js_Reactjs_Npm_Webpack

Javascript React组件未在DOM上呈现

javascript node.js reactjs npm webpack

Javascript React组件未在DOM上呈现,javascript,node.js,reactjs,npm,webpack,Javascript,Node.js,Reactjs,Npm,Webpack,我正在浏览的react教程中，计数器组件不会显示在页面上。html如下所示： <html> <head> <script src="/bundle.js" ></script> </head> <body> <div id="mount"></div> </body> </html> Counter.js import React from 'react';

我正在浏览的react教程中，计数器组件不会显示在页面上。html如下所示：

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

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;

我们运行服务器：

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！每次刷新时

似乎没有呈现模板，但上一次我的朋友做教程时，它的工作原理是中间件中的公共方面可能提供了它

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

代码在

谢谢

您无需使用document.addEventListener'DOMContentLoaded'，函数{

类计数器扩展了React.Component{ 建造师{ 超级的此.state={ 计数：0， }; } 渲染{ 回来 { this.setState{count:this.state.count+1}； }} > 计数：{this.state.Count} ; } } ReactDOM.render React.createElementCounter， document.getElementById'mount' ; 上次运行npm运行编译是什么时候

我只是自己做了教程，遇到了和你一样的问题。我可以通过在添加React之后再次运行npm run compile来解决这个问题

由于添加React后需要重新编译bundle.js，因此本教程可能缺少一个步骤。

尝试在您的网页配置上设置publicPath

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

并确保您的.babelrc上有['es2015'，'react']预设

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

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

在loader.config.js文件中使用JSX loader，如下所示：

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

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

控制台中没有任何内容？我在上面添加了控制台，它可以打印您所期望的图像。Chrome控制台打印Hello world！当你刷新页面时，你知道为什么它会被破坏吗？我按照你的方式做，但令人惊讶的是它不起作用。使用谷歌chrome，可以进行硬刷新。服务器或前端没有错误这没有任何区别，但您可以尝试代替React.createElement吗

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

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

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