将React添加到现有项目中

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

注意

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

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

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

我们推荐如下设置方法：

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

许多基于React的框架是全栈的，并允许你的React应用程序利用服务器。但是，即使你不能或不想在服务器上运行JavaScript，你也可以使用相同的方法。在这种情况下，请将HTML/CSS/JS导出（next export 输出用于Next.js，Gatsby的默认设置）服务于/some-app/。

在现有页面中使用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项目下一页编辑器设置