react基本操作显示dom元素

react

  • react添加class类名
  • 混入js表达式
  • 添加样式
<body>
    <div id="app"></div>
    
    <script type="text/babel">
        let id = 'tiTle'
        let VDOM = (
			//需要根元素才可以写多个标签(最外层必须有个div)
            <div>
            	//class类名不能用class =  要用className = 
                <h1 className='title'>hello</h1>
                
                //标签种混入js表达式需要{
    
    }
                <h1 className='title' id = {
    
    id}>hello</h1> 
                
                 //.toLowerCase()将大小写的单词转换全小写 toupperCase全部大写 改变 样式 需要{
    
    {
    
    }}
                <h1 className='title' id = {
    
    id.toLowerCase()} style={
    
    {
    
     color: "white", background: 'red' }}>hello </h1>
            </div>

        )
        
//渲染虚拟dom到页面  把VDOM渲染到页面上
        ReactDOM.render(VDOM, document.getElementById('app'))
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_54645059/article/details/114409236