Meteor 入门教程(2) -编写模板

使用响应组件定义View

为了使用React作为我们的View库，让我们添加一些React相关的NPM库。在应用的目录下打开一个新的终端（命令行），然后运行：

meteor npm install --save react react-dom

提示：虽然meteor npm 和 npm 的不同点很重要，但是他们都支持相同的的特性。可以通过meteor npm的文档 来获取更多信息。

教程

替换原始启动代码

我们从替换默认的应用启动代码开始。主要需要进行如下步骤：

• 替换 HTML 文件中的内容

• 替换client/main.js的内容：

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
 
import App from '../imports/ui/App.js';
 
Meteor.startup(() => {
  render(, document.getElementById('render-target'));
});

添加组件

• 创建imports文件夹

现在我们需要创建一个叫imports的文件夹，该目录的作用与项目中的其他文件夹不同。在imports 文件夹外面的文件，将会在Meteor服务器启动的时候自动加载，然而imports 文件夹中的文件将在import声明的时候加载。

• 在imports文件夹中添加2个文件

在添加文件之前先添加文件夹ui，然后在ui文件夹下添加App.js和Task.js文件。具体内容如下：

import/ui/App.js

import React, { Component } from 'react';
 
import Task from './Task.js';
 
// App component - represents the whole app
export default class App extends Component {
  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) => (
      
    ));
  }
 
  render() {
    return (
      

        

          
Todo List
        
 
        

          {this.renderTasks()}
        
      
    );
  }
}

imports/ui/Task.js

import React, { Component } from 'react';
 
// Task component - represents a single todo item
export default class Task extends Component {
  render() {
    return (
      
{this.props.task.text}
    );
  }
}

• 小结

在这个过程中我们只做了三件事：

1. 添加了一个App的React 组件
2. 添加了一个Task的React 组件
3. 添加了一些初始化代码（在client/main.js中），这些代码将在页面加载后被调用，在Meteor.startup代码块中。这段代码用来加载其他组件，同时把其他组件渲染到html页面的#render-target元素中

你可以去Meteor手册的Application Structure article章节，阅读更多关于 imports 如何工作和组织代码的内容。

后续教程中，我们将会引用和修改这些组件和代码。

检查结果

在我们的浏览器中，将会看到大致如下的效果。

Todo List
This is task 1
This is task 2
This is task 3

接下来，我们开始分析这些代码是怎么工作的。

分析

1. Meteor中，使用HTML定义模板

Meteor 会解析 HTML 文件，并且定义了三个顶级标签, ,