master

分支 (1)

管理

管理

master

react-basic
/
21-使用-React-JSX-模版.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React</title>
</head>

<body>
    <!-- 根节点(容器节点) -->
    <div id="root"></div>

    <!-- 导入React和ReactDOM这两个核心包 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <!-- 1 导入babel转换包 -->
    <script src="./node_modules/babel-standalone/babel.js"></script>

    <!-- 注意这里的type -->
    <script type="text/babel">
        // 2 使用JSX语法创建一个包含‘Hello React JSX’的h1标签

        // 3 渲染React元素到页面中去


        // 2 使用JSX创建如下结构的页面
        // const jsx = (
        //     <div>
        //         <h1>购物列表</h1>
        //         <ul>
        //             <li>华为</li>
        //             <li>iPhone</li>
        //         </ul>
        //     </div>
        // )
        // 3 渲染React元素到页面中去


    </script>


</body>

</html>