快速上手React：

Posted 2021-02-04 mrsaver

React:快速上手(1)——基础知识

关于组件

定义组件

　　React是一个用于构建用户界面的声明性，高效且灵活的javascript库。它允许您从称为“组件”的小而孤立的代码片段中组合复杂的UI。

class ShoppingList extends React.Component{
    render(){
        return(
            <div className=‘shoppping-list‘>
                <h1>ShoppingList for MS</h1>
                <ul>
                    <li>QQ</li>
                    <li>Tim</li>
                    <li>WeChat</li>
                </ul>
             </div>
        )
    }
}

传值到组件中

 

设置组件状态来存储一些数据

　　组件中的的state字段是可视为组件私有的可以用来存储数据的地方。

class Square extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            value:null
        }
    }
    render(){
        return(
            <button className=‘square‘ onClick={()=>this.setState({value:‘X‘})}>
                {this.state.value}
            </button>
        )
    }
}