コンポーネントとは

Reactのコンポーネントとは、UI（ユーザーインターフェース）の構成要素のことを指します。

例えば、ボタンやフォームなどの小さな部品から、ページ全体の大きな部品まで、あらゆる種類のUIを表現するために使用されます。

コンポーネントは、JavaScriptで実装されています。

Reactでは、コンポーネントを再利用可能な部品として扱うことができるため、同じUIを複数の場所で使用することができます。

これにより、コードの重複を減らし、保守性の高いコードを書くことができます。

コンポーネントは、プロパティとステートという2つの仕組みを使用して、動的なUIを表現することができます。

プロパティは、コンポーネントに渡されるパラメータのことで、ステートは、コンポーネント内部で管理される状態のことを指します。

これらを組み合わせることで、コンポーネントの見た目や動作を動的に変更することができます。

Reactでは、コンポーネントを関数コンポーネントとクラスコンポーネントの2つの方法で定義することができます。

関数コンポーネントは、シンプルでわかりやすく、ステートレスなコンポーネントを作成するために使用されます。

一方、クラスコンポーネントは、ステートフルなコンポーネントを作成するために使用されます。

Reactのコンポーネントは、階層的な構造を持ちます。

親コンポーネントが子コンポーネントをレンダリングすることで、複雑なUIを構築することができます。

また、コンポーネントは、他のコンポーネントやJavaScriptライブラリとも組み合わせることができます。

◎書き方の例

ページコンポーネント

上の画像では、ヘッダー、記事一覧、フッターなどのコンポーネントを組み合わせてページを構築します。
親コンポーネントがHomePageで、子コンポーネントがHeader、ArticleList、Footerとなり、子コンポーネントをレンダリングしています。

ボタンコンポーネント

上の画像では、ボタンのラベルとクリックイベントをプロパティとして受け取り、それに応じたボタンを表示します。

フォームコンポーネント

上の画像では、フォームを表示し、入力された値を管理します。
フォームが送信された際に、入力された値を使用して処理を行います。