はじめに

Reactを学び始めたとき、正直「コンポーネントって、ただのHTMLの分割？」と思っていました。
でも実際に触ってみると、ただの分割ではなく「UIを部品化して再利用できる仕組み」だと理解。
この記事では、学習を通じて気づいたポイントをまとめます。

Reactコンポーネントの基本

Reactでは、UIを「コンポーネント」という単位で作ります。
例えば、ボタンやカード、ヘッダーなどをひとつの部品として切り出せます。

function Button(props) {
  return <button>{props.label}</button>;
}

• 関数として定義できる
• props を使ってデータを受け渡せる
• 組み合わせてUIを構築できる

これがReactの基本的な考え方です。

学んで気づいた3つのこと

1. UIの再利用性が上がる

同じデザインのボタンやカードを何度も書かずに、1つの部品として使い回せます。
保守も楽になり「1箇所修正すれば全体が直る」安心感があります。

2. 状態を持たせられる

useState を使えば、コンポーネント内で状態を管理できます。

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      カウント: {count}
    </button>
  );
}

ただの見た目だけでなく「動きのある部品」として成長します。

3. データフローの意識が大事

親 → 子へとデータを渡す流れが基本。
最初は「props drilling（親子でデータを受け渡しまくる）」で迷子になりましたが、流れを意識するだけで理解が深まりました。

つまずいたポイント（失敗談）

• props drillingで混乱
  データがどこから来てるのか迷子になりがち。
• JSXに慣れるまで時間がかかった
  HTMLとJavaScriptが混ざった書き方が最初は不思議でした。
• コンポーネント分けすぎ問題
  細かく分けすぎると逆に管理しづらくなりました。

まとめ

Reactコンポーネントは「UIの部品化」と「状態管理」が理解のカギ。
最初は戸惑いますが、慣れると「大規模開発でも整理されたコードが書ける」ことを実感します。

👉 次は Hooks や Context API に進んでみるとさらに理解が深まります。