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