Reactコンポーネント入門

任意のウェブサイトを見てみましょう。それは、ヘッダー、サイドバー、フッター、コンテンツといった独立したブロックの集合体から構成されています。これらのブロックは、Reactで意味するコンポーネントであると言えます。

同じヘッダーを見ても、ロゴブロック、連絡先ブロック、メニューブロックなどを切り分けることができます。つまり、コンポーネントは他のサブコンポーネントで構成されることがあります。

Reactでも同様です。ウェブサイトはコンポーネントの集合から構築され、それらのコンポーネントはさらに他のコンポーネントを含むことができます。

Reactでは、各コンポーネントは独立したモジュールです。通常、開発はメインコンポーネントAppから始まり、それに他のコンポーネントが含まれます。

新しいコンポーネントを作成する練習をしてみましょう。

例として、製品データを表示するコンポーネントが必要だとします。そのためには、作業フォルダにファイルProduct.jsを作成し、以下のコードを追加します:

import React from 'react';

function Product() {
	return <p>
		product
	</p>;
}

export default Product;

ご覧の通り、現在このコンポーネントはテキストを含む段落を返しています。次のレッスンでは、製品データが返されるようにこのコードを改良していきます。まずは、何らかの初期テキストを持つ段落としておきましょう。

それでは、作成したコンポーネントをAppコンポーネント内で出力してみましょう。現在のAppのコードが以下のようになっているとします:

import React from 'react';

function App() {
	return <div>
		text
	</div>;
}

export default App;

まず、作成した製品コンポーネントをインポートする必要があります:

import React from 'react';
import Product from './Product'; // 製品をインポート

function App() {
	return <div>
		text
	</div>;
}

export default App;

このインポート後、Appコンポーネント内でProductコンポーネントを使用できるようになります。