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

想讓 React 網站盡可能快速且易於存取嗎?你來對地方了!

Houssein Djirdeh
Houssein Djirdeh

React 是開放原始碼程式庫,可讓您更輕鬆地建構 UI。本學習路徑將介紹生態系統中的不同 API 和工具,建議您考慮使用這些 API 和工具,提升應用程式的效能和可用性。

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

這種報表有哪些優點?

網路上有許多內容說明如何建構快速可靠的應用程式,但很少有內容說明如何建構快速可靠的 React 應用程式。這些指南從 React 應用程式的角度涵蓋所有內容,其中僅提及 React 生態系統專屬的程式庫、API 和功能。

您會學到哪些內容?

本學習路徑中的教學課程不著重於:

  • 如何使用 React
  • React 的運作原理

雖然我們會在必要時提及這兩個概念,但本節的所有指南和程式碼實驗室都會著重於如何建構快速且無障礙的 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,請參閱本學習路徑中的所有指南,瞭解如何提升應用程式的效能和無障礙程度: