透過範例學習react (react tutorial 2)
TRANSCRIPT
Justin @ 2015 Aug
透過範例學習 ReactReact tutorial 2
React 學習目標1. 元件之間的溝通 (parent vs children )
2. Props vs State目前我把他解讀是 ....Props 靜態 （初使化設定）State 動態 （可被改變 ex:setState()… ）
3. 透過 refs 取得 dom 裡面的值
Example
1. props example - “Hello World”
2. state example - “Hello xxx”
http://jsbin.com/kodalu/1/edit?js,output
http://jsbin.com/kajonu/edit?js,output
React 元件之間的溝通parent v.s children
Example
jQuery demo: http://jsbin.com/guvabo/5/edit?html,js,output
Example (use React)
react final code : http://jsbin.com/kipahu/31/edit?js,output
Step:1. Render component2. init state3. Event Handler
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
Map 是尛 ? map 可以拿來操作 Array, 並回傳一個新的 array
ＭＤＮ的文件https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Map 是尛 ?
Map 是尛 ?
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)}
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()
Example (use React)
http://jsbin.com/kipahu/29/edit?js,output
handleClick : function(i) { this.setState({
result: this.props.items[i] }); }
4. click 後修改 handleClick()
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
樣板 : http://jsbin.com/zizubu/3/edit?js,outputfinal: http://jsbin.com/zizubu/2/edit?js,output
Example
React 學習目標1. 使用 refs 取得 dom value
React 支援一個非常特別的屬性，你可以把它附加到任何在 render() 裡面的元件上 ( 就是標簽 tag 上 ) 。這個特殊的屬性可以讓你存取到對應的『背後的實際物件』，它保證可以在任何時間點存取到當下的物件。
Example
http://jsbin.com/jijavi/1/edit?js,output
1. 使用 refs 和 getDOMNode() 取得 dom value
Example
react demo: http://jsbin.com/mupuwo/3/edit?html,js,output
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)
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)
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)
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)
<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)
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)
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)
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)
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)
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)
var Slider = React.createClass({ render : function() { return ( <div> <input ref="ipt" type="range" min="0" max="255" > </div>
// 不能在這邊再加入一個 <div> ); }});
1. React 需要一個根節點 , 也只能有一個React 地雷
https://facebook.github.io/react/tips/communicate-between-components.html
Reference