共用方式為

React 概觀

什麼是 React JS？

React 是用於建置前端使用者介面的開放原始碼 JavaScript 程式庫。 React 與其他提供完整應用程式架構的 JavaScript 程式庫不同，僅著重於透過維護狀態和產生 UI 元素的封裝單元 (稱為元件) 建立應用程式檢視。 只要在網頁上放置個別元件或巢狀化元件階層，即可建立複雜 UI。

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

這很重要

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

可以在 Windows 上使用 React 嗎？

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

React 有哪些用途？

Windows 為 React 開發人員提供多種支援情境，包括：

安裝選項

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

React 工具

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

  • 編譯：JSX 是 React 應用程式常用的語言，但瀏覽器無法直接處理這種語法， 必須先將程式碼編譯成標準 JavaScript 語法，並針對不同瀏覽器進行自訂。 Babel (英文) 是其中一種支援 JSX 的編譯器。
  • 統合：效能對現代 Web 應用程式而言很重要，因此必須讓應用程式的 JavaScript 盡可能只包含應用程式需要的程式碼，並儘量減少合併而成的檔案數量。 像 webpack (英文) 這類的搭配程式可以為您執行這項工作。
  • 封裝管理：封裝管理員可讓您在應用程式中輕鬆納入第三方封裝的功能，包括更新作業和相依性管理。 常用的封裝管理員包括 Yarn (英文) 與 npm (英文)。

協助您創造、建置及部署應用程式的架構套件稱為「工具鏈」。 使用此工具鏈設置 react 開發環境非常簡單，Vite 能為您快速生成一個簡單的單頁應用程式。 使用 Vite 時，只需設定 Node.js。

React Native 元件目錄

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

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

React Native Directory (英文) 提供可依據目標平台進行篩選的元件程式庫清單。

全端 React 工具鏈選項

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

  • 套件管理器：兩個熱門的 React 套件管理器包括 npm (隨 NodeJS 一起提供) 和 yarn。 兩者都支援可安裝的、受到妥善維護的套件庫。
  • React Router (英文)：導覽元件的集合，可協助您處理 Web 應用程式的可加入書籤 URL、在 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 非常有用，不僅可以免去逐一管理語法轉換或瀏覽器 polyfill 的麻煩，還能定義支援的瀏覽器。
  • ESLint (英文)：這項工具用於識別和報告在 JavaScript 程式碼中找到的模式，有助於讓程式碼更加一致，並避免出現 Bug。
  • Enzyme (英文)：適用於 React 的 JavaScript 測試公用程式，可協助您更輕鬆地測試 React 元件的輸出。
  • Jest：與 Babel 搭配運作的測試架構，可協助在 React 應用程式中撰寫慣用的 JavaScript 測試。
  • Mocha (英文)：在 Node.js 和瀏覽器中執行的測試架構，可協助進行非同步測試、報告，以及將未攔截到的例外狀況對應至正確的測試案例。

React 課程和教學

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

其他資源