个人中心
gpt4 book ai didi

javascript - react index.html 呈现但 react 组件不

转载 作者：行者123 更新时间：2023-11-30 11:19:22 24 4
gpt4 key购买 nike

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

enter image description here

包.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>

我得到的唯一回应是

enter image description here

没有来 self 的 index.js 的日志 react “App”。

我一直在尝试多种解决方案，但除了我的快速服务器无法正常工作外，没有一个发生。这里可能是什么问题？非常感谢!

最佳答案

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

关于javascript - react index.html 呈现但 react 组件不，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50365935/

24 4 0
文章推荐： swift - 火存储 : query with array comparison
文章推荐： java - ESAPI 规范化格式错误的 url
文章推荐： ios - Swift 结构体返回成员
文章推荐： java - ORMLite - 连接 where 子句中的括号
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com