React 基礎まとめ（2025年版）

---

React 基礎まとめ（2025年版）

このページでは、React 初心者向けに 構文・基本概念・書き方・よく使う Hooks・ディレクトリ構成・デプロイの注意点 をまとめています。

■ React とは

React は Meta（旧Facebook）が開発した UI を構築するための JavaScript ライブラリ。

主な特徴：

• UI を コンポーネント として分割して作る
• JSX と呼ばれる、HTML に似た書き方ができる
• 仮想 DOM により高速に再描画
• Hooks によって状態管理をシンプルに記述
• 前提知識が少なく、学び始めやすい

---

■ JSX の基本（HTML っぽいけど JavaScript）

▼ 例：JSX の書き方

function Hello() {
  return ＜h1＞こんにちは React！＜／h1＞;
}

JSX では：

• タグは必ず閉じる（自閉もOK）
• 複数要素を返すときは親要素が必須
• JavaScript は {}（波括弧）で埋め込む

---

■ React コンポーネントの基本

React は 関数コンポーネント が主流。

▼ 最小のコンポーネント例

function Message() {
  return ＜p＞これはメッセージです。＜／p＞;
}

export default Message;

▼ 別コンポーネントから呼び出す

import Message from "./Message";

function App() {
  return ＜Message ／＞;
}

---

■ Props（親→子への値渡し）

function Hello(props) {
  return ＜p＞こんにちは、{props.name} さん！＜／p＞;
}

呼び出し側

＜Hello name="Aki" ／＞

Props は 読み取り専用 です。

---

■ Hooks の基礎（useState / useEffect）

■ useState（状態管理）→onclickはNGだったので全角で記載

import { useState } from "react";

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

  return (
    ＜div＞
      ＜p＞Count：{count}＜／p＞
      ＜button ｏｎＣｌｉｃｋ={() => setCount(count + 1)}＞＋1＜／button＞
    ＜／div＞
  );
}

• count：値
• setCount：更新関数

■ useEffect（副作用処理）

useEffect(() ⇒ {
  console.log("初回レンダリング時に実行される");
}, []);

[] によって 初回のみ 実行。

---

■ イベントハンドラの基本 →onclickはNGだったので全角で記載

＜button ｏｎＣｌｉｃｋ={() => alert("クリックしました")}＞Click！＜／button＞

注意点：

• イベント名は キャメルケース
• 関数を直接渡す（文字列ではない）

---

■ 条件分岐の書き方

{isLogin ? ＜p＞ログイン中＜／p＞ : ＜p＞未ログイン＜／p＞}

---

■ リスト描画（map）

const items = ["A", "B", "C"];

＜ul＞
  {items.map((i, idx) ⇒ (
    ＜li key={idx}＞{i}＜／li＞
  ))}
＜／ul＞

key が必須。

---

■ ディレクトリ構成（2025年の標準例）

src／
  components／
    Header.jsx
    Footer.jsx
  pages／
    Home.jsx
    About.jsx
  hooks／
  utils／
  App.jsx
  main.jsx（エントリーポイント）

ポイント：

• components：部品（UI）
• pages：画面単位
• hooks：カスタムフック
• utils：共通ロジック

---

■ よく使うパターン（React 2025）

◎ カスタムフック

function useCount() {
  const [count, setCount] = useState(0);
  return { count, inc: () ⇒ setCount(count + 1) };
}