将 React 添加到现有项目

如果你想为你的现有项目添加一些交互性，你不需要用 React 重写它。将 React 添加到你的现有技术栈中，并在任何地方渲染交互式 React 组件。

注意

你需要安装 Node.js 用于本地开发。 虽然你可以在线尝试 React 或使用一个简单的 HTML 页面，但实际上，你想要用于开发的大多数 JavaScript 工具都需要 Node.js。

在你的现有网站中使用 React 作为整个子路由

假设你有一个现有的 Web 应用程序位于 example.com，它使用另一种服务器技术（如 Rails）构建，并且你想使用 React 实现所有以 example.com/some-app/ 开头的路由。

我们建议以下设置

使用其中一个基于 React 的框架构建你的应用程序的 React 部分。
在你的框架配置中指定 /some-app 作为基本路径。 （具体方法如下：Next.js、Gatsby）。
配置你的服务器或代理，以便所有在 /some-app/ 下的请求都由你的 React 应用程序处理。

许多基于 React 的框架都是全栈的，让你的 React 应用程序能够利用服务器。但是，即使你无法或不想在服务器上运行 JavaScript，也可以使用相同的方法。在这种情况下，请在 /some-app/ 下服务 HTML/CSS/JS 导出（next export 输出用于 Next.js，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 项目

下一步编辑器设置