React入門 練習問題 3：ES6モジュールのインポート・エクスポート
あるReactアプリケーションで、Button.jsというファイルから以下のようにエクスポートされています。
```javascript
const Button = ({ onClick, children }) => {
return <button onClick={onClick}>{children}</button>;
};
export default Button;
```
別のファイルApp.jsでこのButtonコンポーネントを正しくインポートするコードはどれですか？
- import { Button } from './Button';
- import Button from './Button';
- import * as Button from './Button';
- import Button, { default as ButtonComponent } from './Button';
- const Button = require('./Button');
Qraftユーザーの成績：正答率 17%（5/29回正解）
正解と解説を見る
`export default Button;` のようにデフォルトエクスポート（＝1ファイルにつき1つだけ設定できるエクスポート方法）されたコンポーネントは、波括弧なしの `import Button from './Button';` でインポートします。
【正解の理由】
デフォルトエクスポートは波括弧`{}`を使わず、任意の名前でインポートできます。`import Button from './Button';`はこの規則通り正しく書けています。
【不正解の理由】
• `import { Button } from './Button';`：波括弧を使うのは名前付きエクスポート（`export const Button = ...`）用の書き方であり、デフォルトエクスポートに対して使うと`undefined`になる。
• `import * as Button from './Button';`：ファイル内の全エクスポートをオブジェクトとしてまとめてインポートする書き方で、デフォルトエクスポートには`Button.default`でアクセスする必要があり冗長。
• `import Button, { default as ButtonComponent } from './Button';`：同じデフォルトエクスポートを重複してインポートする不要な書き方。
• `const Button = require('./Button');`：`require`はCommonJS（＝Node.jsの伝統的なモジュール読み込み方式）の構文であり、ES6モジュール（`import`/`export`）を使うReactプロジェクトの標準的な書き方ではない。