LEARNING REACTS #2@ Forum: Shiiir@ Author: Cara_wang@ Date: 2015/03/25

demo

https://github.com/CaraWang/reactjs-fb-like-button-and-leave-message

把程式 clone 到 cloud 9

git clone https://github.com/CaraWang/reactjs-fb-like-button-and-leave-message.git

mv learning-reactjs-second-demo-communication-between-components/* .

有個點點唷！rm -rf learning-reactjs-second-demo-communication-between-components/

上次學會⽤用元件堆出⼀一個⾴頁⾯面來拆分 demo 中的元件

fbPerson

fbContent

fbButton

countLikeoneMessage

messageBox

fbTemplate

<fbPerson /><fbContent /><fbButton /><countLike />

<oneMessage /><messageBox />

這次要看元件間要如何溝通溝通有兩種

⽗父親跟⼦子孫溝通⼦子孫想跟其他⼦子孫溝通

⼦子孫間的溝通要靠共同的⽗父親

這次要看元件間要如何溝通 demo 中哪裡需要溝通

fbPerson

fbContent

fbButton

countLikeoneMessage

messageBox

fbTemplate

1. onClick

2. signal3. add count

1/3

這次要看元件間要如何溝通 demo 中哪裡需要溝通

fbPerson

fbContent

fbButton

countLikeoneMessage

messageBox

fbTemplate

1. onClick

2. signal3. focus

2/3

這次要看元件間要如何溝通 demo 中哪裡需要溝通

fbPerson

fbContent

fbButton

countLikeoneMessage

messageBox

fbTemplate

1. press enter

2. signal

3. append message

3/3

3. remove value

這次要看元件間要如何溝通溝通有兩種

⽗父親跟⼦子孫溝通⼦子孫想跟其他⼦子孫溝通

⼦子孫間的溝通要靠共同的⽗父親

這次要看元件間要如何溝通溝通有兩種

⽗父親跟⼦子孫溝通

@fbTemplate.js<fbPerson id=“cara4bear” />

<div> My Id is {this.props.id}</div>@fbPerson.js

⼦子孫⽤用 this.props.xxx 接收⽗父親給他的參數

1/2

這次要看元件間要如何溝通溝通有兩種

⽗父親跟⼦子孫溝通

@fbTemplate.js

<fbPerson id=“cara4bear” />傳固定值

<fbPerson id={myId} />傳變數

<FbButton signalCount={this.triggerCount} />傳 function

2/2

這次要看元件間要如何溝通溝通有兩種

⼦子孫透過⽗父親跟其他⼦子孫溝通

countLikefbButton

我想跟你溝通

fbButton countLike

fbTemplate

1/2

這次要看元件間要如何溝通溝通有兩種

⼦子孫透過⽗父親跟其他⼦子孫溝通fbButton countLike

fbTemplate

@fbButton.js<div onClick={this.props.signalCount} />1.

@fbTemplate.js

triggerCount: function() { this.refs.counter.addCount();}

2.等於

<CountLike ref="counter"/>3.

利⽤用設定 ref 讓⽗父親可以輕易找到⼦子孫跟他溝通

2/2

重新整理⼀一下

@fbTemplate.js<FbButton signalCount={this.triggerCount} />

@fbButton.js<div onClick={this.props.signalCount} />

@fbTemplate.js

triggerCount: function() { this.refs.counter.addCount();}

addCount: function() { var nowCount = this.state.count + 1; this.setState({count: nowCount});},

@countLike.js

準備實作囉!!!!

這次試試看⽤用 client side 開發

在index.html 載⼊入元件<!--- components ---><script type="text/jsx" src="./assets/js/components/fbPerson.js"></script><script type="text/jsx" src="./assets/js/components/fbButton.js"></script><script type="text/jsx" src="./assets/js/components/countLike.js"></script><script type="text/jsx" src="./assets/js/components/messageBox.js"></script><script type="text/jsx" src="./assets/js/components/oneMessage.js"></script><script type="text/jsx" src="./assets/js/components/fbContent.js"></script><script type="text/jsx" src="./assets/js/components/fbTemplate.js"></script> <!--- pages ---><script type="text/jsx" src="./assets/js/fbPage.js"></script>

1/2

這次試試看⽤用 client side 開發

@data/fbId.js

var myId = "cara4bear";21:@fbTemplate.js

2/2

⼀一開始開發 Reactjs 要知道的事

component 的概念

⽗父元件傳參數給⼦子元件⽤用 this.props.xxx

⼦子元件間想要溝通透過 ref and this.refs.xxx

Reactjs 定義⼀一個元件在 DOM 上的⾏行為操作: lifecycle

其他 Reactjs 官⽅方開發的好⽤用⼯工具: addon

1.

2.

3.

4.

5.

http://facebook.github.io/react/docs/component-specs.htmlhttp://facebook.github.io/react/docs/addons.html

git checkout practice

開始 workshop 囉