[React][JavaScript] default exportとnamed export

# 環境
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
~~~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
~~~jsx: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`）
~~~jsx: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`）
~~~diff_jsx: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`に変更している。
~~~diff_jsx: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`）
~~~jsx:ColorfulMessage.jsx
export const ColorfulMessage = (props) => {
  const contentStyle = {
    color: props.color,
  };

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

## ColorfulMessage.jsx（`default export`）
~~~diff_jsx: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`）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/c8114829-c620-b548-8a54-fd768c56546d.png)

## ColorfulMessage.jsx（`default export`）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/b2c075fd-7aca-cda8-8e8f-dd60359eedd9.png)


# 参考リンク
- [export](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export)
- [コンポーネントに props を渡す](https://ja.react.dev/learn/passing-props-to-a-component)
- [モダンJavaScriptの基礎から始める挫折しないためのReact入門
](https://www.udemy.com/course/modern_javascipt_react_beginner)