React 的真理之門
jigsawye@tcf2e#20151203
Learn once, write anywhere.
拿這個做例子
裡面有這些東西
{
"title": "台中前端社群 近期公開活動 - KKTIX",
"updated": "2015-12-03T10:59:58.732+08:00",
"entry": [
{
"url": "http://taichung-frontend.kktix.cc/events/151203",
"published": "2015-12-03T19:15:00.000+08:00",
"title": "台中前端社群 12/03 定期聚會 @夢種子",
"summary": "React.js 王者降臨 用react.js打造未來的樂高世界 這是一場定期主題性聚會,歡迎一起來聊聊!! 不是上課而是聚會,不論是初學者或是資深人士,期望你能在這聚會教學相長獲得更多。 前端框架經",
"content": "時間:2015/12/03 19:15(+0800)~21:15\n地點:Dreamseeds 夢種子 / 西屯區河南路二段262號14F",
"author": {
"name": "台中前端社群",
"uri": "http://taichung-frontend.kktix.cc"
}
},
{
"url": "http://taichung-frontend.kktix.cc/events/151119",
"published": "2015-11-19T19:15:00.000+08:00",
"title": "台中前端社群 11/19 定期聚會 @夢種子",
"summary": "Javascript三代同堂 承先啟後的ES6 蓄勢待發的ES7 這是一場定期主題性聚會,歡迎一起來聊聊!! 不是上課而是聚會,不論是初學者或是資深人士,期望你能在這聚會教學相長獲得更多。 身為前端的",
"content": "時間:2015/11/19 19:15(+0800)~21:15\n地點:Dreamseeds 夢種子 / 西屯區河南路二段262號14F",
"author": {
"name": "台中前端社群",
"uri": "http://taichung-frontend.kktix.cc"
}
},
{
"url": "http://taichung-frontend.kktix.cc/events/151105",
"published": "2015-11-05T19:15:00.000+08:00",
"title": "台中前端社群 11/5 定期聚會 @夢種子",
"summary": "Canvas是HTML5的新標籤之一。透過Canvas能為網站的表現方式增添無限的可能性,身為前端開發人員的你一定要了解Canvas如何改變網頁的呈現方式。",
"content": "時間:2015/11/05 19:15(+0800)~21:15\n地點:Dreamseeds 夢種子 / 西屯區河南路二段262號14F",
"author": {
"name": "台中前端社群",
"uri": "http://taichung-frontend.kktix.cc"
}
},
...
]
}
Demo
Demo
Web(React)
&& HOT RELOADING
Demo
PC/OSX App(Electron)
&& HOT RELOADING
Demo
iOS App(React Native)
&& LIVE RELOADING
而且可以玩真的
總結
- 邏輯重用率近 100%
- 基本上 Web 跟 PC/OSX App的程式幾乎一樣
- React Native 僅需調整 UI 元件,
而元件的設計方式幾乎和 Web 一樣 - 也就是說這三支程式是複製來複製去的
實際案例
- React
- 這太多了隨便找都有
- Electron
- React Native
等什麼?
- React https://facebook.github.io/react/
- Electron http://electron.atom.io/
- React Native https://facebook.github.io/react-native/
Any Question?
Thanks for listening!
React 的真理之門
By jigsawye
React 的真理之門
- 4,972