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 應用程式的環境:

如需瞭解如何判斷要使用哪種環境,請參閱我應該在 Windows 還是 Windows 子系統 Linux 版上安裝? (英文)

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 (英文)。

協助您創造、建置及部署應用程式的架構套件稱為「工具鏈」。 create-react-app (英文) 是初學者也能輕鬆使用的工具鏈,可以產生簡單的單頁應用程式。 使用 create-react-app 時,只需設定 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 和建置範例應用程式的推薦學習資源:

其他資源