摘要：用定義視圖組件在中，視圖組件是被使用定義的。你的組件可以有任何你想要的方法。組件可以接收來(lái)自于父組件通過屬性傳過來(lái)的數(shù)據(jù)。因?yàn)楸窘坛虒Ｗ⒂诤?，所以你可以拷貝下面的代碼到文件中。嘿嘿，來(lái)添加上吧只要把改名成就好了

在開始編寫React視圖庫(kù)之前，要先添加react包，這個(gè)包囊括了你在Meteor應(yīng)用中開始運(yùn)行React所需要所有東西。這個(gè)React庫(kù)自己可以自動(dòng)將jsx文件編譯，并且通過ReactMeteorData的mixin加載數(shù)據(jù)。我們將會(huì)在接下來(lái)的步驟中看到如何使用所有的這些東西。

打開一個(gè)新的終端，在你運(yùn)行Meteor程序相同的文件夾下運(yùn)行這樣一條命令：

meteor add react

為了啟動(dòng)，我們來(lái)替換掉默認(rèn)的啟動(dòng)應(yīng)用的代碼，接下來(lái)我們會(huì)討論這是什么意思

首先，替換掉最開始的名為simple-todos-react.html的HTML文件內(nèi)容。

然后, 刪除simple-todos-react.js并建立三個(gè)新的文件

新建 simple-todos-react.jsx文件寫入這些內(nèi)容

if (Meteor.isClient) {
  // 下面的代碼最會(huì)在客戶端運(yùn)行
 
  Meteor.startup(function () {
    // 在頁(yè)面加載完成之后，使用 Meteor.startup 來(lái)渲染 React 組件
    React.render(, document.getElementById("render-target"));
  });
}

新建App.jsx文件，并寫入以下內(nèi)容：

// 不要在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 組件 - 表示單個(gè)的待做事宜
Task = React.createClass({
  propTypes: {
    // 這個(gè)組件從React的prop中接受task并顯示
    // 我們使用propTypes來(lái)表示這個(gè)屬性是必須的
    task: React.PropTypes.object.isRequired
  },
  render() {
    return (
      
{this.props.task.text}
    );
  }
});

我們剛剛在應(yīng)用中添加的三個(gè)事情分別是以下的意思：

一個(gè) App React組件

一個(gè) Task React組件

一些包裹在 if (Meteor.isClient) { ... } 中的代碼, 這些代碼定義了在瀏覽器中會(huì)被執(zhí)行，還有Meteor.startup, 這個(gè)讓程序知道頁(yè)面在被加載完成之后如何去調(diào)用代碼。

在教程之后，我們會(huì)在添加和修改代碼的時(shí)候參考這些組件

在我們的瀏覽器中，應(yīng)用將會(huì)看起來(lái)像這個(gè)樣子：

Todo List

This is task1

This is task2

This is task3

如果你的應(yīng)用看起來(lái)并不是這樣，請(qǐng)確認(rèn)你的代碼和例子上的一致

Meteor將你的應(yīng)用中的HTML文件切分并識(shí)別三個(gè)最高等級(jí)的標(biāo)簽：, ,還有