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

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

Houssein Djirdeh
Houssein Djirdeh

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

本指南將說明如何啟用及執行 React 應用程式。本節的其他指南都會涵蓋各種主題,協助您改善 React 應用程式的速度或無障礙性。

這種報表有哪些優點?

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

您會學到哪些內容?

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

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

雖然我們會在必要時觸及這兩個概念,但本節的所有指南和程式碼研究室都會著重於如何建構快速且易於存取的 React 網站。因此,您必須具備 React 的基本知識

Create React App

Create React App (CRA) 是開始建構 React 應用程式最簡單的方式。它提供預設設定,其中內建多項核心功能,包括包含模組 bundler (webpack) 和 transpiler (Babel) 的建構系統。

在指令列 Shell 上,您只需執行下列指令即可建立新的應用程式:

npx create-react-app app-name

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

cd new-app
npm start

以下嵌入項目顯示新啟動過的 CRA 應用程式,其中包含目錄結構和實際網頁。

CRA 會使用多個設定檔和建構指令碼來設定 webpack 和 Babel 建構程序,其中包含用於測試的基礎 Jest 設定。為方便使用者操作,這些檔案會隱藏,且必須先從 CRA 中取出才能存取。盡可能避免彈出,因為這表示您必須將所有設定檔視為自己的原始碼,這可能會變得難以管理。

新 CRA 應用程式的目錄結構只包含您實際需要修改的檔案,以便處理應用程式。CRA 說明文件會詳細說明這項功能。

後續步驟

您現在已瞭解如何開始建構 Create React App,請參閱這個學習路徑中的所有指南,瞭解如何改善應用程式的效能和無障礙功能: