Webpack构建React.createClass不是一个函数

Question

我有 ReactJS 应用 webpack 模块构建器，以下是webpack.config.js

中的配置

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: {
        app : './src/scripts/app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'public')
    },
    context: __dirname,
    resolve: {
        extensions: ['.js', '.jsx', '.json', '*']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
};

我在app.js

中有以下代码

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

var MainApp =  React.createClass({
    render: function(){
        return (
            <div>
                <div>Header component</div>
                <div>Boady component</div>
            </div>
        );
    }
});

ReactDOM.render(
    <MainApp />,
    document.getElementById('container')
);

现在运行服务器后，当我在浏览器中加载页面时出现以下错误：

  

未捕获的TypeError：_react2.default.createClass不是函数

附加错误消息的屏幕截图：

我想了解更多有关此问题的详细信息，非常感谢您的帮助。

Answer 1

您需要安装此npm扩展程序：

npm install create-react-class --save

然后使用此代码：

var createReactClass = require('create-react-class');
var MainApp = createReactClass({
    render: function(){
        return (
            <div>
                <div>Header component</div>
                <div>Boady component</div>
            </div>
        );
    }
});
            }