在纯html使用react并使用组件

最近有个邪门项目

本身有一个vue3+vite的项目

但是需要新写一个门户页面

但是代码还需要托管到这个项目的git上

页面直接使用nginx静态部署

所以也不能使用现有的架构了

准备直接写html

但是这几个页面有复用的地方

所以准备直接在html里写react

看到几篇文章

分享一下

  1. 引用react,react-dom,babel

https://unpkg.com/react@17/umd/react.development.js

https://unpkg.com/react-dom@17/umd/react-dom.development.js

https://unpkg.com/@babel/standalone/babel.min.js

按顺序引用

<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/babel.js"></script>

  1. 初始化react应用

    body里定义一个带id的div

    然后在script里初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
    function App() {
        return (
            <div>
            </div>
        );
    }

    ReactDOM.render(<App/>, document.getElementById('app'));
</script>
</body>
</html>

这个时候就ok了可以使用了

  1. 如果想引用组件的话,需要创建jsx文件,文件名大写,class或者function的名字和文件名一样,然后在页面引用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="./info/Info.jsx"></script>
<script type="text/babel">
    function App() {
        // 声明一个叫 "count" 的 state 变量。
        // 事件方法名"setCount"
        // 使用html引入react所以需要在方法前加React,如果node.js搭建项目忽略
        // React.useState()括号内为初始值
        const [count, setCount] = React.useState(0);

        return (
            <div>
                <p>开始数字{count} </p>
                <button onClick={() => setCount(count + 1)}>
                    点击
                </button>
                <Info></Info>
            </div>
        );
    }

    ReactDOM.render(<App/>, document.getElementById('app'));
</script>
</body>
</html>

    info.jsx

    function Info(){
    return (
        <div>
            sfdsfdsfdsf
        </div>
    )
}

效果:

ok 到这基本大功告成

#教程 #react
#react
在纯html使用react并使用组件
http://xuyuanhang.com//archives/zai-chun-htmlshi-yong-reactbing-shi-yong-zu-jian
作者
许远航
发布于
2023年07月10日
许可协议