IT技术 - React 组件不会呈现到 index.html - 吾爱随笔录

React 组件不会呈现到 index.html

IT技术 reactjs

2021-05-03 23:13:51

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

请让我知道问题所在。

索引.html

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

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

应用程序.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"));

包.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']
            }
        }]
    }
};

1个回答

React.render()不再与当前版本一起使用。React 已从 0.14 版本拆分库。你需要使用ReactDOM.render() 除了你有的错字React.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 loader 中，您需要定义presets而不是preset
在 package.jsonnpm install -S path和 webapck 中包含路径为var path = require('path');
更改index.html包含在 src 中的目录结构
你最终的 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

其它你可能感兴趣的问题

上一篇浏览器历史需要一个 DOM 下一篇大对象的 Redux 性能