react

列表渲染

const list = [
{name:"vue",id:1},
{name:"reacr",id:2},
{name:"angular",id:3}
]
//渲染
<ul>
    {list.map(item=><li key=item.id>{item.name}</li>)}
</ul>

js表达式

//引号传递字符串
{"this is message"}
//识别变量
{count}
//调用函数
{getcount()}
//使用js对象
<div style={{color="red"}}>this is div</div>

基础条件渲染

const isloading = false
const app = ()=>{
    return (
        //逻辑与
            {isloading && <span>Luojiyu</span>}
        //三元运算
            {isloading ? <span>成功渲染</span> : <span>isloading=false</span>}
)
}

绑定点击事件

<div>
    <button onClick={事件名}></button>
</div>

传递自定义参数

使用redux存储数据

模板:计数器案例