[解決済み] JSXで "export default "は何をするのですか？

質問

最後の文（export default HelloWorld;）の意味と動作を聞きたいのですが、それに関するチュートリアルが見当たりません。

// hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

解決方法は？

輸出 のように export default HelloWorld; と インポート というように import React from 'react' の一部です。 ES6モジュールシステム .

モジュールは自己完結した単位であり、他のモジュールにアセットを公開するためには export また、他のモジュールからアセットを取得するには import .

あなたのコードで

import React from 'react'; // get the React object from the react module

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld; // expose the HelloWorld component to other modules

ES6では、2種類のエクスポートがあります。

名前付きエクスポート - 例えば export function func() {} は名前付きエクスポートで、名前は func . 名前付きモジュールは import { exportName } from 'module';. この場合、インポートの名前はエクスポートの名前と同じにする必要があります。例のfuncをインポートするには import { func } from 'module'; . 1つのモジュールに複数の名前付きエクスポートが存在することができます。

デフォルトの輸出 - はモジュールからインポートされる値で、単純なインポート文を使用した場合は import X from 'module' . Xは、その値を格納するために割り当てられた変数にローカルで付けられる名前で、オリジンエクスポートのような名前である必要はありません。デフォルトのエクスポートは1つだけです。

モジュールは、名前付きエクスポートとデフォルトエクスポートの両方を含むことができ、それらを一緒にインポートするには import defaultExport, { namedExport1, namedExport3, etc... } from 'module'; .