透過範例學習React (react tutorial 2)

Justin @ 2015 Aug
透過範例學習React
React 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 component
2. init state
3. 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

Example (use React)
1.render
修改對應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)
handleClick : function(i) {
this.setState({
result: this.props.items[i]
});
}
4. click後修改 handleClick()

Example (use React)
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,output
final: 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

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)

getInitialState: function() {
return {value: 128}
},
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
return (
<div>
<input ref="ipt" type="range" min="0" max=“255"
onChange={this.update}/>
<label>{this.state.value}</label>
</div>
)
}
Example (use React)

this.setState({ value: this.refs.ipt.getDOMNode().value})
},
4. update and setState
Example (use React)

<div>
<input ref="ipt" type="range" min="0" max="255"
<label>{this.state.red}</label>
<label>{this.state.green}</label>
<label>{this.state.blue}</label>
</div>
5. 產生三組input type=“range”
getInitialState: function() {
return { red : 128, green: 128,blue : 128 }
}
Example (use React)

var Slider = React.createClass({
return (
<div>
onChange={this.props.update}/>
</div>
);
}
});
6. 建立新的元件 <Slider />
<Slider ref="red" update={this.update}/>
<label>{this.state.red}</label>
…
render() 裡面的input也要對應修改成：
Example (use React)

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()
現在可以玩一玩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
Example (use React)

return (
<div>
<div className="show-color" style={this.divStyle()}></div><br/>
…
</div>
);
}
10.修改 render() 並新增一個 div 來顯示色塊! done!
.show-color{
width : 300px;
height : 100px;
border:1px solid #ccc;
}
幫div 設定基本的樣式
Example (use React)

var Slider = React.createClass({
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

透過範例學習React (react tutorial 2)

Recommended

More Related Content

Viewers also liked (10)

透過範例學習React (react tutorial 2)