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

文章有些过时了. 更多有关 React 的消息可以查看中文社区的导航:
http://nav.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/xBxwNBVAk
http://r.nodejs-china.org/#/topic/4f3fe7e70feaaa442405c1c0

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/react/jsx-compiler.html
Virtual DOM
Components
Flux(unidirectional data flow)

Build a Web Client,with React

Site http://r.nodejs-china.org/
GitHub https://github.com/jiyinyiyong/cnodejs-reader

-> 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/nodeclub/blob/master/views/topic/list.html

<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/react-router#whats-it-look-like

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