使用ReactJS的State來實作購物車網站

1. ShoppingCart
React - state
By ReactMaker - Andy

2. 關於我們

3. 成員介紹
Andy
一頭栽進前端世界的小小工程師，喜歡
玩各種前端新鮮事物。 目前專注於
ReactJS，使用過Flux、Redux、Mobx
等單向資料流進行專案開發。
Giant
在團隊中擔任聯絡窗口，目前是高應大
碩生，由於對前端開發有興趣，因此就
跟大大們一起組成讀書會，專注於學習
ReactJs。
Hyman
前端工程師，喜歡研究新的技術，也喜
歡研究有趣的UI跟效果，想要帶領更多
的人進入ReactJS的世界，最近在研究
Mobx.js！

4. 前情提要
https://github.com/ReactMaker/reactstrap_example

5. 這次我們要做的是
https://github.com/ReactMaker/shopping_cart_demo

6. What is state?
狀態是Component的內部物件
儲存了可變動的資料
讓Component自己管理DOM元件的生成及變動

7. Data render
jQuery
需要的值從DOM抓取
並直接修改DOM
$(selector).text(“text1”)
資料導向，以state產生畫面
無直接對DOM進行操作
<span>{this.state.text}</span>React

8. 海門 Hyman
用愛心來做事，用感恩的心做人
迪倫 Andy
人永遠在追求快活，永遠在逃避痛苦
及米 Jimmy
信念、毅力、勇氣三者具備
小森 Winsome
互相瞭解是朋友，互相理解是知己
x
{
name: '海門 Hyman',
desc: '用愛心來做事，用感恩的心做人'
}
海綿 Hyman
用愛心來做事，用感恩的心做人
{
name: '海綿 Hyman',
desc: '用愛心來做事，用感恩的心做人'
}
React Render

9. Render 畫面
state
{count: 1}
render
1
setState
{count: 2}
1
2
3
2
簡單做個state示範吧

10. DEMO
來把它弄活吧

11. Step 1
取得API Data
https://goo.gl/jNEnKV

12. Step 2
建立cart state
顯示購物車物品數量
https://goo.gl/MDbA1i

13. Step 3
新增addToCart function
https://goo.gl/UGRbQt

14. Step 4
購買按鈕綁定addToCart function
https://goo.gl/63kckr

15. Step 5
購買後disabled
https://goo.gl/d2Zm5T

16. Step 6
購物車呈現購買物品
https://goo.gl/61aAZw

17. Step 7
計算總金額
https://goo.gl/tbVyba

18. Step 8
購物車加入刪除按鈕
https://goo.gl/dZHGrr

19. Step 9
購物車無商品時
不能點擊結帳按鈕
https://goo.gl/BC1Vpg

20. Step 10
點擊結帳按鈕
顯示總金額
https://goo.gl/MjsvdZ

21. What is props?
props是唯讀的且單向的
由父component傳給子component
<User name={this.state.name} />
props
props props
props

22. 切Component
carts
deleteCartItem
products
addToCart

23. 別忘了追蹤我們