通过Babel的Webpack和带有Es2015模块的React

Question

Im really struggling with Webpack & React. It seems for ages, Node 5.0 was not registering the npm modules I installed in the package.json 'dependencies'. Today, I upgraded Node to 5.2 and it seems to be chugging along fine now.

However, now Im struggling with getting React code in modules to work.

Webpack doesn't report any error. Chrome Console says:

"Uncaught Error: Invariant Violation: ReactDOM.render(): Invalid component element." (which is pointing to Main.jsx file).

There is a lot of dependencies & my webpack config is fairly lengthy so I hesitantly post the main.jsx file content here only on SO. The whole repo (with length config files, however, the React code itself is a few lines long) is 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

In the render method you need to render an element:

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

You are passing a React component class .

Answer 2

您不渲染的元素应该是ReactDom.render(<AppParent />, app)