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

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

React 是開放原始碼程式庫,可讓您輕鬆建構 UI。這個學習路徑會介紹生態系統中的各種 API 和工具,您應考慮使用,以提升應用程式的效能和可用性。

本指南將說明如何開始使用 React 應用程式。本節所有其他指南都會說明要提升 React 應用程式速度或無障礙程度的主題。

這種報表有哪些優點?

我們提供的許多內容都會說明如何建構快速可靠的應用程式,但這些內容其實不多,因此不會說明如何建構快速可靠的 React 應用程式。這些指南從 React 應用程式的角度探討這一切,其中只提到 React 生態系統專屬的程式庫、API 和功能。

您會學到什麼?

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

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

如有需要,我們會視需要介紹這兩個概念,但本節中的所有指南和程式碼研究室都會著重於如何建構快速且可存取的 React 網站。因此,必須提供 React 的基本知識

建立 React 應用程式

建立 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 說明文件會提供詳細說明。

後續步驟

現在您已經瞭解如何開始建構 React 應用程式,接著可以透過本學習路徑中的所有指南,瞭解如何改善應用程式的效能和無障礙功能: