在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

posted @   程序设计实验室  阅读(551)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
more_horiz
keyboard_arrow_up light_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示