React入门（一）

1.React是什么，为什么要使用它

　　React是FaceBook内部的一个JavaScript类库，它引入了一种新的方式处理浏览器DOM。你只需要声明式的定义各个时间点的用户界面，而无需关心在数据变化时需要更新哪一部分DOM。

2.为什么使用JSX（Javascript XML）

　　react在不使用JSX时阅读以及理解较为困难，使用了JSX之后调用变为熟悉的HTML标签风格

3.例子：React一个简单的表单代码

<style>   //外部css
.index_title{
    color:#F00   
}
</style>

 

<div id = "example"> </div> //容器

 

var MyForm = React.createClass({
  getInitialState: function() {   //初始化state和props
    return {
        given_name:"",
        family_name:""
    };
  },
  handleChange: function(name,event) {
      var newState = {};
      newState[name] = event.target.value;  //event.target访问触发事件的DOM节点
      this.setState(newState);    //只能通过setState修改状态
  },
  submitHandler:function(event){
      event.preventDefault();
      var words = ["Hi",this.state.given_name,this.state.family_name];    
      alert(words.join(" "))
  },
  render: function() {
    return (
    <form onSubmit = {this.submitHandler}>
        <h1 className = 'index_title'>LETS GO CELTICS</h1>
        <label htmlFor = 'given_name'>Given Name:</label>
        <br/>
        <input
            type = "text"
            name = "given_name"
            value = {this.state.given_name}
            onChange = {this.handleChange.bind(this,'given_name')}/>    
        <br/>
        <label htmlFor = 'family_name'>Family Name:</label>
        <br/>
        <input
            type = "text"
            name = "family_name"
            value = {this.state.family_name}   //访问数据只能通过state和props 通常props保存静态数据 
            onChange = {this.handleChange.bind(this,'family_name')}/>   //change变为onChange、click变为onClick  .bind用来传递参数
        <br/>
        <button type="submit" className = 'btn btn-warning'>Speak</button>   //class变为className
    </form>
    )
  }
});
ReactDOM.render(   //创建一个虚拟的DOM,用来表示组件的输出
  <MyForm />,
  document.getElementById('example')
);