将React应用集成到现有HTML页面中，是前端项目渐进式升级的常见方案，不需要推翻原有项目架构，就能逐步引入React的组件化开发能力，适合需要兼容旧代码的项目场景。
集成前的准备工作
首先需要确认现有HTML页面已经引入了React运行所需的核心依赖，不需要通过构建工具打包的话，可以直接使用CDN引入。核心依赖包括React核心库、ReactDOM渲染库，以及可选的Babel编译器，用于支持JSX语法。
依赖引入方式
在HTML页面的<head>标签中添加以下CDN链接：
<!-- 引入React核心库 --> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <!-- 引入ReactDOM渲染库 --> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <!-- 引入Babel，用于编译JSX语法 --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
编写React组件并挂载
引入依赖后，就可以编写React组件，并将其挂载到HTML页面中指定的DOM节点上。这里需要注意，JSX语法需要放在类型为<script type="text/babel">的标签中，否则Babel无法正确编译。
基础组件示例
下面是一个简单的React组件示例，实现点击按钮计数功能：
// 定义计数组件
function Counter() {
// 使用useState定义状态
const [count, setCount] = React.useState(0);
return (
<div>
<p>当前计数：{count}</p>
<button onClick={() => setCount(count + 1)}>点击加1</button>
</div>
);
}
// 将组件挂载到id为react-root的DOM节点上
const root = ReactDOM.createRoot(document.getElementById('react-root'));
root.render(<Counter />);HTML页面中预留挂载节点
在原有HTML页面的合适位置，添加一个用于挂载React组件的DOM节点，比如：
<div id="react-root"></div>
集成过程中的注意事项
- 如果原有页面已经使用了其他前端框架，需要注意DOM操作的冲突，避免多个框架同时操作同一个DOM节点。
- 生产环境建议将React依赖本地化，不要直接使用CDN链接，避免CDN服务异常影响页面运行。
- 如果需要使用React Router等生态库，同样可以通过CDN引入对应的UMD版本，按照官方文档的方式使用即可。
- JSX语法中的HTML标签需要符合规范，比如<class>要写成<className>，避免语法错误。
常见问题解决
如果遇到组件无法渲染的问题，可以先检查以下几点：
- 确认React和ReactDOM的版本是否匹配，推荐使用18.x及以上版本。
- 确认挂载节点的id和代码中获取的一致，没有拼写错误。
- 检查浏览器控制台是否有报错信息，根据报错提示调整代码逻辑。
这种集成方式适合小范围引入React功能，如果需要开发复杂的React应用，还是建议使用Create React App等官方脚手架进行项目搭建，配合构建工具管理依赖和代码。
ReactHTML前端集成JavaScript组件挂载修改时间：2026-06-04 18:14:19