react学习记录

1.页面由组件构成

function MyButton() {  
    return (  
         <button>I'm a button</button>  
    );  
}

2.你必须闭合标签 一个父级别标签，比如 <div>...</div> 或使用空的 <>...</> 包裹

3.在 React 中，你可以使用 className 来指定一个 CSS 的 class

4.变量传递 {}

4.1 src={user.imageUrl}

return (  
     <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
);

5.直接判断渲染

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

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

6.渲染列表

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.触发函数

声明注意: [something, setSomething]

例如: const [count, setCount] = useState(0);