使用响应组件定义View

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

meteor npm install --save react react-dom

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

教程

替换原始启动代码

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

替换 HTML 文件中的内容

<head>
    <title>Todo List</title>
</head>
 
<body>
    <div id="render-target"></div>
</body>

替换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(<App />, 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) => (
      <Task key={task._id} task={task} />
    ));
  }
 
  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
 
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

imports/ui/Task.js

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

小结

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

添加了一个App的React 组件
添加了一个Task的React 组件
添加了一些初始化代码（在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

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

分析

Meteor中，使用HTML定义模板

Meteor 会解析 HTML 文件，并且定义了三个顶级标签<head>, <body>, <template>.

<head> 标签中的内容，会被添加到HTML文件的head部分，然后发送到客户端；
<body> 标签中的内容，会被添加到HTML文件的body部分就像常规的HTML文件一样；
<template> 标签中的内容，会被编译为Meteor模板，可以在HTML文件中通过{{templateName}} 引用，或者在JavaScript 文件中，通过Template.templateName引用；
同样body 部分的内容也可以在JavaScript中通过Template.body引用，可以将body想象成为一个特殊的'父'模板，里面的内容为子模板。

给模板添加逻辑和数据

在HTML文件的所有代码都会被Meteor's Spacebars compiler 编译器编译。Spacebars 该编译器使用双花括号的标签也标识在界面（view）中的逻辑和数据，例如{{#each}}、{{#if}}.

可以通过定义helpers 从JavaScript代码中向模板发送数据。在上面的代码中，我们在Template.body中定义了一个tasks的helper,它返回一个数组。在HTML的body标签中，我们使用{{#each tasks}}标签来迭代我们的数组，然后根据每一个数据来生成task模板。其中，在#each模块中，我们通过{{text}}来获取数组元素的text属性来展示。

接下来，我们还会学习如何通过helpers来使我们的模板动态从数据库中获取显示数据。

附件

为了有更好的用户体验，本教程建议使用如下css样式。建议复制如下代码到client/main.css文件中。

client/main.css

/* CSS declarations go here */
body {
  font-family: sans-serif;
  background-color: #315481;
  background-image: linear-gradient(to bottom, #315481, #918e82 100%);
  background-attachment: fixed;
 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 
  padding: 0;
  margin: 0;
 
  font-size: 14px;
}
 
.container {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100%;
  background: white;
}
 
header {
  background: #d2edf4;
  background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
  padding: 20px 15px 15px 15px;
  position: relative;
}
 
#login-buttons {
  display: block;
}
 
h1 {
  font-size: 1.5em;
  margin: 0;
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 1em;
}
 
form {
  margin-top: 10px;
  margin-bottom: -10px;
  position: relative;
}
 
.new-task input {
  box-sizing: border-box;
  padding: 10px 0;
  background: transparent;
  border: none;
  width: 100%;
  padding-right: 80px;
  font-size: 1em;
}
 
.new-task input:focus{
  outline: 0;
}
 
ul {
  margin: 0;
  padding: 0;
  background: white;
}
 
.delete {
  float: right;
  font-weight: bold;
  background: none;
  font-size: 1em;
  border: none;
  position: relative;
}
 
li {
  position: relative;
  list-style: none;
  padding: 15px;
  border-bottom: #eee solid 1px;
}
 
li .text {
  margin-left: 10px;
}
 
li.checked {
  color: #888;
}
 
li.checked .text {
  text-decoration: line-through;
}
 
li.private {
  background: #eee;
  border-color: #ddd;
}
 
header .hide-completed {
  float: right;
}
 
.toggle-private {
  margin-left: 5px;
}
 
@media (max-width: 600px) {
  li {
    padding: 12px 15px;
  }
 
  .search {
    width: 150px;
    clear: both;
  }
 
  .new-task input {
    padding-bottom: 5px;
  }
}