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

问题描述

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

包.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 的日志反应“应用程序”。

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

标签： javascripthtmlreactjs

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

问题描述

解决方案

推荐阅读