https://github.com/ReactMaker/simple_react_start_kit_2017

1. ReactMaker
Startkit
By ReactMaker - Andy

2. 關於我們

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

4. React 前世今生

5. 資料 javascript
以往
要把資料顯示到網頁上面很簡單

6. 隨著網頁愈做愈多，資料愈來多
資料 javascript
資料
資料
資料
資料
javascript
javascript
javascript
javascript
javascript
監聽事件
修改資料
通知其他 function
修改 DOM
...然後你就會亂掉

7. ReactJS 優點 元件化
海門 Hyman
用愛心來做事，用感恩的心做人
<User name="海門 Hyman" desc="用愛心來做事，用感恩的心做人" src="profile.png" />

8. 海門 Hyman
用愛心來做事，用感恩的心做人
迪倫 Andy
人永遠在追求快活，永遠在逃避痛苦
及米 Jimmy
信念、毅力、勇氣三者具備
小森 Winsome
互相瞭解是朋友，互相理解是知己
x
元件化可以幫助我們
不用複製貼上

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

10. 前端框架滿意度調查 2016
0
750
1500
2250
3000
React Vue Angular Angular2
滿意 不滿意
來源 http://stateofjs.com/2016/frontend/

11. 開始React之前........

12. 手把手開始 - 下載上課範例
https://github.com/ReactMaker/simple_react_start_kit_2017

13. React Component 產生器
https://reactmaker.github.io/react_generator/

14. $ git clone https://github.com/ReactMaker/simple_react_start_kit_2017.git
$ cd simple_react_start_kit_2017
$ npm install
$ npm start
如果安裝好了，那就輸入指令吧

15. 一切成功，就會看到以下畫面

16. $ npm run deploy
發佈到Github靜態網頁

17. DEMO
做個User Component吧

18. 別忘了追蹤我們