コンポーネントをエクスポートする手順

React.jsで開発をすると、コンポーネントを作っていくことになります。開発中に作ったコンポーネントは、部品として物理的にファイルを分けて管理していくのが一般的です。

コンポーネントを部品として別のファイルに分けて、そのコンポーネントを他のファイルから使えるようにすることをエクスポートといいます。

コンポーネントをエクスポートするメリット

コンポーネント毎にコードが分けてあると、次のようなメリットがあります。

コンポーネントをエクスポートする例

こちらは、ヘッダーのコンポーネントを作り、それをHeader.jsとしてエクスポートする例です。

Header.js

const Header = () => {
	return (
		<div>
			<h1>Header</h1>
		</div>
	);
};

export default Header;

エクスポートしたコンポーネントをインポートして使う

また、次のコードは、Header.jsでエクスポートしたコンポーネントを使用する例です。

App.js

import Header from './Header';

const App = () => {
	return (
		<div>
			<Header />
		</div>
	);
};

このコードを実行すると、次のようになります。

<div>
	<h1>Header</h1>
</div>