最近学习一下React,通过 阮一峰《React 入门实例教程》 、React 入门教程、菜鸟教程--React 这三个学习基础使用，接下来看慕课网的三个教学视频。
React是什么我也不能说的很透彻，但学习时候觉得就是能摆脱不得复用的陋习，要什么就写什么组件。
以下内容包含 利用Jquery读取ajax，利用map遍历，同时用到了父子组件，组件生命周期，state,props。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <p>根据ajax获得一个JSON对象 遍历出信息，同时定义一个按钮子组件，通过props.id传递，并将ID打印出来 </p> <div id="example"></div> <script type="text/babel"> //子组件 按钮 var ButtonDel = React.createClass({ handleClick : function(){ console.log(this.props.id) }, render: function(){ return ( <button id={this.props.id} onClick={this.handleClick}>del me</button>//读取父组件上的id属性 ) } }); var UserGist = React.createClass({ //定义初始化state 我当做声明来用 getInitialState : function(){ return{ config :[] } }, //组件第一次渲染调用后，使用ajax componentDidMount: function() { var config = this.state.config; $.get(this.props.source, function(result) { //拿到返回的值之后设置state 把整个json给config this.setState({ config : result }); }.bind(this)); }, render: function() { var config = this.state.config; var items = config.map(function(item){ return ( <li> { item.owner.login} link {item.html_url} <ButtonDel id={item.id}/> //这个是按钮子组件 </li> ); },this); //这里的this是做什么用的呢？ // <ButtonDel id={item.id} delClick={this.handleClick} > 如果上面的ButtonDel出现this.handleClick 需要上面的this return ( <div> {items} </div> ); } }); //定义组件 ReactDOM.render( <UserGist source="https://api.github.com/users/octocat/gists"/>, document.getElementById('example') ); </script> </body> </html>
上面的结果就是点击console.log button上面的id，再进行别的操作。
以上只是小小整合，期待能更加深入进入学习.....待续