開始使用:最佳化 React 應用程式

想盡可能加快網站速度和存取便利性嗎?您找對地方了!

React 是用於建構 UI 的開放原始碼程式庫 讓您更容易這個學習路徑會介紹 建議使用的生態系統 提高應用程式的可用性

本指南將說明如何開始使用 React 應用程式。 本章節其他指南會介紹最佳化速度的主題,或 React 應用程式的無障礙功能

這種報表有哪些優點?

我們提供眾多內容,說明如何打造快速又可靠的 示範如何建構快速可靠的 React 應用程式。這些指南涵蓋了所有這點 應用程式,其中僅有適用於 Google Cloud 的 探討 React 生態系統

您會學到什麼?

這個學習路徑中的教學課程不會著重於:

  • 如何使用 React
  • React 主要運作原理

需要時,我們會詳細說明這兩種概念,但所有指南都會提供 本節中的程式碼研究室將著重於如何快速建構及 方便存取的 React 網站。因此,React 的基本知識是 必填

建立 React 應用程式

建立 React App (CRA) 是 就能輕鬆開始建構 React 應用程式。提供了預設值 具備許多核心功能 (包括建構系統) 包含模組整合器 (webpack) 和轉譯器 (Babel)。

在指令列殼層中,只需執行下列指令即可建立新的 應用程式:

npx create-react-app app-name
敬上

指令執行完畢後,您可以前往並執行應用程式 執行下列指令:

cd new-app
npm start

以下嵌入顯示了新 Pod 的目錄結構和實際網頁 自行啟動的 CRA 應用程式。

CRA 會使用多個設定檔和建構指令碼來設定 包括 用於測試的 Jest 設定。為了簡化 使用者,這些檔案會隱藏,您必須從 CRA 退出才能使用。這項服務 請盡可能避免使用排除功能,因為這樣 這些設定檔做為您自己的原始碼,很不容易 因此,這些權限會歸入同一個角色 以便理解及管理

新 CRA 應用程式的目錄結構,僅包含 您其實必須進行修改,才能順利使用應用程式。 CRA 說明文件 詳細說明。

後續步驟

現在您已經學會如何開始建構 React 應用程式了。 想提升應用程式的效能和無障礙功能嗎? 以下學習路徑: