コンポーネントをインポートする手順

React.jsでの開発の際は、コンポーネントをファイルに分けていくのが一般的です。自身で1からコンポーネントを作り、それらを各所で活用したり、すでに誰かが開発したコンポーネントをインストールして使うこともあります。

他のコンポーネントを取り込むことをインポートといいます。

基本の書き方

コンポーネントをインポートするには、呼び出すファイルの冒頭にimport文を書きます。

import コンポーネント名 from 'ファイルパス';

コンポーネントをインポートする例

例えば、componentsフォルダにButton.jsというファイルがあり、Buttonコンポーネントをインポートしたい場合は、次のように書きます。

import Button from 'components/Button';

const App = () => (
	<div>
		<Button />
	</div>
);

外部公開されているコンポーネントもインポートできる

外部公開されているコンポーネントは、次の手順でインポートして使います。

①パッケージマネージャーでコンポーネントをインストールする

npmなどのパッケージマネージャーで、外部公開されているコンポーネントをローカルPCにインストールします。

npm install コンポーネント名

例

npm install react-my-component

②コンポーネントを使いたいファイルでインポートの記述を書く

インストールされたコンポーネントは、自身でエクスポートしたコンポーネントファイルを読み込むのと同じようにインポートできます。

import ReactMyComponent from 'フォルダ/コンポーネント名';

例

import ReactMyComponent from 'components/react-my-component';