将 React 添加到现有项目

React开始-简介

将 React 添加到现有项目中

如果只是想为现有项目添加一些交互功能，无需使用 React 将其完全重写。你可以将 React 集成到现有的技术栈中，并在任何位置渲染交互式的 React 组件。

你需要安装 Node.js 来进行本地开发。虽然你可以使用在线演练场或简单的 HTML 页面来尝试 React，但大多数实际用于开发的 JavaScript 工具都需要 Node.js 环境。

在现有网站的子路由中使用 React {/using-react-for-an-entire-subroute-of-your-existing-website/}

假设你的 Web 应用（例如使用 Rails 构建）部署在 example.com，但你希望将 React 项目部署在 example.com/some-app/ 下。

以下是推荐的配置方式：

使用一个基于 React 的框架来构建 应用的 React 部分。
在框架配置中将 /some-app 设置为基本路径（这里提供了 Next.js 和 Gatsby 的配置示例）。
配置服务器或代理，确保所有指向 /some-app/ 的请求都由 React 应用处理。

这样可以确保应用的 React 部分能够受益于这些框架内置的最佳实践。

许多基于 React 的框架都是全栈的，这能让你的 React 应用充分利用服务器能力。即使你无法或不想在服务器上运行 JavaScript，也可以采用相同的方法。在这种情况下，可以将导出的 HTML/CSS/JS 文件（Next.js 的 next export 输出或 Gatsby 的默认导出）部署到 /some-app/ 路径下。

在现有页面的一部分中使用 React {/using-react-for-a-part-of-your-existing-page/}

假设你有一个使用其他技术栈（无论是 Rails 这样的服务端技术，还是 Backbone 这样的客户端技术）构建的现有页面，并且想在该页面的某个位置渲染交互式的 React 组件。这是集成 React 的常见方式——事实上，这也是多年来 Meta 内部大多数情况下使用 React 的方式！

你可以分两步进行：

配置 JavaScript 环境，以便使用 JSX 语法、import 和 export 语法将代码拆分为模块，并从 npm 包注册表中使用包（例如 React）。
在需要渲染的位置使用 React 组件。

具体方法取决于你现有页面的配置，接下来将详细展开说明。

步骤 1：配置模块化的 JavaScript 环境 {/step-1-set-up-a-modular-javascript-environment/}

模块化的 JavaScript 环境可以让你在独立文件中编写 React 组件，而不是将代码全部写在同一个文件中。它还能让你使用其他开发者在 npm 注册表上发布的优秀包，包括 React！具体实现方式取决于你现有的配置：

如果你的应用已经使用 import 语句来拆分文件，请尝试利用现有配置。检查在你的 JavaScript 代码中编写 <div /> 是否会导致语法错误。如果有错误，你可能需要使用 Babel 转换 JavaScript 代码，并启用 Babel React preset 来支持 JSX 语法。
如果你的应用没有用于编译 JavaScript 模块的配置，请使用 Vite 进行配置。Vite 社区维护了许多与后端框架（包括 Rails、Django 和 Laravel）的集成项目。如果你的后端框架未在列表中，请按照此指南手动将 Vite 构建集成到你的后端项目中。

若想验证配置是否成功，可在项目文件夹中运行以下命令：

npm install react react-dom

然后在你的 JavaScript 主文件（可能命名为 index.js 或 main.js）顶部添加以下代码：

html public/index.html hidden 复制代码

<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <!-- 你现有的页面内容（在此示例中，它将被替换） -->
    <div id="root"></div>
  </body>
</html>

js src/index.js active 复制代码

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

// 清除现有的 HTML 内容
document.body.innerHTML = '<div id="app"></div>';

// 渲染你的 React 组件
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

如果页面全部内容被替换为“Hello, world!”，说明一切正常！请继续阅读下文。

首次将模块化 JavaScript 环境集成到现有项目可能会让人感到棘手，但这是值得的！如果遇到困难，请尝试我们的社区资源或 Vite Chat 寻求帮助。

步骤 2：在页面的任意位置渲染 React 组件 {/step-2-render-react-components-anywhere-on-the-page/}

在上一步中，此代码被放置在主文件的顶部：

js 复制代码

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

// 清除现有的 HTML 内容
document.body.innerHTML = '<div id="app"></div>';

// 渲染你的 React 组件
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

当然，你实际上并不想清除现有的 HTML 内容！

那么请删除此代码。

相反，你可能希望在 HTML 中的特定位置渲染 React 组件。打开你的 HTML 页面（或生成它的服务端模板），并在任意一个标签上添加一个唯一的 id 属性，例如：

html 复制代码

<!-- ... 你的 HTML 代码某处 ... -->
<nav id="navigation"></nav>
<!-- ... 其他 HTML 代码 ... -->

这样，你可以使用 document.getElementById 查找到该 HTML 元素，并将其传递给 createRoot，以便在其中渲染你自己的 React 组件：

html public/index.html 复制代码

<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <p>This paragraph is a part of HTML.</p>
    <nav id="navigation"></nav>
    <p>This paragraph is also a part of HTML.</p>
  </body>
</html>

js src/index.js active 复制代码

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

function NavigationBar() {
  // TODO: 实际实现一个导航栏
  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 {/using-react-native-in-an-existing-native-mobile-app/}

React Native 也可以逐步集成到现有原生应用中。如果你已经有现有的 Android（Java 或 Kotlin）或 iOS（Objective-C 或 Swift）原生应用，请按照本指南将 React Native 添加到其中。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。