透過範例學習react (react tutorial 2)
TRANSCRIPT
![Page 1: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/1.jpg)
Justin @ 2015 Aug
透過範例學習 ReactReact tutorial 2
![Page 2: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/2.jpg)
React 學習目標1. 元件之間的溝通 (parent vs children )
2. Props vs State目前我把他解讀是 ....Props 靜態 (初使化設定)State 動態 (可被改變 ex:setState()… )
3. 透過 refs 取得 dom 裡面的值
![Page 3: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/3.jpg)
Example
1. props example - “Hello World”
2. state example - “Hello xxx”
http://jsbin.com/kodalu/1/edit?js,output
![Page 4: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/4.jpg)
http://jsbin.com/kajonu/edit?js,output
React 元件之間的溝通parent v.s children
![Page 5: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/5.jpg)
Example
jQuery demo: http://jsbin.com/guvabo/5/edit?html,js,output
![Page 6: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/6.jpg)
Example (use React)
react final code : http://jsbin.com/kipahu/31/edit?js,output
Step:1. Render component2. init state3. Event Handler
![Page 7: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/7.jpg)
Example (use React)1.Render component
var App = React.createClass({ render : function() { return ( <div classNnme="wrap">
<h2> 你選的是? <span classNnme="result"></span></h2>
<button classNnme="btn">Banana</button> <button classNnme="btn">Apple</button> <button classNnme="btn">Orange</button>
</div> ) }});
React.render(<App items={["Banana","Apple","Orange"]}/>, document.body);
http://jsbin.com/kipahu/28/edit?js,output
![Page 8: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/8.jpg)
Map 是尛 ? map 可以拿來操作 Array, 並回傳一個新的 array
MDN的文件https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
![Page 9: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/9.jpg)
Map 是尛 ?
![Page 10: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/10.jpg)
Map 是尛 ?
![Page 11: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/11.jpg)
Example (use React)1.render
http://jsbin.com/kipahu/27/edit?js,output
修改對應 render() 把 <button> 拿掉用 map function 來處理 render
{ this.props.items.map(function(){}, this);}
繼續完成 map
{ this.props.items.map(function(item){ return ( <button>{item}</button> ) }, this)}
![Page 12: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/12.jpg)
Example (use React)3.event handler
{ this.props.items.map(function(item, i) { return ( <button onClick={this.handleClick.bind(this,i)} key={i}>{item}</button> ); }, this)}
http://jsbin.com/kipahu/22/edit?js,console,output
增加一個 handleClick() handleClick : function(i) { console.log(i); },
修改對應的 handleClick()
![Page 13: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/13.jpg)
Example (use React)
http://jsbin.com/kipahu/29/edit?js,output
handleClick : function(i) { this.setState({
result: this.props.items[i] }); }
4. click 後修改 handleClick()
![Page 14: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/14.jpg)
Example (use React) render : function() { return ( <div className="wrap"> <h2> 你選的是? <span className="result">{this.state.result}</span></h2> { this.props.items.map(function(item, i) { var cssStyle = (item === this.state.result ? "btn is-active":"btn"); return ( <button className={cssStyle} onClick={this.handleClick.bind(this,i)} key={i}>{item}</button> ); }, this)} </div> ) }
5. 修改 render() done !!
react final code : http://jsbin.com/kipahu/31/edit?js,output
![Page 15: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/15.jpg)
樣板 : http://jsbin.com/zizubu/3/edit?js,outputfinal: http://jsbin.com/zizubu/2/edit?js,output
Example
![Page 16: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/16.jpg)
React 學習目標1. 使用 refs 取得 dom value
React 支援一個非常特別的屬性,你可以把它附加到任何在 render() 裡面的元件上 ( 就是標簽 tag 上 ) 。這個特殊的屬性可以讓你存取到對應的『背後的實際物件』,它保證可以在任何時間點存取到當下的物件。
![Page 17: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/17.jpg)
Example
http://jsbin.com/jijavi/1/edit?js,output
1. 使用 refs 和 getDOMNode() 取得 dom value
![Page 18: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/18.jpg)
Example
react demo: http://jsbin.com/mupuwo/3/edit?html,js,output
![Page 19: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/19.jpg)
var App = React.createClass({ render: function() { return (
<div> <input type="range" min="0"
max="255" /> </div> ) }})
React.render(<App/>, document.body);
1. render() 來呈現一組 slider
http://jsbin.com/losiji/9/edit?js,output
Example (use React)
![Page 20: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/20.jpg)
var App = React.createClass({ getInitialState: function() { return {value: 128} }, render: function() { return ( <div> <input type="range" min="0" max="255"/> <label>{this.state.value}</label> </div> ) }});
2. init state
Example (use React)
![Page 21: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/21.jpg)
update : function() {console.log(this.refs.ipt.getDOMNode().value)},
3. update event handler
http://jsbin.com/losiji/7/edit?js,output
render: function() { return ( <div> <input ref="ipt" type="range" min="0" max=“255" onChange={this.update}/> <label>{this.state.value}</label> </div> ) }
Example (use React)
![Page 22: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/22.jpg)
update : function() { this.setState({ value: this.refs.ipt.getDOMNode().value}) },
4. update and setState
http://jsbin.com/losiji/8/edit?js,output
Example (use React)
![Page 23: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/23.jpg)
<div> <input ref="ipt" type="range" min="0" max="255" onChange={this.update}/> <label>{this.state.red}</label> <input ref="ipt" type="range" min="0" max="255" onChange={this.update}/> <label>{this.state.green}</label> <input ref="ipt" type="range" min="0" max="255" onChange={this.update}/> <label>{this.state.blue}</label> </div>
5. 產生三組 input type=“range”
http://jsbin.com/losiji/10/edit?js,output
getInitialState: function() { return { red : 128, green: 128,blue : 128 } }
Example (use React)
![Page 24: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/24.jpg)
var Slider = React.createClass({ render : function() { return ( <div> <input ref="ipt" type="range" min="0" max="255" onChange={this.props.update}/> </div> ); }});
6. 建立新的元件 <Slider />
http://jsbin.com/losiji/13/edit?js,output
<Slider ref="red" update={this.update}/><label>{this.state.red}</label>…
render() 裡面的 input 也要對應修改成:
Example (use React)
![Page 25: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/25.jpg)
update : function() { this.setState({ red : this.refs.red.refs.ipt.getDOMNode().value, green: this.refs.green.refs.ipt.getDOMNode().value, blue : this.refs.blue.refs.ipt.getDOMNode().value }); },
7. 修改 update()
http://jsbin.com/losiji/14/edit?js,output
現在可以玩一玩 slider 控制器了但還沒完 , 我們要有地方把顏色輸出
Example (use React)
![Page 26: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/26.jpg)
var convertColor = function(rgb) { return "#" + ("0" + parseInt(rgb[0],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2);}
8. 增加一個 function 處理 RGB 轉 16 進位Example (use React)
![Page 27: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/27.jpg)
divStyle : function() { return( {"background":convertColor([this.state.red, this.state.green, this.state.blue])} ) }
9. 增加一個 function 把處理完的色碼回傳到 view
http://jsbin.com/losiji/14/edit?js,output
Example (use React)
![Page 28: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/28.jpg)
render: function() { return (
<div> <div className="show-color"
style={this.divStyle()}></div><br/>…</div>
);}
10.修改 render() 並新增一個 div 來顯示色塊 ! done!
http://jsbin.com/losiji/15/edit?js,output
.show-color{ width : 300px; height : 100px; border:1px solid #ccc;}
幫 div 設定基本的樣式
Example (use React)
![Page 29: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/29.jpg)
var Slider = React.createClass({ render : function() { return ( <div> <input ref="ipt" type="range" min="0" max="255" > </div>
// 不能在這邊再加入一個 <div> ); }});
1. React 需要一個根節點 , 也只能有一個React 地雷
![Page 30: 透過範例學習React (react tutorial 2)](https://reader033.vdocuments.mx/reader033/viewer/2022061610/58a561641a28ab20528b4fbd/html5/thumbnails/30.jpg)
https://facebook.github.io/react/tips/communicate-between-components.html
Reference