Reactstrap
By ReactMaker - Andy
關於我們
成員介紹
Andy
一頭栽進前端世界的小小工程師,喜歡
玩各種前端新鮮事物。 目前專注於
ReactJS,使用過Flux、Redux、Mobx
等單向資料流進行專案開發。
Giant
在團隊中擔任聯絡窗口,目前是高應大
碩生,由於對前端開發有興趣,因此就
跟大大們一起組成讀書會,專注於學習
ReactJs。
Hyman
前端工程師,喜歡研究新的技術,也喜
歡研究有趣的UI跟效果,想要帶領更多
的人進入ReactJS的世界,最近在研究
Mobx.js!
React 前世今生
資料 javascript
以往
要把資料顯示到網頁上面很簡單
隨著網頁愈做愈多,資料愈來多
資料 javascript
資料
資料
資料
資料
javascript
javascript
javascript
javascript
javascript
監聽事件
修改資料
通知其他 function
修改 DOM
...然後你就會亂掉
ReactJS 優點 元件化
海門 Hyman
用愛心來做事,用感恩的心做人
<User name="海門 Hyman" desc="用愛心來做事,用感恩的心做人" src="profile.png" />
海門 Hyman
用愛心來做事,用感恩的心做人
迪倫 Andy
人永遠在追求快活,永遠在逃避痛苦
及米 Jimmy
信念、毅力、勇氣三者具備
小森 Winsome
互相瞭解是朋友,互相理解是知己
x
元件化可以幫助我們
不用複製貼上
ReactJS 優點 Virtual DOM
海門 Hyman
用愛心來做事,用感恩的心做人
迪倫 Andy
人永遠在追求快活,永遠在逃避痛苦
及米 Jimmy
信念、毅力、勇氣三者具備
小森 Winsome
互相瞭解是朋友,互相理解是知己
x
{
name: '海門 Hyman',
desc: '用愛心來做事,用感恩的心做人'
}
海綿 Hyman
用愛心來做事,用感恩的心做人
{
name: '海綿 Hyman',
desc: '用愛心來做事,用感恩的心做人'
}
前端框架滿意度調查 2016
0
750
1500
2250
3000
React Vue Angular Angular2
滿意 不滿意
來源 http://stateofjs.com/2016/frontend/
UI Library
易用程度:
功能性:
Reactstrap
易用程度:
功能性:
Material UI
易用程度:
功能性:
Ant Design
開始React之前........
先來看看成果吧
https://github.com/ReactMaker/reactstrap_example
手把手開始 - 下載上課範例
https://github.com/ReactMaker/simple_react_start_kit_2017
$ git clone https://github.com/ReactMaker/simple_react_start_kit_2017.git
$ cd simple_react_start_kit_2017
$ npm install
$ npm start
如果安裝好了,那就輸入指令吧
一切成功,就會看到以下畫面
$ npm run deploy
發佈到Github靜態網頁
DEMO
來套用Reactstrap吧
別忘了追蹤我們

React - Reactstrap example