標籤：
最近學習一下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，再進行別的操作。
以上只是小小整合，期待能更加深入進入學習.....待續
React--基礎學習混搭
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
