React入门之React_使用es5和es6语法渲染和添加class-es6写法 

时间：2024-03-01 14:35:26

注意在使用es6语法时候script必须表明type为text/balel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <div id="root1"></div>
     <script type="text/babel">
         //es6方法创建,
         ReactDOM.render(
             <ul>
                 <li className='lili'>111</li>
                 <li>222</li>
             </ul> ,
             document.getElementById('root1')
         )
     </script>
     <div id="root2"></div>
     <script type="text/babel">
        //es6方法创建,jsx简单写法
        let root2=document.getElementById('root2')
       let div= <div className='hello'>
                <h1>hello react</h1>
            </div>
        ReactDOM.render(div,root2)
    </script>
</body>
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
<!-- 用于解析babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</html>