問題一覧に戻る
初級コンポーネント
問題11: コンポーネントのインポート/エクスポート

Reactコンポーネントをモジュールとして管理する方法を学びます。export defaultとnamed exportの違い、そしてそれぞれのインポート方法を理解しましょう。

// Button.js
// 名前付きエクスポート
 function Button() {
  return <button>Click me</button>;
}

// Card.js
// デフォルトエクスポート
function Card() {
  return <div className="card">Card Content</div>;
}
  Card;

// App.js
// コンポーネントをインポート
  Button   './Button';
 Card  './Card';

function App() {
  return (
    <div>
      <Card />
      <Button />
    </div>
  );
}
···