摘要：用定义视图组件在中，视图组件是被使用定义的。你的组件可以有任何你想要的方法。组件可以接收来自于父组件通过属性传过来的数据。因为本教程专注于和，所以你可以拷贝下面的代码到文件中。嘿嘿，来添加上吧只要把改名成就好了

在开始编写React视图库之前，要先添加react包，这个包囊括了你在Meteor应用中开始运行React所需要所有东西。这个React库自己可以自动将jsx文件编译，并且通过ReactMeteorData的mixin加载数据。我们将会在接下来的步骤中看到如何使用所有的这些东西。

打开一个新的终端，在你运行Meteor程序相同的文件夹下运行这样一条命令：

meteor add react

为了启动，我们来替换掉默认的启动应用的代码，接下来我们会讨论这是什么意思

首先，替换掉最开始的名为simple-todos-react.html的HTML文件内容。

然后, 删除simple-todos-react.js并建立三个新的文件

新建 simple-todos-react.jsx文件写入这些内容

if (Meteor.isClient) {
  // 下面的代码最会在客户端运行
 
  Meteor.startup(function () {
    // 在页面加载完成之后，使用 Meteor.startup 来渲染 React 组件
    React.render(, document.getElementById("render-target"));
  });
}

新建App.jsx文件，并写入以下内容：

// 不要在App前面添加 var
App = React.createClass({
  getTasks() {
    return [
      { _id: 1, text: "This is task 1" },
      { _id: 2, text: "This is task 2" },
      { _id: 3, text: "This is task 3" }
    ];
  },
 
  renderTasks() {
    return this.getTasks().map((task) => {
      return ;
    });
  },
 
  render() {
    return (
      

        

          
Todo List
        
 
        

          {this.renderTasks()}
        
      
    );
  }
});

新建Task.jsx文件，并写入

// Task 组件 - 表示单个的待做事宜
Task = React.createClass({
  propTypes: {
    // 这个组件从React的prop中接受task并显示
    // 我们使用propTypes来表示这个属性是必须的
    task: React.PropTypes.object.isRequired
  },
  render() {
    return (
      
{this.props.task.text}
    );
  }
});

我们刚刚在应用中添加的三个事情分别是以下的意思：

一个 App React组件

一个 Task React组件

一些包裹在 if (Meteor.isClient) { ... } 中的代码, 这些代码定义了在浏览器中会被执行，还有Meteor.startup, 这个让程序知道页面在被加载完成之后如何去调用代码。

在教程之后，我们会在添加和修改代码的时候参考这些组件

在我们的浏览器中，应用将会看起来像这个样子：

Todo List

This is task1

This is task2

This is task3

如果你的应用看起来并不是这样，请确认你的代码和例子上的一致

Meteor将你的应用中的HTML文件切分并识别三个最高等级的标签：, ,还有