環境

MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

まとめ

	`Default Export`	`Named Export`
エクスポート数	1つのみ	複数可能
インポート名	任意の名前を指定可能	エクスポートされた名前を使用する必要あり
主な用途	コンポーネントやモジュール全体を1つの単位で扱う場合	ユーティリティ関数や定数のグループ化に適している
可読性	エクスポート元が分かりにくい場合がある	名前付きで直感的に分かりやすい

ソースコードの前に

フォルダ構成

folda_structure

├── public/
│   ├── index.html
└── src/
│   ├── index.js(index.jsx)
│   ├── App.js(App.jsx) ← 親コンポーネント
│   └── components/
│   │   └──  ColorfulMessage.jsx/ ← 子コンポーネント

index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

index.js

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

ソースコード

App.js（`named export`）

App.js

import { ColorfulMessage } from "./components/ColorfulMessage";

export const App = () => {
  return (
    <>
      <h1>こんにちは!</h1>
      <ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
      <ColorfulMessage color="green">元気です!</ColorfulMessage>
    </>
  );
};

App.js（`default export`）

App.js

-import { ColorfulMessage } from "./components/ColorfulMessage";
+import ColorfulMessage from "./components/ColorfulMessage";

export const App = () => {
  return (
    <>
      <h1>こんにちは!</h1>
      <ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
      <ColorfulMessage color="green">元気です!</ColorfulMessage>
    </>
  );
};

default exportの場合は、下記のようにimportする際に自由に変数名を変更できる。
下記の場合は、Hogeに変更している。

App.js

-import ColorfulMessage from "./components/ColorfulMessage";
+import Hoge from "./components/ColorfulMessage";

export const App = () => {
  return (
    <>
      <h1>こんにちは!</h1>
-     <ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
+     <Hoge color="blue">お元気ですか？</Hoge>
-     <ColorfulMessage color="green">元気です!</ColorfulMessage>
+     <Hoge color="green">元気です!</Hoge>
    </>
  );
};

ColorfulMessage.jsx（`named export`）

ColorfulMessage.jsx

export const ColorfulMessage = (props) => {
  const contentStyle = {
    color: props.color,
  };

  return <p style={contentStyle}>{props.children}</p>;
};

ColorfulMessage.jsx（`default export`）

ColorfulMessage.jsx

-export const ColorfulMessage = (props) => {
+const ColorfulMessage = (props) => {
  const contentStyle = {
    color: props.color,
  };

  return <p style={contentStyle}>{props.children}</p>;

+ export default ColorfulMessage;
};

イメージ

ColorfulMessage.jsx（`named export`）

ColorfulMessage.jsx（`default export`）

参考リンク