Question

我无法弄清楚为什么ReactDOM不能渲染我的简单组件，但似乎只保留和渲染普通的index.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'));

的src / index.html的

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

我得到的唯一回应是

我的index.js没有记录反应＆＃34; App＆＃34;。

我一直在尝试多种解决方案，除了我的快速服务器不工作之外没有发生任何事情。这可能是什么问题？非常感谢你！

Answer 1

您的html文件需要链接到bundle.js

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

Answer 2

正如我在评论中所写，你应该包括你的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>

Answer 3

感谢Leo Odishvili和Ben West帮助上面 - 答案实际上是将<script src="/bundle.js"></script>添加到index.html

唯一的变化是将/bundles.js更改为"./webservice_entrypoint/bundle.js"，因为webservice_entrypoint将成为我的反应应用的网址路径。

谢谢大家！

Answer 4

您还可以检查“ html-webpack-plugin”并将插件添加到webpack.config.js的“ plugins”配置中，这将允许您直接使用src内部的任何模板html文件并进行捆绑它在dist /文件夹中，并且已编译并添加了包含的脚本标签。这确实是一个有用的插件。

React index.html呈现但反应组件没有

4 个答案: