共用方式為

React 概觀

什麼是 React JS？

React 是用於建置前端使用者介面的開放原始碼 JavaScript 程式庫。 與其他提供完整應用程式框架的 JavaScript 函式庫不同，React 專注於 透過封裝 的元件單元來建立應用程式視圖，這些元件負責維護狀態並產生 UI 元素。 只要在網頁上放置個別元件或巢狀化元件階層，即可建立複雜 UI。

React 元件通常會以 JavaScript 與 JSX (JavaScript XML) 撰寫。JSX 是 JavaScript 的延伸，看起來很像 HTML，但具有一些語法功能，可協助您更輕鬆地執行一般工作，例如註冊 UI 元素的事件處理常式。 React 元件實作 渲染 方法，回傳代表元件使用者介面的 JSX。 在 Web 應用程式中，元件傳回的 JSX 程式碼會轉譯成在瀏覽器中呈現的瀏覽器相容 HTML。

這很重要

2025 年 2 月，React 團隊 宣布 新應用程式已棄用 Create React App（CRA）。 小組建議現有的應用程式移轉至像是 Next.js 或 React 路由器等架構，或移轉至 Vite、Parcel 或 RSBuild 等建置工具。

React 能在 Windows 上運作嗎？

是。 Windows 支援兩種不同的環境來開發 React 應用程式：

React 有哪些用途？

Windows 支援多種 React 開發者情境，包括：

  • Basic 網頁應用：如果你是 React 新手，主要想學習如何用 React 建置基礎網頁應用程式，我們建議你使用 Windows 上的 vite 前端工具建立一個 React 應用程式。 如果你打算開發一個會部署到生產環境的網頁應用程式，建議考慮在 Windows Subsystem for Linux （WSL） 上使用 vite 前端工具建立一個 React 應用程式，這樣可以提升效能速度、系統呼叫相容性，以及本地開發環境與部署環境（通常是 Linux 伺服器）之間的一致性。

  • Single-Page 應用程式（SPA）：這類網站與使用者互動的方式是將伺服器的新資料動態地重寫當前網頁，而不是透過瀏覽器預設的方式載入整個新頁面。 如果你想建立一個靜態內容導向的 SPA 網站，我們建議 在 WSL 上安裝 Gatsby。 如果你想建立一個伺服器渲染的 SPA 網站，並搭配 Node.js 後端，我們建議 在 WSL 上安裝 Next.js。 （不過 Next.js 現在也提供 靜態檔案服務。）

  • Native Desktop Apps：React Native for Desktop + macOS 讓你能以 JavaScript 建立原生桌面應用程式，並能在各種桌上型電腦、筆記型電腦、平板、Xbox及Mixed Reality裝置上運行。 它支援 Windows SDK 以及 macOS SDK。

  • 原生行動應用程式： React Native 是一種跨平台方式，可使用 JavaScript 製作 Android 與 iOS 應用程式，並渲染成原生平台的 UI 程式碼。 React Native 的主要安裝方式有兩種：Expo CLI 與 React Native CLI。 StackOverflow 上有很好的比較。 Expo 有 iOS 與 Android 版行動裝置的用戶端應用程式，可用於執行及測試您的應用程式。 關於使用 Windows、React Native 和 Expo CLI 開發 Android 應用程式的說明，請參見 React Native for Android 開發 on Windows。

安裝選項

您可以透過數種不同方式安裝 React，以及最適合您使用案例情境的整合式工具鏈。 以下幾種是最常見的方法。

React 工具

雖然在純文字編輯器中撰寫簡單的 React 元件是不錯的 React 入門方式，但以這種方式產生的程式碼相當龐大，難以維護及部署，速度又很慢。 一些常見的任務是生產環境中的應用程式需要執行的。 這些工作由應用程式視為相依性的其他 JavaScript 架構進行處理。 這些工作包括：

  • 編譯 - JSX 是 React 應用程式常用的語言，但瀏覽器無法直接處理這種語法。 必須先將程式碼編譯成標準 JavaScript 語法，並針對不同瀏覽器進行自訂。 Babel 是一個支援 JSX 的編譯器範例。
  • 打包——由於現代網頁應用需重視效能，應用程式的 JavaScript 必須只包含所需的程式碼，並盡量合併成最少的檔案數量。 像 webpack 這樣的捆綁工具會幫你完成這項工作。
  • 套件管理 - 套件管理器讓你輕鬆將第三方套件的功能納入應用程式，包括更新套件及管理相依性。 常用的套件管理器包括 Yarn 和 npm。

協助您創造、建置及部署應用程式的架構套件稱為「工具鏈」。 一個容易設置的 React 開發環境是使用 Vite 這套工具鏈，它可以為你生成一個簡單的單頁應用程式。 使用 Vite 唯一需要的設定是 Node.js。

  • 為了進行 Windows 開發，請依照指示在 WSL 上安裝 Node.js 或在 Windows 上安裝 Node.js。

React Native 元件目錄

可在 React Native 應用程式中使用的元件包括下列項目：

  • 核心元件：在 React Native 架構中開發和受到支援的元件。
  • 社群元件：由社群開發及維護的元件。
  • 原生元件：您使用平台原生程式碼自行撰寫的元件，經過註冊後可透過 React Native 存取。

React Native 目錄提供一份可依目標平台篩選的元件函式庫清單。

全端 React 工具鏈選項

React 是程式庫而非架構，因此建立較複雜的應用程式時可能需要使用額外的工具。 除了 React，建議您也考慮使用下列項目：

  • 套件管理器：React 兩個熱門套件管理器是 npm （隨 NodeJS 附帶）和 Yarn。 兩者都支援可安裝的、受到妥善維護的套件庫。
  • React Router：一套導航元件，能幫助你為網頁應用程式設置可書籤的網址，或是 React Native 中可組合的導航方式。 React 實際上只用於管理狀態以及將狀態轉譯為 DOM，因此建立 React 應用程式時通常需要使用 React Router 之類的路由庫。
  • Redux：一個可預測的狀態容器，有助於資料流架構。 在進行更進階的 React 開發作業前，您可能不需要使用這項工具。 如同 Redux 的創作者 Dan Abramov 所說：「除非遇到基本 React 的問題，否則不要使用 Redux。」
  • Webpack：一款建置工具，讓你編譯 JavaScript 模組，也稱為模組捆綁器。 Webpack 處理應用程式時，會在內部建立相依性關係圖，標示出專案需要的每個模組，並產生一或多個套件組合。
  • Uglify：一套 JavaScript 解析器、壓縮器、壓縮器與美化工具包。
  • Babel：一款 JavaScript 編譯器，主要用於將 ECMAScript 2015+ 程式碼轉換為在現有及舊版瀏覽器或環境中向下相容的 JavaScript 版本。 使用 babel-preset-env 也很有幫助，這樣你就不用微觀管理語法轉換或瀏覽器多重填充，還能定義要支援哪些網路瀏覽器。
  • ESLint：一套用來識別並回報 JavaScript 程式碼中模式的工具，幫助你使程式碼更一致並避免錯誤。
  • Enzyme：一個 React 的 JavaScript 測試工具，讓你更容易測試 React 元件的輸出。
  • Jest：一個與 Babel 協同運作的測試框架，幫助在 React 應用程式中撰寫慣用 JavaScript 測試。
  • Mocha：一個可在 Node.js 及瀏覽器中執行的測試框架，協助非同步測試、報告，並將未捕捉的例外映射到正確的測試案例。

React 課程和教學

以下列出部分 React 和建置範例應用程式的推薦學習資源：

其他資源

  • Last updated on