Question

我是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']
            }
        }]
    }
};

Answer 1

React.render()不再与当前版本一起使用。 React已将该库从0.14版本拆分。除了ReactDOM.render()

中的拼写错误之外，您还需要使用React.render()

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

＆＃13;

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

＆＃13;

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

＆＃13;

在您的网络包中，您已在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.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

React组件未呈现给index.html

1 个答案: