摘要：用定義視圖組件在中，視圖組件是被使用定義的。你的組件可以有任何你想要的方法。組件可以接收來自于父組件通過屬性傳過來的數據。因為本教程專注于和，所以你可以拷貝下面的代碼到文件中。嘿嘿，來添加上吧只要把改名成就好了

在開始編寫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文件切分并識別三個最高等級的標簽：, ,還有