なぜ、Web アプリケーション開発に React 最適なのか？

ユーザー体験の向上

React の仮想 DOM（Document Object Model）は、ユーザー体験を向上させ、開発者の作業を高速化します。

大幅な時間節約

統合されたコンポーネントの形でのコード再利用により、非常に容易かつ短期間での遂行が可能です。

分かりやすいコード

プログラムフローをたどることなくコードパックされたコンポーネントをレンダリングするため、React を使った作業が非常に簡単になります。

JSX での記述が容易

React Web 開発における JSX 上の作業が容易になります。そのため、JavaScript コードに HTML ビットを追加して、シンプルかつ綺麗なコードで作業できます。

コンポーネントベース構造

React は Component-Based Architecture（CBA）に従います。 CBA は React よりも前から存在していましたが、React がリリースされるまで、MVC（Model-View Controller）に対する CBA の優位性がコミュニティに認識されていませんでした。コンポーネントは再利用可能であるため、アプリケーションに一貫性をもたらし、開発者がコードベースを開発・維持することがより簡単になります。

強力なコミュニティサポート

React は、Facebook、Dropbox、Khan Academy、CodeAcademy、Netflix、Airbnb、PayPal、Walmart、Tesla Motors、IMDb などの優れた企業やスタートアップによって使用されています。

サーバー側のレンダリング – クライント側のレンダリング

React ライブラリ

Material-UI、Ant Design：

UI コンポーネントライブラリです。

Puppeteer：

Chrome Headless Browse の制御のための高水準APIを提供するNodeライブラリです。自動エンドツーエンドテスト実行で使用します。

ESLint：

コードルールのツールで、コード実行前に明らかなバグを検出したり、括弧・スペースの使い方などのスタイルを統一したりします。

Storybook：

UI 開発環境で、コンポーネントを一望できるスタイルガイドのように使用できます。

Jest：

コンポーネントの単体テスト用のツールです。

Axios

クライアントと API の通信をサポートするライブラリです。 Axios を使用すると、リクエスト／応答をインターセプトし、リクエストをキャンセルできます。 JSON データへの自動変換を行います。

Redux

Redux は、React.js が扱う UI の state（状態）を管理をするためのフレームワークです。React では state の管理するデータフローに Flux を提案していますが、Redux は Flux の概念を拡張してより扱いやすく設計されています。
Redux は state を管理するためのライブラリーなので、React 以外にも AngularJS や jQuery などと併せて使用することもできますが、React と使用するのが一番相性がいいです。

ESlint

ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint、JSHint 等があります。

Storybook

Storybook は、プロジェクトの新規メンバーに特に効果的です。または、チーム全体がコンポーネントリストをすばやく簡単に確認できます。ストーリーブックを使用することによって、UI コンポーネントの動作と使用方法を説明できます。コンポーネントは個別に表示され、プロパティーの値、コンポーネントのイベントを見ることができます。アプリと UI コンポーネントのリストは独立しています。