Roof 是一个简单的前端应用框架，它能帮助你把页面上的数据和逻辑有效地管理起来。下图是它标准的调用过程。

面我们来简单写一段代码把它跑起来。环境推荐使用 antd :

bash

npm install antd-bin -g
mkdir roof-demo && cd roof-demo
antd init
npm install
npm install roof --save
antd server

antd 会自动帮我们把组件挂载到页面上，我们只需要关注组件就好了。 下面我们来创建一个 Roof 应用:

修改 `/src/component/App.jsx`为:

javascript

import React from 'react';
import Roof from 'roof';
import _ from 'roof/addon/react/container';
import User from './User';
import UserDataFactory from '../data/user';
import UserListenerFactory from '../event/user';

const App = Roof.createRootContainer({
  //告诉 Roof 应用的数据如何创建
  data: {
    user: UserDataFactory
  },
  //告诉 Roof 应用的事件和监听器信息
  events: {
    user: UserListenerFactory
  },
  render(){
    return <div>
      <div>Hello :</div>
      <User />
    </div>
  }
})

export default App;

这样一个基本的 Roof 应用就已经创建好了。 然后来定义应用数据 user `/data/user.js`，Roof 使用了非常接近传统**面向对象概念**的方式来定义数据:

javascript

import Roof from 'roof';

const User = Roof.Node.createClass({
  getFullName(){
    return this.get('name') + ' ' + this.get('family')
  }
})

export default function UserFactory(){
  return new User({
    name:'Jane',
    family : 'Smith',
    age : 17
  })
}

用图更好理解：

这样一个完整数据就定义好了，接下里定义事件和事件的监听器。事件本质是字符串。事件的监听器则是对象，它的 `fn` 属性必须定义一个函数作为触发事件时执行的函数。在 Roof 的事件定义文件中，我们可以直接使用函数来代替监听器对象，Roof 会帮我们转化。

`/src/event/user.js` :

javascript

export default function addAgeToUser(data) {

  return {
    'user.addAge': function ( ageToAdd ) {
      const user = data.get('user')
      const age = user.get('age')
      user.set('age', age + ageToAdd)
    }
  }
}

最后，我们来定义一个组件显示数据，同时能够触发事件让数据改变, `/src/component/User.jsx` :

javascript

import React from 'react';
import Roof from 'roof';

const User = Roof.createContainer({
  cursors : {
    user : 'user'
  },
  addAge(){
    this.bus.fire('user.addAge', 2)
  },
  render(){
    return <div>
      <div>{this.props.user.getFullName()}</div>
      <a onClick={this.addAge}>add 2 to age</a>
    </div>
  }
})

export default User;

恭喜，Roof 入门完成！查看完整代码仓库。或者继续阅读教程。