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 一樣
  • 也就是說這三支程式是複製來複製去的

實際案例

等什麼?

Any Question?

Thanks for listening!

工商服務:https://goo.gl/ieEhhQ

React 的真理之門

By jigsawye

React 的真理之門

  • 4,835