Testaccount
/
1.Test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../babel.min.js"></script>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        /* vue 的动态渲染使用 {{}} 
           react 的动态渲染使用 {}  花括号中可以是任何表达式
        */
        let obj ={
            name:'张三',
            age:18
        }
        let food = {
            name:'西瓜',
            price:20
        }
        function fn(){
            return '我是一个函数'
        }
        let str = '记得笑一笑'
        // const happy = <h2>你今天开心嘛？ {str + obj.name + ' 今年 ' + obj.age +' 岁了'} {fn()}</h2>
        function getFood(food){
            // 模版字符串
            return `${food.name} 价格是 ${food.price}`
        }
        const happy = <h2>{getFood(food)}</h2>
        const getRoot = document.getElementById('root')
        ReactDOM.createRoot(getRoot).render(happy)
    </script>
</body>
</html>