我们来做一个简单的例子,点击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、保存后页面会自动刷新