React でデフォルトをエクスポート

React の export の種類とその機能を紹介します。

React でのエクスポートの種類

export default ReactApp; のようにエクスポートします import logo from './logo.svg'のようにインポートすることは、ES6 モジュールシステムの一部です。

ES6 には、名前付きエクスポートとデフォルトエクスポートの 2 種類のエクスポートがあります。

React の名前付きエクスポート

関数の名前を使用してエクスポートされるエクスポートは、export Function ExFunc(){} などの名前付きエクスポートと呼ばれます。

名前付きモジュールは、import { ExFunc } from 'module'; を使用してインポートできます。インポート名は、この例の ExFunc のように、エクスポートの名前と同じである必要があります。

1つのモジュールに複数の名前付き export を含めることができます。

React のデフォルトのエクスポート

デフォルトの export は、モジュールから単一のクラス、プリミティブ、または関数をエクスポートするために使用されます。デフォルトの export を使用するには、さまざまな方法があります。

通常、デフォルトの export は、以下の例のように、関数の後に記述されます。

# react
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

ただし、以下のように書くこともできます。

# react
export default class ReactApp extends React.Component {
  render() {
    return <p>Exported Using Default Export</p>;
  }
}

また、関数の場合は、と書くことができます。

# react
export default function ReactApp() {
  return <p>Exported Using Default Export</p>
}

デフォルトの export を使用した後は、必ずしも ReactApp としてインポートする必要はありません。任意の名前を付けることができます。

# react
import Y from './ReactApp';

Y は、値を含めるために割り当てられた変数にローカルで付けられる名前であり、originexport という名前である必要はありません。

default export を使用する際に重要なことは、named export とは異なり、default export は 1つしか存在しないということです。モジュールには、export とデフォルトの export の両方の名前を付けることができ、それらを一緒にインポートできます。

# react
import Y, { ExFunc1, ExFunc2, etc... } from 'module';