该方案使用场景:在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>