Reactを始めたばかりの人が最初につまずきやすいのが「コンポーネント」の考え方です。
この記事では、コンポーネントについて初心者でもわかりやすく解説していきます。
コンポーネントとは？
コンポーネントとは 画面の部品（パーツ） のことです。
Reactでは、Webページを 小さな部品の集まり として作っていきます。
例えば…
- ボタン
- 見出し（タイトル）
- 入力欄
- 商品カードなど
これら一つ一つがコンポーネントになります。
このコンポーネントを作って組み合わせるのがReact の基本的な考え方です。
コンポーネントフォルダを作ろう
コードを1ファイルにまとめて書くと、アプリの規模が大きくなった時に大変です。
そこで、コンポーネント専用のフォルダを作って、１ずつファイルに分けて管理します。
再利用できるボタンを作ってみよう
📁フォルダ構成例
src/
├─ components/
│ └─ Button.jsx
├─ App.jsx
└─ index.js
components/Button.jsxファイルに、再利用できるシンプルなボタンコンポーネントを作ってみましょう。
import React from 'react';
// props（プロップス）でボタンのラベルやクリック時の動作を受け取る
const Button = ({ label, onClick }) => {
return (
<button onClick={onClick}>
{label}
</button>
);
};
export default Button;
ここで使われている props（プロップス）は、親コンポーネントから受け取る値のことです。
このボタンでは、
-
label → ボタンに表示する文字
-
onClick → ボタンがクリックされたときの動作
を受け取れるようになっています。
コンポーネントを使ってみよう
作ったボタンコンポーネントを使ってみましょう。
import React from 'react';
import Button from './components/Button';
const App = () => {
const handleClick = () => {
alert('ボタンがクリックされました！');
};
return (
<div>
<h1>はじめてのコンポーネント</h1>
<Button label="クリックしてね" onClick={handleClick} />
</div>
);
};
export default App;
ここでやっていること
-
Button を import して読み込む（他のファイルで作ったパーツを使えるようにする）
-
label と onClick という情報を渡してボタンを表示する
これだけで、ボタンを表示させることができます。
まとめ
Reactでは、コンポーネントを使って画面を小さな部品に分けて作るのが基本です。
ボタンのようなシンプルな部品も、何度も使えるようにしておくと、とても便利です。
最初は少し難しく感じるかもしれませんが、少しずつ慣れていけば大丈夫です。
「表示する」「動きをつける」「組み合わせる」を何度かやっていくうちに、だんだん理解できるようになります。