React初心者向け｜Vue経験者が「Reactの考え方」をやさしく理解する

🌱 はじめに

Reactって最初に触ると、

• 「なんでJSの中にHTML書くの？」
• 「stateって何？」
• 「Vueと何が違うの？」

ってなりませんか？

この記事では、日常のイメージを使ってReactを理解していきます。

---

🧱 Reactって何？

Reactは一言でいうと：「状態（state）から画面を作るライブラリ」

レゴ（LEGO）で考えると

• コンポーネント = レゴのブロック
• state = ブロックの色や形
• 画面 = ブロックを組み立てた完成品

state（状態）が変わると、Reactが自動でレゴを組み直してくれます。

---

一番大事な考え方

UI = f(state)

つまり：

「画面はすべてデータ（state）で決まる」

---

🧩 JSXって何？

簡単に言うと：「JavaScriptの中でHTMLっぽく書ける書き方」

例

const element = <h1>Hello</h1>

実はこれは裏でこうなっています👇

const element = React.createElement('h1', null, 'Hello')

イメージ

JSX = 「HTMLっぽく書けるJS」

---

⚠️ JSXの注意点

• {} の中には式（expression）だけ書ける
• if / for は直接書けない

❌ NG

{ if (isShow) return <div /> }

✅ OK

{ isShow ? <div /> : null }

---

🔁 条件レンダリング（Vueとの違い）

Reactは「専用の書き方」がない、 全部JavaScriptで書きます

Vue

<div v-if="show">Hello</div>

React

{show && <div>Hello</div>}

ポイント

Vue → テンプレートで制御
React → JavaScriptで制御

---

📦 props（親 → 子）

データや関数を子コンポーネントに渡す仕組み

例

function Child(props) {
  return <div>{props.name}</div>;
}

function Parent() {
  return <Child name="React" />;
}

---

🔄 state

変わるデータ

イメージ

ボタンの「クリック回数」みたいなもの👇

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

ポイント

• stateが変わる → UIも変わる
• 自分でDOM操作しなくていい

---

🆚 Vueとの比較

	Vue	React
書き方	template + script	JSX（JSの中）
データ	ref / data	useState
更新	自動追跡	setStateで更新
思想	テンプレート中心	state中心

---

🎣 Hooksって何？

関数コンポーネントで状態や機能を使う仕組み

昔はclassが必要でしたが、今はHooksが主流です。

---

⭐ まずはこれだけでOK

① useState

データを持つ

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

② useEffect

「副作用」を処理する

（データ取得、タイマー、DOM操作など）

import { useEffect } from "react";

useEffect(() => {
  console.log("マウントされた");

  return () => {
    console.log("アンマウントされた");
  };
}, []);

---

🚧 その他のHooksについて

• useMemo
• useCallback
• useRef
• useReducer など

これらはパフォーマンス改善や高度な状態管理で使います。

---

🎯 まとめ

Reactは難しく見えるけど、やっていることはシンプル👇

• コンポーネントで画面を分ける
• stateでデータを持つ
• stateが変わるとUIが変わる

最後に一言：

Reactは「関数で画面を書く」感覚です

---