[解決済み] React + ES6 + webpackを使用してコンポーネントをインポートおよびエクスポートする方法？

質問

で遊んでいます。 React と ES6 使って babel と webpack . 複数のコンポーネントを別々のファイルにビルドして、1つのファイルにインポートして、バンドルしたいのですが 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>
      );
    }
}

メインページ.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`.

何が間違っているのでしょうか？どうすれば適切にコンポーネントをインポートおよびエクスポートできますか？

解決方法は？

試す デフォルト を使用することで、コンポーネントのエクスポートを行うことができます。

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

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

default を使うことで、特定のメンバー名が提供されない場合、そのモジュールのメンバーがインポートされることを表現しています。また、次のようにして MyNavbar という特定のメンバーをインポートしたいことを表現することもできます: import {MyNavbar} from './comp/my-navbar.jsx'; この場合、デフォルトは必要ありません。