在HTML中引入React和JSX
前言#
Vue 可以非常方便地与 Pure HTML 结合,代替 jQuery 的功能,有一次遇到类似的场景时,我就想 React 能不能也以这种方式接入 HTML 网页,从而提高开发效率。
结果当然是可以的,只不过在 HTML 里直接 JSX 似乎会降低一些性能… 凑合用吧
引入依赖#
要在 Pure HTML 里使用 React 和 JSX,需要以下依赖
- react
- react-dom
- babel
直接用 unpkg 的 CDN 就好。
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.20.6/babel.min.js"></script>
开始写代码#
像 Vue 一样,需要在页面里创建个容器
<div id="root"></div>
然后 JSX 建议新建个文件单独写,这样 IDE 提示会比较好。
这里新建一个 app.jsx
文件
在依赖的后面引入
<script type="text/babel" src="js/app.jsx"></script>
然后直接开写 JSX
function App() {
const [name, setName] = React.useState("codelab")
return (
<div>
<div>hello, {name}</div>
<input value={name} onChange={e => setName(e.target.value)} />
</div>
)
}
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App/>)
搞定#
实际使用效果勉强还可以。
当然最好还是用 CRA 来创建 React 应用,然后打包出来部署,不然复杂页面的性能会比较捉急。
作者:DealiAxy
出处:https://www.cnblogs.com/deali/p/17557284.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
微信公众号:「程序设计实验室」
新版StarBlog已经上线,地址:http://blog.deali.cn
微信公众号:「程序设计实验室」
专注于互联网热门新技术探索与团队敏捷开发实践,包括架构设计、机器学习与数据分析算法、移动端开发、Linux、Web前后端开发等,欢迎一起探讨技术,分享学习实践经验。
分类:
Web前端 / React
Buy me a cup of coffee ☕.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)