共用方式為

React 概觀

  • 發行項

什麼是 React JS？

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

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

可以在 Windows 上使用 React 嗎？

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

React 有哪些用途？

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

  • 基本 Web 應用程式：如果您剛開始接觸 React，且主要目的是瞭解如何使用 React 建置基本 Web 應用程式，建議您直接在 Windows 上安裝 create-react-app (英文)。 如果您打算建置要部署於實際執行環境的 Web 應用程式，建議您考慮在 Windows 子系統 Linux 版 (WSL) 上安裝 create-react-app (英文)，以提升效能速度、系統呼叫相容性，以及本機開發環境和部署環境 (通常是 Linux 伺服器) 之間的一致性。

  • 單頁應用程式 (SPA)：與使用者互動時，這些網站會使用伺服器的新資料動態重寫目前的網頁，而非使用載入整個新頁面的瀏覽器預設。 如果您想建置靜態內容導向的 SPA 網站，建議在 WSL 上安裝 Gatsby (英文)。 如果您想使用 Node.js 後端建置伺服器轉譯 SPA 網站，建議您在 WSL 上安裝 Next.js (英文)， 雖然 Next.js 現在也具備靜態檔案提供 (英文)。

  • 原生傳統型應用程式：適用於 Windows 與 macOS 的 React Native (英文) 可讓您使用 JavaScript 建置原生傳統型應用程式，並於各種類型的桌上型電腦、膝上型電腦、平板電腦、Xbox 和混合實境裝置上執行。 React Native 同時支援 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 應用程式，請參閱在 Windows 上使用 React Native 執行 Android 開發作業 (英文)。

安裝選項

您可以透過數種不同方式安裝 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 (英文)：create-react-app 套件中內建的測試架構，可協助您撰寫慣用 JavaScript 測試。
  • Mocha (英文)：在 Node.js 和瀏覽器中執行的測試架構，可協助進行非同步測試、報告，以及將未攔截到的例外狀況對應至正確的測試案例。

React 課程和教學

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

其他資源