Submit Search
Upload
透過範例學習React (react tutorial 2)
•
Download as PPTX, PDF
•
2 likes
•
1,863 views
Justin Wu
Follow
more examples for learning react.js
Read less
Read more
Software
Report
Share
Report
Share
1 of 30
Download now
Recommended
Spring Boot 소개
Spring Boot 소개
beom kyun choi
GruntJs Installation and popular plugins. MoscowJS
GruntJs Installation and popular plugins. MoscowJS
Dmitri Kunin
CiklumJavaSat _5112011:Igor Khotin-Gradle
CiklumJavaSat _5112011:Igor Khotin-Gradle
Ciklum Ukraine
Unit Testing con Jest + Enzime para ReactJs
Unit Testing con Jest + Enzime para ReactJs
GabrielComas2
Discover ServiceWorker
Discover ServiceWorker
Sandro Paganotti
用 Javascript 實現你的想像
用 Javascript 實現你的想像
Anna Su
Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)
Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)
Ontico
GRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task Runner
Larry Nung
Recommended
Spring Boot 소개
Spring Boot 소개
beom kyun choi
GruntJs Installation and popular plugins. MoscowJS
GruntJs Installation and popular plugins. MoscowJS
Dmitri Kunin
CiklumJavaSat _5112011:Igor Khotin-Gradle
CiklumJavaSat _5112011:Igor Khotin-Gradle
Ciklum Ukraine
Unit Testing con Jest + Enzime para ReactJs
Unit Testing con Jest + Enzime para ReactJs
GabrielComas2
Discover ServiceWorker
Discover ServiceWorker
Sandro Paganotti
用 Javascript 實現你的想像
用 Javascript 實現你的想像
Anna Su
Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)
Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)
Ontico
GRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task Runner
Larry Nung
React基礎教學
React基礎教學
昇倫 蔡
只需要懂Jquery也能學react js
只需要懂Jquery也能學react js
Justin Wu
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
React js入門
React js入門
昶宇 賴
Three.js 一場從2D變成3D的冒險
Three.js 一場從2D變成3D的冒險
智遠 成
React js
React js
國昭 張
Javascript template & react js 初探
Javascript template & react js 初探
wantingj
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
React js入門教學
React js入門教學
TaiShunHuang
Rethinking Best Practices
Rethinking Best Practices
floydophone
More Related Content
Viewers also liked
React基礎教學
React基礎教學
昇倫 蔡
只需要懂Jquery也能學react js
只需要懂Jquery也能學react js
Justin Wu
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
React js入門
React js入門
昶宇 賴
Three.js 一場從2D變成3D的冒險
Three.js 一場從2D變成3D的冒險
智遠 成
React js
React js
國昭 張
Javascript template & react js 初探
Javascript template & react js 初探
wantingj
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
React js入門教學
React js入門教學
TaiShunHuang
Rethinking Best Practices
Rethinking Best Practices
floydophone
Viewers also liked
(10)
React基礎教學
React基礎教學
只需要懂Jquery也能學react js
只需要懂Jquery也能學react js
React JS and why it's awesome
React JS and why it's awesome
React js入門
React js入門
Three.js 一場從2D變成3D的冒險
Three.js 一場從2D變成3D的冒險
React js
React js
Javascript template & react js 初探
Javascript template & react js 初探
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
React js入門教學
React js入門教學
Rethinking Best Practices
Rethinking Best Practices
透過範例學習React (react tutorial 2)
1.
Justin @ 2015
Aug 透過範例學習React React tutorial 2
2.
React 學習目標 1. 元件之間的溝通
(parent vs children ) 2. Props vs State 目前我把他解讀是.... Props 靜態 (初使化設定) State 動態 (可被改變 ex:setState()…) 3. 透過 refs 取得dom 裡面的值
3.
Example 1. props example
- “Hello World” 2. state example - “Hello xxx” http://jsbin.com/kodalu/1/edit?js,output
4.
http://jsbin.com/kajonu/edit?js,output React 元件之間的溝通 parent v.s
children
5.
Example jQuery demo: http://jsbin.com/guvabo/5/edit?html,js,output
6.
Example (use React) react
final code : http://jsbin.com/kipahu/31/edit?js,output Step: 1. Render component 2. init state 3. Event Handler
7.
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
8.
Map 是尛? map 可以拿來操作Array,
並回傳一個新的array MDN的文件 https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Array/ map
9.
Map 是尛?
10.
Map 是尛?
11.
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) }
12.
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()
13.
Example (use React) http://jsbin.com/kipahu/29/edit?js,output handleClick
: function(i) { this.setState({ result: this.props.items[i] }); } 4. click後修改 handleClick()
14.
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
15.
樣板: http://jsbin.com/zizubu/3/edit?js,output final: http://jsbin.com/zizubu/2/edit?js,output Example
16.
React 學習目標 1. 使用refs
取得 dom value React 支援一個非常特別的屬性,你可以把它附加到任何在 render() 裡面的元件上(就是標簽 tag 上)。這個特殊的屬性可 以讓你存取到對應的『背後的實際物件』,它保證可以在任 何時間點存取到當下的物件。
17.
Example http://jsbin.com/jijavi/1/edit?js,output 1. 使用refs和getDOMNode() 取得
dom value
18.
Example react demo: http://jsbin.com/mupuwo/3/edit?html,js,output
19.
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)
20.
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)
21.
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)
22.
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)
23.
<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)
24.
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)
25.
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)
26.
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)
27.
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)
28.
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)
29.
var Slider =
React.createClass({ render : function() { return ( <div> <input ref="ipt" type="range" min="0" max="255" > </div> //不能在這邊再加入一個 <div> ); } }); 1. React 需要一個根節點, 也只能有一個 React 地雷
30.
https://facebook.github.io/react/tips/communicate- between-components.html Reference
Download now