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 アプリケーションのディレクトリ構造と実際のウェブページを示しています。
CRA が webpack と Babel のビルドプロセスを設定するために使用する構成ファイルとビルド スクリプトは複数あります。これには、テスト用のベース Jest 設定が含まれます。ユーザーが簡単に操作できるように、これらのファイルは非表示になっており、CRA から取り出すまでアクセスできません。可能な限り、イジェクトは避けることをおすすめします。イジェクトすると、これらの構成ファイルがすべて独自のソースコードとして扱われるため、管理が難しくなる可能性があります。
新しい CRA アプリケーションのディレクトリ構造には、アプリケーションを操作するために実際に変更する必要があるファイルのみが含まれています。詳細については、CRA のドキュメントをご覧ください。
次のステップ
Create React App の作成方法を理解したら、この学習プログラムのすべてのガイドで、アプリのパフォーマンスとユーザー補助を改善する方法を学びましょう。