React 组件未呈现为 index.html答案

【问题标题】：React component isn't rendered to index.htmlReact 组件未呈现为 index.html
【发布时间】：2016-10-14 12:45:56
【问题描述】：

我真的是 ReactJS 的初学者。组件没有渲染，我浪费了很多时间来搜索但没有成功。我正在关注这个系列的tutorial。我已经从这个link 配置了 webpack-dev-server。根据教程检查下面的文件层次结构。

请告诉我问题所在。

index.html

<!DOCTYPE html>
<html>
<head>
<title>React</title>
</head>

<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

App.js

import React from 'react';  
class AppFirst extends React.Component{
    render(){
        return(
            <div>
                <h1>Hello ReactJs</h1>
            </div>
        );
    }
}
var appElement = <AppFirst />;
Raect.render(appElement, document.getElementById("app"));

package.json

    {
  "name": "react-for-everyone",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "./node_modules/.bin/webpack-dev-server --content-base"
  },
  "author": "",
  "license": "ISC",
  "devDependencies":{
      "babel-core": "^6.1.*",
      "babel-loader": "^6.2.*",
      "babel-preset-es2015": "^6.16.*",
      "babel-preset-react": "^6.16.*",
      "webpack": "^1.13.*",
      "webpack-dev-server": "^1.16.*"
  },
  "dependencies":{
      "react": "^15.3.*",
      "react-dom": "^15.3.*"
  }
}

webpack-config.js

    module.exports ={
    entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/App.js'
    ],
    output: {
        path: path.resolve(__dirname, "react-for-everyone"),
        filename: 'app.js',
        publicPath: 'http://localhost:8080'
    },
    devServer: {
        contentBase: "./react-for-everyone",
    },
    module:{

        loaders:[{
            test: "/\.jsx?$/",
            exclude: /node_modules/,
            loader: "babel",
            query: {
                preset: ['es2015', 'react']
            }
        }]
    }
};

【问题讨论】：

Raect 是一个错字。

标签： reactjs

【解决方案1】：

React.render() 不再与当前版本一起使用。 React 已将库从 0.14 版本中分离出来。除了React.render() 中的拼写错误之外，您还需要使用ReactDOM.render()

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

class AppFirst extends React.Component{
        render(){
            return(
                <div>
                    <h1>Hello ReactJs</h1>
                </div>
            );
        }
    }
    var appElement = <AppFirst />;
    ReactDOM.render(appElement, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

在您的 webpack 中，您在 test: "/\.jsx?$/" 中添加了引号，您不应该使用它们。 test: /\.jsx?$/。它应该是一个正则表达式而不是一个字符串

您需要进行的其他更正。

将 webpack-config.js 重命名为 webpack.config.js
在 webpack 加载器中，您需要定义 presets 而不是 preset
在你的 package.json 中包含npm install -S path 和 webapck 为 var path = require('path'); 的路径
使用包含在 src 中的index.html 更改目录结构
你最终的 webpack 看起来像这样

webpack.config.js

 var path = require('path');

 module.exports ={
    context: path.join(__dirname, "src"),
    entry: [
    './App.js'
    ],
    output: {
        path: __dirname + "/src",
        filename: 'bundle.js',
    },
    module:{

        loaders:[{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
};

将package.json 中的脚本更改为"dev": "./node_modules/.bin/webpack-dev-server --content-base src"
终于做完npm run dev打开http://localhost:8080/index.html

【讨论】：

通过添加 import ReactDOM from 'react-dom; 和 ReactDOM.render 仍然无法正常工作。请让我知道您从哪里导入import ReactDOM from 'react-dom'; ？
先 npm install -S react-dom 再导入
react-dom 已安装并在依赖项中提及，但仍无法正常工作
你使用的是哪个版本的 react 和 react-dom。你能发布你的 webpack 和 package.json
我的反应代码在App.js 中时，<script src="app.js"></script> 是否存在 ant 问题，这是两个不同的文件，请检查。