晚上在公司(Teambition)分享 React 的底稿

文章有些過期了. 更多有關 React 的消息能夠查看中文社區的導航:
http://nav.react-china.org
查找 React 中文文檔請往 https://doc.react-china.org/

---

幻燈片比較蒼白, 前面補上一些講過跟後面想到的內容吧.. 剛纔聽活動忘記這邊加點說明..
用 Backbone 的時候, 由於須要 jQuery 對 Model 和 View 兩邊作操做,
還有就是 View 之間甚至還有複雜的消息和狀態關聯, 難以理清楚,
當時就想, 若是都像服務器那樣, 一次操做, 直接更新數據渲染頁面多好啊

React 讓這樣一個思路很是清晰了, 並且性能和模塊化方面處理得也很是好
一方面是 Component 的設計很是適合拆分模塊和組合應用, 極爲靈活
另外一方面 react-router 也很是像 Express 的路由, 開發起來比較靈活
基於這些單頁面開發上的改變, 前端開發在日後端渲染那樣清晰的流程靠近
因此我在分享當中把這兩點在網頁上還有代碼當中作了一些演示~ 但願更多人注意 React.

考慮到分享內容是中文, 在場有老外, 因此有英文寫了大概的提綱:

---

CNode.js Web Client based on React

Render Apps with React

share my small web app built with React

Me: ChenYong, @jiyinyiyong
Fan of: CoffeeScript, React, Famo.us, etc.

---

@題葉

http://weibo.com/1640328892/x...
http://r.nodejs-china.org/#/t...

CSS -> jQuery(first meet 寸志) -> Backbone -> Ractive.js -> Vue.js -> React -> Famo.us

tools to build interactive user interface...

---

React

a View library from Facebook

• JSX http://facebook.github.io/rea...
• Virtual DOM
• Components
• Flux(unidirectional data flow)

---

Build a Web Client, with React

Site http://r.nodejs-china.org/
GitHub https://github.com/jiyinyiyon...

-> Me.. write JSX but in CoffeeScript

---

About CNode

Site: https://cnodejs.org/
API: https://cnodejs.org/api/

Chinese Node.js Community.
Has Clients contributed from Node.js community

---

CNode uses EJS as HTML Template

which supports partial, which is Composable!
https://github.com/cnodejs/no...

<div id="topic_list">
  <%- partial('../topic/abstract', {collection:topics, as:'topic'}) %>
</div>

Composition is important in programming.

---

Fun with React Components

in React

renderTitles: ->
    @state.topics.map (topic) ->
      TopicTitle key: topic.id, data: topic

Model Driven View, (DOM update aotumaticly, like Agular)

Components

• Loading
• Editor
• Hint
• Time
• Select

also

• Topic Title
• Comment
• Message

---

react-router

https://github.com/rackt/reac...

routes = Routes location: 'hash',
  Route page: '/', handler: Page,
    DefaultRoute handler: TopicList
    NotFoundRoute handler: TopicList
    Route name: 'messages', page: '/messages', handler: MessagesPage
    Route name: 'topic', path: '/topic/:topicid', handler: TopicPage
    Route name: 'user', path: '/user/:userid', handler: UserPage
    Route name: 'post', path: '/post', handler: PostPage

---

SIna Weibo http://weibo.com/reactchina
Forum http://react-china.org/

Thanks