1.JSX语法
//在js的基础之上 编写标签
reactdom.render(
<h1>{‘hello’+‘react'}</h1>,
document.getelementbyid('example')
)
//遇到 < 首字母是大写，组件 首字母是小写，html标签
//遇到 { js去解析
//jsx语法会通过babel编译器转换为js的语法
2.组件
//创建组件
var MyComponent = react.createclass({
render() {
return <h1> it is a header</h1>
}
})
//使用组件
<MyComponent></MyComponent>
3.props
<mybutton btnname="登录"></mybutton>
//在mybutton组件中获取btnname属性对应的值
this.props.btnname
//在调用当前组件时，在组件的开闭标签所写的其它的标签可以通过this.props.children来获取
<mylist>
<li>test01</li>
<li>test01</li>
</mylist>
var mylist = react.createclass({
render() {
return <ul>
{
react.children.map(this.props.children,function(child) {
return child
})
}
</ul>
}
})
//父子通信通过props来实现方法的传递
var mylogin = react.createclass({
login:function(){
console.log('登录成功');
},
register:function(){
console.log('注册成功');
},
render：function(){
return <div>
<mybutton btnname="登录"
func={this.login}
></mybutton>
<mybutton
func={this.register} btnname="注册"></mybutton>
</div>
}
})
4.ref
//第一步 指定ref
<son ref="myson"></son>
//第二步 根据ref得到实例
this.refs.myson//得到son组件的实例
5.state
//初始化
getinitialstate:function(){
return {count:1,value:2}
}
//读
this.state.count
//写
this.setstate(
{count:2},
function(){}
)
//状态处理表单受控元素
//①初始化一个状态
getinitialstate:function(){return {myvalue:'123'}}
//②将状态的值绑定到视图
<input type="text" value={this.state.myvalue}/>
//③给input绑定一个onchange事件以及
对应的处理函数
handlechange:function(e){
this.setstate({myvalue:e.target.value})
}
<input type="text"
onchange={this.handlechange} value={this.state.myvalue}/>
