Javascript React index.html已呈现，但React组件未呈现_Javascript_Html_Reactjs

Javascript React index.html已呈现，但React组件未呈现

javascript html reactjs

Javascript React index.html已呈现，但React组件未呈现,javascript,html,reactjs,Javascript,Html,Reactjs,我不明白为什么ReactDOM不呈现我的简单组件，但似乎只保留并呈现普通index.html <!DOCTYPE html> <html lang="en"> <head> <title>Hey!</title> </head> <body> <div id="root"></div> <h1>Hello World!</h1>

我不明白为什么ReactDOM不呈现我的简单组件，但似乎只保留并呈现普通index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hey!</title>
  </head>
  <body>
    <div id="root"></div>
    <h1>Hello World!</h1>
  </body>
</html>

package.json

    {
  "name": "client2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "babel-node buildScripts/server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "path": "^0.12.7"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.8.3",
    "webpack-dev-middleware": "^3.1.3"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ],
    "env": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

webpack.config.dev.js

import webpack from 'webpack'
import path from 'path'

const HtmlWebpackPlugin = require('html-webpack-plugin');


export default {
  devtool: 'inline-source-map',
  entry: [
    path.resolve(__dirname, 'src/index.js')  
   ],
  output: {
    path: path.resolve(__dirname, 'src'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  module:{
    rules:[
        {test: /\.js$/ , loader:'babel-loader', exclude: '/node_modules/'},
        {test: /\.jsx$/ , loader:'babel-loader', exclude: '/node_modules/'}
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        inject: 'body'
   })
  ] 
}

buildScript/server.js

    import express from 'express';
import path from 'path';
import webpack from 'webpack';
import config from '../webpack.config.dev';

const compiler = webpack(config);

/* var express = require('express')
var path = require('path') */

const port = 8081;
const app = express();

app.listen(port, function (error) {
    if(error) {
        console.log(error);
    }
});

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, '../src/index.html'));
});

app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));

src/index.js

    import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(){
        super();
        console.log("App Hello")
    }

    render(){
        return(
            <div>
                <h1>Howdy from React!</h1>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
console.log（“应用程序你好”）
}
render（）{
返回(
你好，我的反应！
)
}
}
ReactDOM.render(
没有来自我的index.js“App”的日志
我一直在尝试几种解决方案，除了我的express服务器不工作之外，没有一种解决方案。这里可能有什么问题？非常感谢！
您的html文件需要链接到bundle.js

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

正如我在评论中所写，您应该包括您的js
<html lang="en">
  <head>
    <title>Hey!</title>
  </head>
  <body>
    <div id="root"></div>
    <h1>Hello World!</h1>
    <script src="/bundle.js"></script>
  </body>
</html>


嘿
你好，世界！
感谢Leo Odishvili和Ben West在上面的帮助-答案是将
添加到index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hey!</title>
  </head>
  <body>
    <div id="root"></div>
    <h1>Hello World!</h1>
  </body>
</html>

唯一的改变是
将/bundles.js
更改为”/webservice\u entrypoint/bundle.js“
，因为webservice\u entrypoint将是我的应用程序的url路径
谢谢大家！
您还可以查看“html网页包插件”并将插件添加到“插件”中配置webpack.config.js，这将允许您直接使用src中的任何模板html文件，并将其捆绑到dist/文件夹中，其中包含已编译和添加的脚本标记。这确实是一个有用的插件。
您需要导入正在webpack中构建的js文件。您没有任何附带的内容现在谢谢你的回答，我已经试着做了你提到的事情，现在我得到了404响应-“/bundle.js”找不到。有什么建议吗？我缺少什么？现在你的服务器只提供index.html
。也许可以查看express.static
来提供你网站目录中的所有文件。谢谢你的回答，我已经尝试了你提到的方法，现在我得到了404响应-“/bundle.js”找不到。有什么建议吗？我缺少什么？这很奇怪。你的src文件夹中有bundle.js吗？