將 React 加入現有專案
如果您想在現有專案中加入一些互動性，您不需要用 React 重寫整個專案。只需將 React 加入您現有的技術堆疊中，並在任何地方渲染互動式的 React 元件。
注意
您需要安裝 Node.js以進行本地開發。 雖然您可以 線上試用 React或使用簡單的 HTML 頁面，但實際上您開發時想使用的大多數 JavaScript 工具都需要 Node.js。
為現有網站的整個子路由使用 React
假設您在 example.com有一個使用其他伺服器技術（例如 Rails）構建的現有網路應用程式，並且您希望完全使用 React 來實作所有以example.com/some-app/開頭的路由。
以下是我們建議的設定方式：
- 使用其中一種 來 基於 React 的框架構建您應用程式的 React 部分。
- 在您框架的配置中，將
/some-app指定為基礎路徑（設定方式：Next.js、Gatsby）。 - 配置您的伺服器或代理，使所有位於
/some-app/下的請求都由您的 React 應用程式處理。
這確保了您應用程式的 React 部分能夠受益於這些框架內建的最佳實踐。
許多基於 React 的框架是全端框架，讓您的 React 應用程式能夠利用伺服器。然而，即使您無法或不希望在伺服器上執行 JavaScript，也可以使用相同的方法。在這種情況下，請改為在next export 輸出提供 HTML/CSS/JS 匯出（Next.js 的/some-app/，Gatsby 的預設輸出）。
為現有頁面的一部分使用 React
假設您有一個使用其他技術（伺服器端技術如 Rails，或客戶端技術如 Backbone）構建的現有頁面，並且您想在該頁面的某處渲染互動式 React 元件。這是整合 React 的常見方式——事實上，Meta 多年來大多數 React 的使用方式就是如此！
您可以分兩步完成：
- 設定一個 JavaScript 環境，讓您能夠使用JSX 語法、使用 import/export 語法將程式碼拆分為模組，並從 npm套件註冊表使用套件（例如 React）。
- 在頁面上您希望看到的位置渲染您的 React 元件。
具體方法取決於您現有的頁面設定，因此讓我們詳細探討一下。
步驟 1：設定模組化 JavaScript 環境
模組化 JavaScript 環境讓您可以在單獨的檔案中編寫 React 元件，而不是將所有程式碼寫在一個檔案中。它還允許您使用其他開發者在npm註冊表上發布的所有優秀套件——包括 React 本身！具體做法取決於您現有的設定：
- 如果你的應用程式已經使用
import語句分割成多個檔案，請嘗試使用你現有的設定。檢查在你的 JS 程式碼中撰寫<div />是否會導致語法錯誤。如果會導致語法錯誤，你可能需要 使用 Babel 轉換你的 JavaScript 程式碼，並啟用 Babel React 預設設定才能使用 JSX。 - 如果你的應用程式沒有現有的編譯 JavaScript 模組設定，請使用 Vite進行設定。Vite 社群維護了許多與後端框架的整合，包括 Rails、Django 和 Laravel。如果你的後端框架不在清單中，請遵循此指南手動將 Vite 建置與你的後端整合。
要檢查你的設定是否正常運作，請在你的專案資料夾中執行此命令：
npm install react react-dom然後在你的主要 JavaScript 檔案（可能名為 index.js 或 main.js）頂部加入以下幾行程式碼：
如果你的整個頁面內容都被「Hello, world!」取代，表示一切正常！請繼續閱讀。
步驟 2：在頁面上的任何位置渲染 React 元件
在上一步中，你將以下程式碼放在主要檔案的頂部：
當然，你實際上並不想清除現有的 HTML 內容！
刪除此程式碼。
相反地，你可能希望在 HTML 中的特定位置渲染你的 React 元件。開啟你的 HTML 頁面（或產生它的伺服器模板），並在任何標籤上新增一個唯一的id 屬性，例如：
這讓你可以使用 document.getElementById找到該 HTML 元素，並將其傳遞給createRoot，以便在內部渲染你自己的 React 元件：
請注意，來自 index.html的原始 HTML 內容被保留了下來，但你自己的NavigationBarReact 元件現在出現在你 HTML 中的<nav id="navigation"> 內部。閱讀 createRoot 使用文件以了解更多關於在現有 HTML 頁面內渲染 React 元件的資訊。
當你在現有專案中採用 React 時，通常會從小型互動元件（例如按鈕）開始，然後逐漸「向上移動」，直到最終整個頁面都由 React 建構。如果你達到這一點，我們建議在之後立即遷移到React 框架，以充分利用 React。
在現有的原生行動應用程式中使用 React Native
React Native也可以逐步整合到現有的原生應用程式中。如果你有現有的 Android（Java 或 Kotlin）或 iOS（Objective-C 或 Swift）原生應用程式，請遵循此指南為其新增一個 React Native 畫面。