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