小编点评

## Vue 结合 Pure HTML 的体验 Vue 可以方便地与 Pure HTML 结合，而 React 需要依赖第三方库才能 achieve这种效果。 **使用 React 和 JSX 在 Pure HTML 中:** 1. **创建容器**: 使用 `document.getElementById` 获取页面元素。 2. **编写 JSX**: 创建页面结构，包括 `div` 用于容器、`div` 用于用户信息、`input` 用于输入框。 3. **使用 `React.createElement` 创建组件**: 将 JSX 代码转换成 `React.createElement` 方法的调用。 4. **将组件渲染**: 将创建的组件渲染到容器中。 **示例代码**: ```jsx const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render(); ``` **依赖**: 在 Pure HTML 中使用 React 和 JSX 需要以下依赖： * **react** * **react-dom** * **babel** **注意**: * 使用 React 和 JSX 在 Pure HTML 中可能降低性能，因为 JSX 代码会转化为 DOM 树，需要浏览器进行解析。 * 推荐使用 CRA 创建 React 应用，并打包成静态文件以提高性能。 **总结**: 使用 React 和 JSX 在 Pure HTML 中可能存在性能瓶颈，但可以通过适当的配置和代码优化来改善性能。

正文

前言

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