一个H5页面中直接使用React的示例与说明

示例

如题，下面的个简单代码示例---在H5页面中直接使用React

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React with Babel in HTML Page</title>
    <!-- 引入Babel standalone -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- 引入React和ReactDOM的UMD构建版本 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<!--type="text/babel",浏览会忽略下面的JS代码，然后我们引入的babel库会先将下面的脚本中的JSX语法转换为JS，再交给浏览器去执行！-->
<script type="text/babel">
    // 编写React组件，使用JSX语法
    const YourComponent = () => {
        return (
            <div>
                <h1>Hello, React with Babel!</h1>
                <p>This component is using JSX syntax and transformed by Babel.</p>
            </div>
        );
    };
    //渲染组件到页面
    ReactDOM.render(<YourComponent />, document.getElementById('root'));
</script>

</body>
</html>