如何使用React + ES6 + webpack导入和导出组件？

我在玩React和ES6使用babel和webpack。我想在不同的文件中构建多个组件，将其导入单个文件并将其与webpack

假设我有几个这样的组件：

my-navbar.jsx

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

main-page.jsx

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

import MyNavbar from './comp/my-navbar.jsx';

export class MyPage extends React.Component{
  render(){
    return(
        <MyNavbar />
        ...
    );
  }
}

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

使用webpack并按照其教程进行操作，我有main.js：

import MyPage from './main-page.jsx';

构建项目并运行它之后，在浏览器控制台中出现以下错误：

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.

我究竟做错了什么？如何正确导入和导出组件？