將 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）。
設定您的伺服器或代理伺服器，以便您的 React 應用程式處理 /some-app/ 下的所有請求。

許多基於 React 的框架都是全端框架，可讓您的 React 應用程式利用伺服器。但是，即使您不能或不想在伺服器上執行 JavaScript，您也可以使用相同的方法。在這種情況下，請改在 /some-app/ 提供 HTML/CSS/JS 匯出（next export 輸出，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）的頂部新增以下程式碼

分支

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

如果您的頁面全部內容都被「Hello, world!」取代，則表示一切正常！請繼續閱讀。

注意

第一次將模組化 JavaScript 環境整合到現有專案中可能會讓人卻步，但這是值得的！如果您遇到困難，請嘗試我們的社群資源或 Vite 聊天。

步驟 2：在頁面上的任何位置渲染 React 元件

在上一個步驟中，您將此程式碼放在主要檔案的頂部

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

當然，您實際上並不想清除現有的 HTML 內容！

刪除這段程式碼。

相反地，您可能希望在 HTML 中的特定位置渲染您的 React 元件。開啟您的 HTML 頁面（或產生它的伺服器模板），並為任何標籤新增一個唯一的 id 屬性，例如

<!-- ... somewhere in your html ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->

這讓您可以使用 document.getElementById 找到該 HTML 元素，並將其傳遞給 createRoot，以便您可以在其中渲染您自己的 React 元件

分支

import { createRoot } from 'react-dom/client';

function NavigationBar() {
  // TODO: Actually implement a navigation bar
  return <h1>Hello from React!</h1>;
}

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);

請注意 index.html 中的原始 HTML 內容是如何被保留的，但是您自己的 NavigationBar React 元件現在出現在 HTML 中的 <nav id="navigation"> 內。閱讀 createRoot 使用說明文件以瞭解更多關於在現有 HTML 頁面中渲染 React 元件的資訊。

當您在現有專案中採用 React 時，通常會從小型互動元件（如按鈕）開始，然後逐漸「向上移動」，直到最終您的整個頁面都使用 React 建構。如果您達到這個程度，我們建議您立即遷移到 React 框架以充分利用 React。

在現有的原生行動應用程式中使用 React Native

React Native 也可以逐步整合到現有的原生應用程式中。如果您有現有的 Android（Java 或 Kotlin）或 iOS（Objective-C 或 Swift）原生應用程式，請按照本指南將 React Native 螢幕新增到其中。

上一篇建立新的 React 專案

下一篇編輯器設定