2.1 2026年の開始方法

Create React Appは新規アプリ向けには非推奨である。新規開発では、要件に応じて次を選ぶ。

Reactを単体で学ぶ・クライアントSPAを作る

  • Vite
  • Parcel
  • Rsbuild

ルーティング、データ取得、SSRを含むアプリ

  • Next.js
  • React RouterのFramework Mode
  • TanStack Startなど

React Native

  • Expo

本書のReactコア例は、Vite + TypeScriptを基準とする。

2.2 Viteでの作成

npm create vite@latest react-encyclopedia -- --template react-ts
cd react-encyclopedia
npm install
npm run dev

主な構成:

react-encyclopedia/
├── public/
├── src/
│   ├── assets/
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

2.3 エントリーポイント

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import "./index.css";

const container = document.getElementById("root");

if (!container) {
  throw new Error("#rootが見つかりません");
}

createRoot(container).render(
  <StrictMode>
    <App />
  </StrictMode>
);

createRootはReact 18以降のクライアントルートAPIである。

2.4 Strict Mode

Strict Modeは開発時に、純粋性やEffectのクリーンアップなどの問題を発見しやすくする。

<StrictMode>
  <App />
</StrictMode>

開発環境では、コンポーネントやEffectの一部が意図的に複数回実行されることがある。
これを「Reactのバグ」として回避するのではなく、再実行されても壊れない設計にする。

2.5 推奨ディレクトリ構成

小規模:

src/
├── components/
├── hooks/
├── lib/
├── pages/
├── types/
├── App.tsx
└── main.tsx

機能単位:

src/
├── app/
├── features/
│   ├── auth/
│   ├── users/
│   └── tasks/
├── shared/
│   ├── components/
│   ├── hooks/
│   ├── lib/
│   └── types/
└── main.tsx

「components」「hooks」という技術分類だけで全体を分けると、機能変更時に複数フォルダを横断しやすい。中規模以上では機能単位を基本にする。

2.6 必須の開発支援

  • TypeScript
  • ESLint
  • eslint-plugin-react-hooks
  • React DevTools
  • フォーマッター
  • テストランナー
  • E2Eテスト
  • 依存関係更新ツール

React Compilerを使う場合も、Hooks用ESLint診断が重要である。