Please fork the demo code on : https://github.com/CaraWang/reactjs-fb-like-button-and-leave-message 在社群中分享學習 Reactjs 的心得, 並帶領小小 workshop 利用建構出 facebook 的經典 component 以學習與練習使用 Reactjs 歡迎大家利用下方連結至 github clone code 試試看唷！ https://github.com/CaraWang/reactjs-fb-like-button-and-leave-message.git

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

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

3. 把程式 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/

4. 上次學會⽤用元件堆出⼀一個⾴頁⾯面
來拆分 demo 中的元件
fbPerson
fbContent
fbButton
countLike
oneMessage
messageBox
fbTemplate
<fbPerson />
<fbContent />
<fbButton />
<countLike />
<oneMessage />
<messageBox />

5. 這次要看元件間要如何溝通
溝通有兩種
⽗父親跟⼦子孫溝通
⼦子孫想跟其他⼦子孫溝通
⼦子孫間的溝通要靠共同的⽗父親

6. 這次要看元件間要如何溝通
demo 中哪裡需要溝通
fbPerson
fbContent
fbButton
countLike
oneMessage
messageBox
fbTemplate
1. onClick
2. signal
3. add count
1/3

7. 這次要看元件間要如何溝通
demo 中哪裡需要溝通
fbPerson
fbContent
fbButton
countLike
oneMessage
messageBox
fbTemplate
1. onClick
2. signal
3. focus
2/3

8. 這次要看元件間要如何溝通
demo 中哪裡需要溝通
fbPerson
fbContent
fbButton
countLike
oneMessage
messageBox
fbTemplate
1. press enter
2. signal
3. append message
3/3
3. remove value

9. 這次要看元件間要如何溝通
溝通有兩種
⽗父親跟⼦子孫溝通
⼦子孫想跟其他⼦子孫溝通
⼦子孫間的溝通要靠共同的⽗父親

10. 這次要看元件間要如何溝通
溝通有兩種
⽗父親跟⼦子孫溝通
@fbTemplate.js
<fbPerson id=“cara4bear” />
<div> My Id is {this.props.id}</div>
@fbPerson.js
⼦子孫⽤用 this.props.xxx 接收⽗父親給他的參數
1/2

11. 這次要看元件間要如何溝通
溝通有兩種
⽗父親跟⼦子孫溝通
@fbTemplate.js
<fbPerson id=“cara4bear” />傳固定值
<fbPerson id={myId} />傳變數
<FbButton signalCount={this.triggerCount} />傳 function
2/2

12. 這次要看元件間要如何溝通
溝通有兩種
⼦子孫透過⽗父親跟其他⼦子孫溝通
countLike
fbButton
我想跟你溝通
fbButton countLike
fbTemplate
1/2

13. 這次要看元件間要如何溝通
溝通有兩種
⼦子孫透過⽗父親跟其他⼦子孫溝通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

14. 重新整理⼀一下
@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

15. 準備實作囉!!!!

16. 這次試試看⽤用 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

17. 這次試試看⽤用 client side 開發
@data/fbId.js
var myId = "cara4bear";21:
@fbTemplate.js
2/2

18. ⼀一開始開發 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.html
http://facebook.github.io/react/docs/addons.html

19. git checkout practice
開始 workshop 囉