gpt4 book ai didi

在HTML中引入React和JSX

转载 作者:我是一只小鸟 更新时间:2023-07-16 06:31:06 30 4
gpt4 key购买 nike

前言

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 应用,然后打包出来部署,不然复杂页面的性能会比较捉急.

最后此篇关于在HTML中引入React和JSX的文章就讲到这里了,如果你想了解更多关于在HTML中引入React和JSX的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com