React Webpack渲染錯誤

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

我認為您的問題在於您不使用babel的react預設 ：

不要忘記先安裝它： 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。