在 HTML 页面中使用 React的场景分析

时间：2023-12-28 10:17:23 来源：未知作者：阿里技术阅读：

该方案使用场景：在html页面中使用react，主js文件index.js和其它非react功能使用js模块化的方式开发，适合轻量级中小型应用

index.html代码：

引入react、react-dom、babel、moment、antd等

									<!DOCTYPE html>

									<html lang='zh-CN'>

									<head>

									    <title>React in HTML</title>

									    <meta charset="utf-8" />

									    <meta http-equiv="X-UA-Compatible" content="IE=edge">

									    <meta name="viewport" content="width=device-width, initial-scale=1">

									    <link rel="stylesheet" href="libs/antd/antd.min.css">

									    <link rel="stylesheet" href="css/index.css">

									    <style type="text/css">

									    </style>

									    <script type="text/javascript" src="libs/jquery-1.9.1.js"></script>

									    <script type="text/javascript" src="libs/react/react.production.min.js"></script>

									    <script type="text/javascript" src="libs/react/react-dom.production.min.js"></script>

									    <script type="text/javascript" src="libs/babel/babel.min.js"></script>

									    <script type="text/javascript" src="libs/moment/moment-with-locales.min.js"></script>

									    <script type="text/javascript" src="libs/antd/antd-with-locales.min.js"></script>

									</head>

									<body>

									    <input id='btn' type="button" class="index-btn" value="显示React组件" />

									    <script type="text/babel" src="components/HelloReact.jsx"></script>

									    <script type="module" src="index.js"></script>

									</body>

									</html>