前端开发react框架 - jsx语法 前端框架react入门

jsx创建react元素：

const txt = <span>这是一段文字</span>

reactDOM.rander(txt, document.getElementById('#app'))

jsx中使用js表达式：

const age = 20

const context = （<span>我的年龄是{age}</span>）

jsx条件渲染：

const demo = （）=> {

if(true){

return <div>创建中.........</div>

}

return <div>创建完成</div>

}

const txt = <span>这是一段文字{demo()}</span>

reactDOM.rander(txt, document.getElementById('#app'))

jsx列表渲染：

map方法

const arr = [{id:1,uid:'001'},{id:2,uid:'002'},{id:3,uid:'003'}]

const list = (

<ul>

arr.map(item=><li>id:{item.id}uid:{item.uid}</li>)

</ul>

)

jsx样式处理：

• 行内样式style

<div style={{color:'red',border:'1px solid red'}}></div>

• 类名className（推荐）

<div className="colorBorder"></div>