使用响应组件定义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;
}
}
