React コンポーネントのエクスポート

1. React でコンポーネントを再利用するための export 文の種類
2. 名前付きエクスポートを使用して React のコンポーネントをエクスポートする
3. デフォルトのエクスポートを使用して React のコンポーネントをエクスポートする

React フレームワークは、再利用可能なコンポーネントを作成し、必要なときにいつでも使用できるため、開発者は React フレームワークを気に入っています。開発ビルドでは、コンポーネントが多くの異なるファイルに分割されるため、それらをインポートおよびエクスポートするための規則を知っておくと便利です。

この記事では、React でコンポーネントをエクスポートするさまざまな方法について説明します。

React でコンポーネントを再利用するための export 文の種類

Export および import ステートメントを使用すると、React 開発者はコンポーネントを複数のファイルに分割できます。必要に応じて、開発者は論理的に接続された複数のコンポーネントを 1つのファイルに入れることもできます。

エクスポートステートメントのタイプは、外部ファイル内のコンポーネントの可用性に影響を与える可能性があります。export ステートメントは、特定のファイルからのライブバインディングを他の場所で利用できるようにします。他のファイルは、import ステートメントを使用してこれらのライブバインディングの値をロードできます。

バインディングをインポートするときは、そのソース値がいつでも変更される可能性があることに注意してください。モジュールをエクスポートするソースファイルで値が変更されると、インポートされたすべての場所で値が更新されます。export ステートメントは、デフォルトで strict モードルールに従って自動的に動作します。

一般に、named エクスポートと default エクスポートの 2 種類のエクスポートを区別できます。名前付きエクスポートを使用して、必要な数のバインディングをエクスポートすることも、まったくエクスポートしないこともできます。ファイルごとに 1つのエクスポートタイプしか存在できないため、デフォルトのエクスポートはより制限されます。

2つのタイプのエクスポートの間には構文の違いがあります。これらについては、以下のセクションで詳しく説明します。エクスポートのタイプは、インポート時に使用する必要のある構文にも影響します。

名前付きエクスポートを使用して React のコンポーネントをエクスポートする

Webpack と ES6 は、ファイルのインポートとエクスポートのプロセスを簡素化しました。それでも、名前付きエクスポートに関するいくつかの混乱を解消する必要があります。

1つのファイルに複数のコンポーネントがある場合は、名前付きエクスポートを使用できます。名前付きエクスポートを使用して、ファイルごとに複数のコンポーネント（または他のバインディング）をエクスポートすることをお勧めします。

また、名前付きのエクスポートとインポートの構文は、間違いなくより簡単です。この方法でエクスポートされたバインディングをインポートするときは、ソースファイルと同じ名前を使用する必要があります。

例を見てみましょう：

export function Greet() {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}
export function Talk() {
  return (
    <div className="App">
      <h1>How are you?</h1>
    </div>
  );
}

次の構文を使用して、これらのコンポーネントを別のファイルにインポートできます。

import {Talk, Greet} from "./components/source.jsx"

この例では、文字列間のソースファイルへのパスを指定します。また、ソースファイルで同じバインディング名を使用し、中かっこで囲みます。

中括弧の構文を使わないと、ドキュメントは、default export で共有されているバインディングをインポートしようとしていると解釈してしまいます。default export をインポートする構文を named export のインポートに使うことはできず、エラーになります。

バインディング名が不明な場合は、エクスポートする前に名前を変更できます。上記の例では、次のことができます。

export {Greet as Greeting}

デフォルトのエクスポートを使用して React のコンポーネントをエクスポートする

ほとんどの React アプリケーションは、コンポーネントごとに個別のファイルを作成するパターンに従います。この規則により、デフォルトのエクスポートがコンポーネントのエクスポートに役立ちます。

この方法でエクスポートされたコンポーネントは、インポートがはるかに簡単です。これらはファイルからの唯一のエクスポートであるため、ファイルパスが正しい限り、任意の名前を付けることができます。

JavaScript はあなたが探しているファイルを理解します。また、中括弧を使用する必要はありません。例を見てみましょう：

export default function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}

両方のタイプのエクスポートの例は、ここにあります。

App コンポーネントをインポートする場合は、次の操作を行うだけで済みます。

import Application from "./components/App.jsx"

中括弧を使用する必要はありません。また、ソースファイルから同じバインディング名を使用する必要もありません。即興で自由にできます。このように、値の名前が変更され、このファイル内で、App ではなく Application と呼ぶことができます。

上記の例では、export default ステートメントの直後に関数コンポーネントを定義しています。個別に定義して、ステートメントで参照することもできます。

例えば：

function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}
export default App

一部の人々にとって、これはより読みやすいアプローチです。デフォルトのエクスポートの唯一の実際的な欠点は、ファイルごとに 1つのコンポーネントにしか適用できないことです。