Question

我是新手做出反应，我正在尝试关注lynda的课程

React.js基本训练

似乎教程很少过时，因为我跟着我遇到以下错误，在尝试编译时遇到了这个错误

我的webpackconfig

var webpack = require("webpack");

module.exports = {
    entry:  __dirname + "/src/index.js",
    output: {
        path: __dirname + "/dist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: __dirname + "/dist",
        port: 3000
    },
    module: {
      rules: [
    {
    test: /\.js$/,
    loader: ["babel-loader"],
    }
    ]
    }
}

和js文件

const { render } = ReactDOM

render(
    <h1 id='title'
        className='header'
        style={{backgroundColor: 'orange', color: 'white', fontFamily: 'verdana'}}>
    Hello World
    </h1>,
    document.getElementById('react-container')
)

Answer 1

我认为你的问题是你不能使用react preset babel：

不要忘记先安装它：npm install babel-preset-react

Answer 2

使用此

更新您的webpack配置

var webpack = require("webpack");

module.exports = {
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/dist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: __dirname + "/dist",
        port: 3000
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /(node_modules|bower_components)/,
            query: {
                presets: ['react']
            }
        }]
    }
}

Answer 3

你需要安装babel-preset-react和babel-preset-es2015：

npm install --save-dev babel-preset-react babel-preset-es2015

并将其包含在package.json中：

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

Answer 4

你必须为babel-loader使用react和es2015预设。您可以创建单独的.babelrc文件，也可以在webpack.config.js

中设置

https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

Answer 5

render（）中的return（）语句在哪里？你需要返回jsx。

React Webpack渲染错误

5 个答案: