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