React作为主流的前端框架，很多时候不需要从零搭建完整项目，也可以和现有HTML页面集成，实现局部功能升级或者渐进式改造，这种方式适合老项目迭代或者轻量功能开发。
集成前的环境准备
不需要安装完整的React脚手架，只需要准备两个核心CDN依赖即可，分别是React核心库和ReactDOM渲染库，直接在HTML页面中通过<script>标签引入。如果需要使用JSX语法，还需要引入Babel转换库，用来把JSX代码转成浏览器可识别的JavaScript代码。
基础集成步骤
1. 引入核心依赖
在HTML的<head>或者<body>末尾添加以下引入代码，注意顺序不要颠倒，ReactDOM依赖需要在React核心库之后引入。
<!-- 引入React核心库 --> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <!-- 引入ReactDOM渲染库 --> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- 引入Babel转换库，支持JSX语法 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
2. 准备挂载容器
在HTML的<body>中添加一个用于挂载React组件的容器元素，通常是一个div，需要设置唯一的id，方便后续定位。
<div id="react-root"></div>
3. 编写React组件并挂载
使用<script type="text/babel">标签包裹JSX代码，这样Babel会自动转换其中的JSX语法，然后调用ReactDOM的createRoot方法创建根节点，再通过render方法把组件渲染到容器中。
// 定义简单的React函数组件
function HelloReact() {
return (
<div>
<h1>欢迎使用React</h1>
<p>这是嵌入到HTML页面的React组件</p>
</div>
);
}
// 获取挂载容器
const container = document.getElementById('react-root');
// 创建React根节点
const root = ReactDOM.createRoot(container);
// 渲染组件到容器中
root.render(<HelloReact />);集成过程中的注意事项
- 如果使用JSX语法，<script>标签的type必须设置为text/babel，否则浏览器无法识别JSX语法会直接报错
- React 18版本之后不再使用ReactDOM.render方法，而是改用createRoot的写法，旧版本的写法在新版本中会出现警告
- CDN引入的React是开发版本，包含完整的警告提示，上线时建议替换为生产版本，减小文件体积
- 如果需要在React组件中使用HTML页面的全局变量，可以直接通过window对象访问，不需要额外配置
复杂场景集成示例
如果需要集成多个独立的React组件到同一个HTML页面，只需要准备多个挂载容器，分别创建根节点渲染即可，各个组件之间状态互不干扰。
// 第一个组件
function ComponentA() {
return <div>组件A的内容</div>;
}
// 第二个组件
function ComponentB() {
return <div>组件B的内容</div>
}
// 分别挂载两个组件
ReactDOM.createRoot(document.getElementById('root-a')).render(<ComponentA />);
ReactDOM.createRoot(document.getElementById('root-b')).render(<ComponentB />);这种集成方式不需要复杂的构建配置，适合快速验证功能或者改造老项目，开发者可以根据实际需求选择合适的集成方案，灵活调整React组件的使用范围。