Reactのimport/exportについてまとめるJavaScript

概要

JavaScript で module(コンポーネント)をエクスポートするには、デフォルトのエクスポートと名前付きエクスポートの 2 つの主な方法があります。
コンポーネントをエクスポートする方法によってコンポーネントをインポートする方法が決まります。

Syntax	Export statement	Import statement
Default	export default function Button() {}	import Button from './button.js';
Named	export function Button() {}	import { Button } from './button.js';

import Button from './button.js'; = import {default as Button} from './button.js';

上記の意味になるので、デフォルトインポートを作成するときは任意の名前を作成できます。

いろんな書き方

インポートやエクスポートの名前を変更する

//#1
// module.js の内部
export { function1 as newFunctionName, function2 as anotherNewFunctionName };

// main.js の内部
import { newFunctionName, anotherNewFunctionName } from "./modules/module.js";

//#2
// module.js の内部
export { function1, function2 };

// main.js の内部
import {
  function1 as newFunctionName,
  function2 as anotherNewFunctionName,
} from "./modules/module.js";

1,2 のような書き方もできます。

モジュールオブジェクトを作成して一括インポート

module.js の中にある全てのエクスポートを取得して、それらを Module というオブジェクトのメンバーとして利用できるようにすることで、独自の名前空間を持たせるような効果があります。

import * as Module from "./modules/module.js";

// 下のように使うことができる
Module.function1();
Module.function2();

余談

ちなみにデフォルトエクスポートと名前付きエクスポート両方併用しても使えます。

Gallery.js

export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

App.js

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <>
        <Gallery />
        <Profile />
    </>
  );
}

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules