React从0到1--新的 React 组件

我们来做一个简单的例子，点击Button，计数器加1

1、首先新建一个ClickCounter.js

2、在文件的index.js里面引入ClickCounter

import ClickCounter from './ClickCounter';//组件的第一个字母应该大写

3、在ClickCounter文件里面写入代码

import React,{Component}from 'react';

//从react库里面引入React，和Component，Component作为所有组件的基类
class ClickCounter extends Component{
//Es6写法继承Component
    constructor(props){
        super(props);
        this.onClickButton = this.onClickButton.bind(this);
        this.state = {count:0};

    }
    onClickButton(){
        this.setState(
            {
                count:this.state.count + 1
            }
        )
    }

    render(){
  //JSX语法
        return(
             <div>
                 <button onClick={this.onClickButton}> Click Me</button>
                 <div>
                     Click Count:{this.state.count}
                 </div>
             </div>

        );
    }
}
export default ClickCounter;

4、保存后页面会自动刷新