ReactDOM 没有将 React 组件渲染成 HTML答案

【问题标题】：ReactDOM is not rendering the React component into HTMLReactDOM 没有将 React 组件渲染成 HTML
【发布时间】：2017-10-30 01:01:00
【问题描述】：

我一直在关注 React 指南，该指南在我的 repo 中设置了 webpack 和 babel。我创建了一个 react 元素，它只会打印出“Hello World”，然后我使用 ReactDOM.render 方法将此元素添加到 index.html 文件中，但由于某种原因它没有被添加。

这是我的 Index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

export default class App extends React.component {
    render() {
        return(
            <div>
              Hello World
            </div>
        )
    }
};
//////EDITED OUT <button /> for <App />
ReactDOM.render(<App />, document.getElementById("root"))

我的 index.html 文件：

<!DOCTYPE html>
<div id="root"></div>

我的 webpack.config.js 文件

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

module.exports = {
    entry: "./App/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.(js)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
        ]
     },
     plugins: [
          new HtmlWebpackPlugin({
              template: 'App/index.html'
          })
      ]
}

我的 index.css：

body {
  background: red;
}

我的 .babelrc 文件

{
  "presets": ["es2015", "react"]
}

我在浏览器上检查了开发控制台，它根本没有显示包含在 index.html 文件中的组件内的组件。 ReactDOM 是否需要额外的东西才能将我的反应元素推送到 DOM 中？

我在堆栈上查看了其他类似的问题，但由于拼写错误，他们的问题最终存在，我睁大眼睛查看我的代码，找不到任何拼写错误。我想我可能跳过了安装中的某个步骤。

【问题讨论】：

标签： reactjs webpack babeljs

【解决方案1】：

您需要渲染<App /> 而不是<button />

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

export default class App extends React.component {
    render() {
        return(
            <div>
              Hello World
            </div>
        )
    }
};
document.createelement("LI").appendChild(document.createTextNode("Water"));
ReactDOM.render(<App />, document.getElementById("root"))

你还需要输出那个

/dist/bundle.js

在index.html

像这样

<!DOCTYPE html>
<div id="root"></div>
<script src="/dist/bundle.js"></script>

【讨论】：

哎呀，我补充说，当我测试 ReactDOM 是否可以渲染任何元素时，结果证明它不能。当我将其更改为时问题仍然存在
好的，您在页面中包含了哪些脚本标签？我在 index.html 中没有看到任何内容。我也更新了我的答案。
开发控制台将 HTML 显示为：
我尝试在 html 的根 div 标签内添加一个脚本标签，如。仍然没有出现反应组件
Webpacks 输出在/dist 下。所以你需要（无论你的根是什么）/dist/bundle.js