晚上在公司(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