react(1)

一.基本语法  

1.三个核心库（react.js ，react-dom.js，Browser.js ）引入时注意顺序

  react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

2.ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点

　　ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置。若要为创建的某个元素增加class属性，不能直接定义class而要用className，因为class是javascript中的保留字。

3.render 渲染组件时必须是闭合标签 

render:function(){
    var text = this.state.show ? 'like' : 'haven\'t liked';
    return (
        <div>
            <input type="text" ref="name"/>
            <button onClick={this.changeState}>{text}</button>
        </div>
    )
}

4.注册组件时首字母大写React.createClass({　　render:function(){ //render 输出组件
　　　　return //template
　　}
})
5.判断组件渲染出来的html 属性值（attributeName）是否符合要求 //propTypes方法进行验证
6.设置默认属性值 getDefaultProps方法
　　

var Mycompent=React.createClass({ //生成组件类
    propTypes:{ //验证元素属性值 attributeName
        title:React.PropTypes.string.isRequired
    },
    getDefaultProps:function(){ //默认设置元素属性 attributeName
        return {
            name:'如果name值不存在我便是默认值'
        }
    },
    render:function(){ //render方法输出组件
        return <div name={this.props.title}>{this.props.name}</div>
    },

})

7.组件注册中通过 this.porps.[name] 获取实例组件时的属性值（attributeName）
8.获取注册组件中元素通过 this.refs.[name] 获取元素节点   注册时需指定ref=[name]属性值
9.设置事件注册组件元素可以通过this.[时间名]绑定事件 回调参数event为绑定元素节点
10.state状态值 通过getInitialState方法设置  this.state.[name]可获取状态值  this.setState.[name]设置状态值
11.state值改变将会重新触发组件进行渲染  porps不可改变是因为它是元素属性（attributeName）,state可变是因为它就是个动态值 类似元素的value值

var Compent=React.createClass({
    handClick:function(){ //设置点击事件  通过ref设置name值 可通过refs取得真是dom节点
      console.log(this.refs.name.value)
    },
    changeState:function(event){  //事件可自定义 event点击时传递dom
        console.log(event.target.textContent); //获得点击元素的属性值等等
        this.setState({
            show:!this.state.show
        })
    },
    getInitialState:function(){ //用于设置状态 自带方法
        return {
            show:true
        }
    },
    render:function(){
        var text = this.state.show ? 'like' : 'haven\'t liked';
        return (
            <div>
                <input type="text" ref="name"/>
                <button onClick={this.changeState}>{text}</button>
            </div>
        )
    }
})
ReactDOM.render(
    <Compent/>, document.getElementById('app')
)