Webpack 和 React With Es2015 模块通过 Babel

Question

我真的在为 Webpack 和 React 苦苦挣扎。似乎很长时间以来，Node 5.0 都没有注册我在 package.json 'dependencies' 中安装的 npm 模块。今天，我将 Node 升级到 5.2，它现在似乎运行良好。

但是，现在我正在努力让模块中的 React 代码正常工作。

Webpack 没有报错。 Chrome 控制台说：

"Uncaught Error: Invariant Violation: ReactDOM.render(): Invalid component element."（指向 Main.jsx 文件）。

有很多依赖项&我的 webpack 配置相当冗长所以我犹豫 post main.jsx 文件内容只在 SO 上。整个 repo（带有长度配置文件，然而，React 代码本身有几行长）是 here on Bitbucket.

main.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import AppParent from './components/App.jsx';
main ();
function main () {
    const app = document.createElement ('div');
    document.body.appendChild (app);
    ReactDOM.render (AppParent, app);
};

App.jsx:

import React from 'react';
import Topbar from './Topbar.jsx';
export default AppParent;
var AppParent = React.createClass ({
    render : function () {
        return (
            <div className = 'ReactParent'>
            </div>
        );
    }
});

Answer 1

在render方法中你需要渲染一个元素：

ReactDOM.render (<AppParent />, app);

您正在传递 React component class。

Answer 2

您没有渲染应该是 ReactDom.render(<AppParent />, app)

的元素

Webpack 和 React With Es2015 模块通过 Babel

Webpack & React With Es2015 Modules via Babel

javascript

node.js

reactjs

webpack

babeljs