概要

React コンポーネント指向と Flux データフローを実例で体得する

想定読者

ES6 の基礎を習得済みで、React によるコンポーネント指向 UI 開発を初めて体系的に学ぶフロントエンド開発者

こんな人には向いていない

• React Hooks・Redux Toolkit など 2019 年以降のモダン React を前提に学びたい開発者 — 本書は Flux アーキテクチャが中心で Hooks は扱わない
• TypeScript ベースのフロントエンド開発を想定している読者 — 本書の型チェックは Flow を採用しており TypeScript とは別物
• Vite・webpack・Next.js など現代的なビルドツールやフレームワークの利用方法を学びたい読者 — 本書のビルドツールは Browserify を前提としている

この本で身につくこと

• JSX の構文とコンポーネント分割の考え方を理解し、小さな部品を組み合わせて UI を構築できる
• Flux アーキテクチャによる単方向データフロー(Action → Dispatcher → Store → View)の設計方針を把握できる
• Jest を使ったコンポーネントのユニットテストを書ける
• ESLint による構文チェックをプロジェクトに組み込む手順を理解できる
• Immutable.js を活用したイミュータブルなデータ管理の概念と利点を説明できる

ハイライト(外部からの言及)

本書の前半は入門編で、簡単なサンプルを使いながらReactの基本やJSXについて学びます。後半は、実際のアプリケーション開発に必要なものや開発を助けてくれるツールについての解説です。 — 出典

前半が概念習得・後半がツール実践という二段構成が明示されており、読者が学習計画を立てやすい構成であることが端的に伝わる箇所

章立て

(公式情報未確認 — 出版社公式ページの目次が公開され次第、本セクションを更新予定)

関連記事 / 参考情報

• VueがReactを抜かしてGitHubのスター数3位になった件（3大フレームワークの頂点） — Vue・React・Angular の GitHub スター数推移を軸に 3 大フレームワークの勢力図を比較・分析した記事
• React-コンポーネントのキソ — React コンポーネントの基本概念(props・state・ライフサイクル)を整理した入門向け解説記事
• Javascript技術書まとめ — JavaScript 関連技術書を用途・レベル別にリストアップした記事。本書を React 入門書として収録
• 【React × TypeScript】ES6での基本的なコンポーネント作成 — TypeScript を用いた React コンポーネントの基本実装を ES6 構文で解説した実践向け記事

学習のヒント

• 2017 年刊行のため後半のビルドツール章(Browserify)は現代環境(Vite/webpack)との対応を意識しながら読む。ツールの操作手順より「なぜバンドリングが必要か」という概念把握を目標にすると現在の環境でも回収できる
• Flux の章は Redux Toolkit や Zustand の前身に当たる概念整理として有効。実装コードは古くなっているが「単方向データフローの論理」は今も設計の土台になるため、現代ライブラリへの橋渡しとして読む
• 前半のコンポーネント基礎・JSX 章は情報の鮮度が比較的高く現在のモダン React にも直結する。ここを確実に固めてから後半のツール群に進む順序が吸収効率を上げる

前提知識

• JavaScript (ES2015/ES6) の基本構文 — アロー関数・分割代入・クラス構文・モジュール(import/export)を読み書きできること
• HTML・CSS の基礎知識 — DOM 構造と CSS セレクタの概念
• Node.js と npm の基本操作 — package.json の読み書きとパッケージのインストール手順

次に読む本

React 公式ドキュメント(react.dev)

本書で学んだコンポーネント概念を Hooks ベースのモダン React(useState / useEffect / useContext)へアップデートするための公式一次情報

Redux Toolkit 公式ドキュメント

本書の Flux 章で習得した単方向データフローを、現在の実務標準である Redux Toolkit の文脈で再解釈する入口として