React 入門ガイド

このサイトは、HTML / CSS / JavaScript の基本を理解している開発者を対象とした、 React の日本語チュートリアルです。Vite でのプロジェクト作成からコンポーネントの使い方、 最終的に Apache Tomcat へデプロイするまでをステップバイステップで解説します。

2026年時点の注記: 本ガイドは Create React App ではなく Vite を前提にしています。新規案件では Vite + TypeScript、または Next.js / Remix などの React フレームワーク採用を検討してください。React 19 の最新機能（React Compiler など）は 公式ドキュメント / 公式ブログを併読する運用を推奨します。

React 19 Node.js 20+ Vite + Tomcat

React とは

React は Meta（旧 Facebook）が開発した、ユーザーインターフェースを構築するための JavaScript ライブラリです。 コンポーネントと呼ばれる独立した部品を組み合わせて画面を構成し、 仮想 DOM による効率的な差分更新で高いパフォーマンスを実現します。

このガイドでは、React でシングルページアプリケーション（SPA）を開発し、 ビルド済みの静的ファイルを Apache Tomcat にデプロイして配信する方法を解説します。 開発時は Vite の開発サーバーを使い、本番環境では Tomcat で配信するワークフローを前提としています。

対象読者

前提環境

項目要件
Node.js20 以上（LTS 推奨）
npm10 以上（Node.js に同梱）
React19.x
ビルドツールVite 6.x
本番サーバーApache Tomcat 10+
エディタVS Code 推奨（任意）

目次

1

React 概要

React とは何か。仮想 DOM、宣言的 UI、SPA の概念を理解し、従来の開発手法との違いを解説します。

2

環境構築

Node.js のインストール、Vite で React プロジェクトを作成、ディレクトリ構成の理解、開発サーバーの起動までを解説します。

3

JSX の基本

JSX 構文、式の埋め込み、属性の書き方、JSX が JavaScript に変換される仕組みを解説します。

4

コンポーネント

関数コンポーネントの作り方、コンポーネント分割、import / export、ファイル構成のベストプラクティスを解説します。

5

Props と State

props による親子間のデータ受け渡し、useState による状態管理、リフトアップ、不変性の概念を解説します。

6

イベントハンドリング

onClick / onChange 等のイベント処理、イベントオブジェクト、引数付きハンドラの書き方を解説します。

7

条件付きレンダリングとリスト

三項演算子・&& による条件表示、map() によるリスト描画、key の重要性を解説します。

8

フック (Hooks)

useEffect、useContext、useRef、useCallback、useMemo、カスタムフックの作り方を解説します。

9

React Router

react-router-dom によるページ遷移、HashRouter と BrowserRouter の違い、Tomcat での注意点を解説します。

10

フォーム

制御コンポーネント、非制御コンポーネント、バリデーションの実装パターンを解説します。

11

API 通信

fetch API、async/await、useEffect でのデータ取得、エラーハンドリング、ローディング表示を解説します。

12

ビルドと Tomcat デプロイ

npm run build によるビルド、Tomcat の webapps への配置、ルーティング設定、本番運用の注意点を解説します。

13

テスト

Vitest と React Testing Library を使ったコンポーネントテスト、ユーザー操作のテスト方法を解説します。

このガイドでは React 19 と Vite 6 を対象としています。 本番環境では npm run build で生成された静的ファイル（HTML / JS / CSS）を Apache Tomcat 10 以降の webapps ディレクトリに配置して配信します。

参考: CRA の段階的終了（React 公式） / TypeScript（React 公式） / React Compiler 1.0（React 公式）