JSXで「デフォルトをエクスポートする」とは何ですか？

Question

私は最後の文章の意味を聞きたいと思います。（デフォルトのHelloWorldをエクスポートしてください）それについてのチュートリアルで見つけることができません。 export default HelloWorld;とimport等

// hello-world.jsx 

import React from 'react'; 

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

export default HelloWorld; 

Answer 1

Exportなどimport React from 'react'はES6 modules systemの一部です。

モジュールは、exportを使用してアセットを他のモジュールに公開し、importを使用して他のモジュールからアセットを取得できる自己完結型のユニットです。たとえばexport function func() {}ためfuncの名前で命名された輸出 -

名前輸出：あなたのコードで

：ES6で

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 

は、輸出の2種類があります。名前付きモジュールはimport { exportName } from 'module';.を使用してインポートできます。この場合、インポートの名前はエクスポートの名前と同じでなければならないため、例のfuncをインポートするにはimport { func } from 'module';を使用する必要があります。 1つのモジュールに複数の名前付きエクスポートが存在する可能性があります。

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

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