React サイトを可能な限り高速かつアクセスしやすいものにするには、ここが一番いいところです！
React は、UI の作成を容易にするオープンソース ライブラリです。この学習パスでは、アプリケーションのパフォーマンスとユーザビリティを改善するために使用を検討すべき、エコシステム内のさまざまな API とツールについて説明します。
このガイドでは、React アプリケーションを起動して実行する方法について説明します。このセクションの他のガイドでは、React アプリの速度やユーザー補助を最適化するためのトピックを取り上げます。
メリット
高速で信頼性の高いアプリケーションの作成方法を説明するコンテンツはたくさんありますが、高速で信頼性の高い React アプリケーションを作成する方法を紹介するコンテンツは多くありません。このガイドでは、React アプリの観点から、React エコシステムに固有のライブラリ、API、機能のみについて説明します。
学習内容
この学習プログラムのチュートリアルでは、次の項目は取り上げません。
- React の使用方法
- React の仕組み
この 2 つのコンセプトは必要に応じて触れますが、このセクションのすべてのガイドと Codelab では、高速でアクセスしやすい React サイトを構築する方法に重点を置いています。このため、React の基本的な知識が必要です。
React アプリを作成する
React アプリを作成する（CRA）は、React アプリケーションの構築を開始する最も簡単な方法です。モジュール バンドラ（webpack）やトランスパイラ（Babel）を含むビルドシステムなど、多くのコア機能が組み込まれたデフォルト セットアップが用意されています。
コマンドライン シェルでは、以下を実行するだけで新しいアプリケーションを作成できます。
npx create-react-app app-name
コマンドの実行が完了したら、次のコマンドを使用してアプリに移動して実行できます。
cd new-app
npm start
次の埋め込みは、新しくブートストラップされた CRA アプリケーションのディレクトリ構造と実際のウェブページを示しています。
CRA は複数の構成ファイルとビルド スクリプトを使用して、Webpack と Babel ビルドプロセスをセットアップします。これには、テスト用のベース Jest セットアップが含まれています。ユーザーが簡単にアクセスできるようにするため、これらのファイルは非表示になり、CRA から排除するまでアクセスできません。取り出しはできる限り避けてください。こうした構成ファイルをすべて独自のソースコードとして扱うことになり、管理が難しくなることがあります。
新しい CRA アプリケーションのディレクトリ構造には、アプリケーションで実際に変更する必要があるファイルのみが含まれています。詳しくは、CRA ドキュメントをご覧ください。
次のステップ
Create React アプリの作成を開始する方法を学習しました。次に、この学習プログラムのガイドを使用して、アプリのパフォーマンスとアクセシビリティを改善する方法を学びましょう。