学习react-语法篇

1 语法
声明一个函数， return 一个html

其他的函数可以调用，在return内部直接写入函数名一样的标签 即可

function myButton(){
    return (
       <button>Im a button</button>
    )
}


export default function  myApp(){
    return (
        <div>
            <h1>welcome to my app</h1>
            <myButton />
        </div>
    )
}

2.添加样式

<img className = "avatar" />

.avatar{
    border-radius: 50%;
}

3.赋值

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};



<img className = "avatar" 

src={user.imgUrl}
alt={'Photo of ' + user.name}
style={{
          width: user.imageSize,
          height: user.imageSize
        }}
/>

//style = {{}} 是双括号 包裹 比较特殊 其他的暂时都是单个括号

4. 渲染
   可以用ifelse 做判断
   也可以用判断运算符简化

不需要else时 的简化写法

let content;
if(isLoggedIn){
    content = <AdminPanel/>
}else {
    content = <LoginForm/>
}
return (
    <div>
        {content}
    </div>
)



return (

    {
        isLoggedIn ?(
            <AdminPanel/>
            ) : 
            (<LoginForm/>
            )
    }
)




<div>
    {isLoggedIn && <AdminPanel/>}
</div>


````




5. render list列表

````
const products = [
    { title: 'Cabbage', id: 1 },
    { title: 'Garlic', id: 2 },
    { title: 'Apple', id: 3 },
  ];

  const listItems= products.map(product=> 
    <li key={product.id}>
       {product.title}
    </li>
    )

    return (
        <ul>{listItems}</ul>
    )


````


7.添加事件
 在函数中声明点击事件， return中 加入点击事件
````
    function functions(){
        function handleClick(){
            alert('click me ')
        }

        return (
            <button onClick ={handleClick}>
             click me 
            </button>
        )
    }


````