向现有项目添加 React

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

为现有网站的整个子路由使用 React

假设你在 example.com有一个使用其他服务器技术（如 Rails）构建的现有 Web 应用，并且你希望完全使用 React 来实现所有以example.com/some-app/开头的路由。

以下是我们推荐的设置方法：

1. 使用一个基于 React 的框架来构建你应用的 React 部分。
2. 在你的框架配置中，将/some-app指定为基础路径（配置方法：Next.js、Gatsby）。
3. 配置你的服务器或代理，使所有位于 /some-app/下的请求都由你的 React 应用处理。

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

许多基于 React 的框架是全栈的，能让你的 React 应用利用服务器端能力。然而，即使你无法或不想在服务器上运行 JavaScript，也可以采用相同的方法。在这种情况下，改为在next export 输出，Gatsby 的默认输出）。/some-app/js 的

为现有页面的某个部分使用 React

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

你可以分两步完成：

1. 设置一个 JavaScript 环境，该环境允许你使用JSX 语法，使用 import/export 语法将代码拆分为模块，并使用来自 npm包注册表的包（例如 React）。
2. 在页面上你希望显示的位置渲染你的 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 屏幕。