スタートガイド: React アプリを最適化する

React サイトをできるだけ高速でアクセスしやすいものにしたいですか?ここに来ました!

React は、UI の構築を容易にするオープンソース ライブラリです。この学習パスでは、アプリケーションのパフォーマンスとユーザビリティを向上させるために使用を検討すべき、エコシステム内のさまざまな API とツールについて説明します。

このガイドでは、React アプリケーションを使い始める方法について説明します。このセクションの他のガイドでは、React アプリの速度やユーザー補助を最適化するトピックについて説明します。

なぜこれが有用なのでしょうか。

高速で信頼性の高いアプリケーションを構築する方法に関するコンテンツはたくさんありますが、高速で信頼性の高い React アプリケーションを構築する方法に関するコンテンツは多くありません。これらのガイドでは、React アプリの視点から、React エコシステムに固有のライブラリ、API、機能のみについて説明しています。

学習内容

この学習プログラムのチュートリアルでは、以下に焦点を当てていません

  • React の使用方法
  • React の仕組み

これらのコンセプトの両方については、必要に応じて説明しますが、このセクションのガイドと Codelab では、高速でアクセスしやすい React サイトを作成する方法に重点を置いています。そのため、React に関する基本的な知識が必要です

Create React App

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 App の作成を開始する方法がわかりましたので、このラーニング パスのすべてのガイドで、アプリのパフォーマンスとアクセシビリティを改善する方法を学びましょう。