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

React サイトを可能な限り高速でアクセスしやすいものにするには、ここに来ました!

React は UI の構築を可能にするオープンソース ライブラリです。 簡単になります。この学習プログラムでは、Google Cloud の各種 API とツールを パフォーマンスと可用性を向上させるために 使用を検討すべきエコシステムを アプリのユーザビリティを向上させることができます

このガイドでは、React アプリケーションを起動して実行する方法について説明します。 このセクションの他のガイドでは、速度を最適化したり、 React アプリのユーザー補助機能です。

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

高速で信頼性の高いアプリの構築方法を説明するコンテンツが 高速かつ信頼性の高い React を構築する方法を示す多くのコンテンツは 説明します。これらのガイドでは、React の観点から API や機能だけを使用するアプリ React エコシステムについて言及しました。

学習内容

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

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

どちらのコンセプトについても必要に応じて触れますが、 このセクションの Codelab では、その代わりに、Google Cloud で基盤となる 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 アプリの作成を開始する方法がわかったので、次は を使用して、アプリのパフォーマンスとユーザー補助機能を改善できます。 この学習プログラム: