突发奇想
查了查真的可以,官方文档: 在网站中添加 React – React
开始
引入js
<!-- 开发环境使用 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>这个js分开发板和生产版
- 开发环境为了能正常 debug调试, 源映射，具有热重载功能, (提高编译和重新编译速度,不会配置代码压缩，CSS 拆分, 代码压缩是很耗时的)
- Babel 是一个 JavaScript 编译器, 负责把 JavaScript 高级语法、转换为低规范以保障能够在低版本的环境下正常执行
生产版本如下
<!-- 生产环境使用 -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>Hello, world!
<div id="root"></div>
<script type="text/babel">
function MyApp() {
return <h1>Hello, world!</h1>;
}
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MyApp />);
</script>点击html运行
最后
代码已附, 也可以官网下载, 引用文件底部官方的话, 这个页面是尝试React的好方法，但它不适合生产, 它在浏览器中缓慢地用Babel编译JSX，并使用React的大型开发构建。
阅读此页面，了解如何使用JSX启动新的React项目：
https://react.dev/learn/start-a-new-react-project
