基于 Meteor1.3 和 React 创建简单 App

原文链接 : Build A Journaling App with Meteor 1.3 (Beta), React, React-Bootstrap, and Mantra

译文出自 : 掘金翻译计划

译者 : yangzj1992

校对者: Zhongyi Tong, 刘鑫

由于目前 Meteor 1.3 正式版仍在开发中，在这份 Meteor 指南里我们采用了目前可以获取到的 Meteor 1.3 beta 版本进行开发。尽管 Meteor 1.3 版本很棒并有着许多精彩的改进，但部分人对于到底应该如何使用它来进行开发仍有一些困惑。 MDG(Meteor Development Group) 目前正在编写 Meteor 1.3 版指南，随着 1.3 正式版的发布，我们将会获得 Meteor 1.3 最佳开发实践的确切信息。

旁注：我写了一本关于使用 Meteor 1.3 ，React ，React-Bootstrap 遵循 Mantra 框架规范进行应用开发的书，点击这里可以了解更多并免费获取前三章的内容。

我写这份指南的目的是让开发者现在就能用上 Meteor 1.3 。当你阅读本指南时，需要留意 1.3 版本目前仍处于 beta 阶段，因此内容可能发生任何变化。我会尽我所能的更新这份指南来适应最新版本。如果你发现了什么过期的内容，希望能指出来让我知道。

在这份指南中，我们将要构建一个简单的任务清单，开个玩笑，不会再是任务清单了。我们将用 Meteor 1.3 ，React 和 React-Bootstrap 构建一个基本的日志应用。

我们将采用 Arunoda 的 Mantra 规范。如果你对 Mantra 不够熟悉，你可以访问这里了解更多。基本来说， Mantra 应用程序架构规范向我们提供了一个宜于维护的方式去构建 Meteor 应用。

在我们开始前，你需要安装好 Meteor 并需要对 Meteor 的原理及使用方法具备一定的理解。如果你并不熟悉，可以看看官方 Meteor 向导。

首先我们将通过一些资源来熟悉 Meteor 1.3 和 Mantra ，然后运用它们创建一个简单的日志应用。

了解 Meteor 1.3

首先我们要介绍 Meteor 1.3 并且了解它的主要改动包含什么。在 1.3 版本中它最大的改动是完全支持 ES2015 并提供了模块功能。

一开始你会发现这和我们以往开发 Meteor 应用很不一样，但一旦你习惯了你会发现体验是相当不错的，尤其是你要使用 Mantra 的架构的话。

这里有一篇关于 Meteor 1.3 的模块机制是怎样工作的精彩介绍：github.com/meteor/mete…

使用模块可以让我们更容易的去写更多的代码，更加模块化。这样我们可以更好地组织我们的应用，由于 Meteor 1.3 也添加了对 npm 包的支持，我们不必再像过去那样只有 Meteor 包支持的情况下进行开发了。

接下来，你可以看看这三篇文章来了解如何在 Meteor 1.3 中配置 React ，并用它来处理数据。第二篇会向你介绍容器组件，这是使用 Mantra 开发的一个重要部分。

第一步 — 项目设置

通常来说，我们需要做的第一件事就是通过 Meteor 1.3 来创建我们的 Meteor 项目，像下面这样。

meteor create journal --release 1.3-modules-beta.8

但是稍等一下，构建一个 Mantra 应用需要非常多的项目设置
，为了加快开发速度，我已经使用 Meteor 1.3，React，Mantra 创建创建了一个样板项目。我们就用它来代替初始方案直接开始。

如果你想知道这些具体做了什么，查看 Mantra 规范和 Mantra 博客应用实例。

现在我们安装完样板项目，它完全包含了遵循 Mantra 规范的 Meteor 项目中所有你需要的核心文件和目录。

你可以通过以下命令 clone 项目：

git clone git@github.com:kenrogers/mantraplate.git

然后切换到刚创建的目录中运行

npm install

这样会安装本应用依赖的所有的包。你可以查看示例项目来熟悉整个目录结构。

它包含完整的布局，路由系统以及具有注册，登录登出功能的用户系统。

在这份指南中，我们将要讨论这些内容是如何组合在一起的，以及如何使用户在应用中添加日志记录的功能。

在我们添加内容前我们来看看样例项目的目录结构，你可以发现，在客户端文件夹中我们将整个应用分成一个个模块，这些模块是你的应用的主要组成部分。

我们总是需要一个核心模块，如果你的 APP 比较简单，这个核心模块就是你所唯一需要的。在我们的 APP 中包含了核心模块和用户模块，这里还要加入一个条目模块来添加我们的日志记录。

这样的模块结构让我们可以轻松地组织我们的代码。

在用户模块中，看看 containers 和 components 文件夹中的 NewUser 文件，。container 文件夹如下所示。

import NewUser from ‘../components/NewUser.jsx’;
import {useDeps, composeWithTracker, composeAll} from ‘mantra-core’;
export const composer = ({context, clearErrors}, onData) => {
 const {LocalState} = context();
 const error = LocalState.get(‘CREATE_USER_ERROR’);
 onData(null, {error});
 return clearErrors;
};
export const depsMapper = (context, actions) => ({
 create: actions.users.create,
 clearErrors: actions.users.clearErrors,
 context: () => context
});
export default composeAll(
 composeWithTracker(composer),
 useDeps(depsMapper)
)(NewUser);

你可以看到我们在这里实际上并没有进行任何渲染，我们只是做一些设置和清理的工作，然后在 NewUser 组件中我们才实际上渲染了视图。

如果你运行应用并访问 /register 路由，打开 React 开发者工具，你可以看到 react-komposer 正在后台执行。它会创建一个容器组件负责处理底层子组件的数据或是 UI 组件。

当我们获取数据时容器组件的用途将会得到具体的展现，但是这里我们不这样处理。

第二步 — 原型制作

对于这个日志程序我们准备使用 React-Bootstrap 。它可以很方便地使用 Bootstrap 来创建 React 应用。这种方式易于上手，并且保持了模块化，正如我们所愿。

让我们设置好并添加一个简单的表单。

首先让我们为项目添加 react-bootstrap

npm install react-bootstrap

因为 React-Bootstrap 并不依赖任何特定的 Bootstrap 库，所以我们需要自行添加，现在让我们添加 Twitter 的官方 Meteor 包。

meteor add twbs:bootstrap

首先我们用 React-Bootstrap 来修改 MainLayout.jsx 文件的内容如下：

import React from ‘react’;
import {Grid, Row} from ‘react-bootstrap’;
const Layout = ({content = () => null }) => (
 <grid>
  <row>
   <h1>Journal</h1>
   {content()}
  </row>
 </grid>
);
export default Layout;

在这里，我们从 react-boostrap 包中引入 Grid 和 Row 组件，并且像使用 div 一样为它们添加合适的 bootstrap 类。想要了解更多关于这个优秀的包的工作原理，可以在这里查看组件列表。

现在让我们修改 NewUser 和 Login UI 的组件让他们更友好地贴近 Bootstrap 。打开 NewUser.jsx 文件进行如下修改：

import React from ‘react’;
import { Col, Panel, Input, ButtonInput, Glyphicon } from ‘react-bootstrap’;
class NewUser extends React.Component {
 render() {
 const {error} = this.props;
 return (
   <col xs="{12}" sm="{6}" smoffset="{3}">
    <panel>
     <h1>Register</h1>
     {error ? <p style="{{color:" ‘red’}}="">{error}</p> : null}
     <form>
      <input ref="”email”" type="”email”" placeholder="”Email”">
      <input ref="”password”" type="”password”" placeholder="”Password”">
      <buttoninput onclick="{this.createUser.bind(this)}" bsstyle="”primary”" type="”submit”" value="”Sign" up”="">
     </buttoninput></form>
    </panel>

  )
 }
createUser(e) {
 e.preventDefault();
 const {create} = this.props;
 const {email, password} = this.refs;
 create(email.getValue(), password.getValue());
 email.getInputDOMNode().value = ‘’;
 password.getInputDOMNode().value = ‘’;
 }
}
export default NewUser;

这个表单十分简单，它仅仅负责显示自身并调用 create 方法。这里我们简单介绍一下。

在我们的 actions 文件夹中，它们负责处理我们应用的逻辑，下面这一行

create(email.getValue(), password.getValue());

将调用该方法并创建实际用户。 Mantra 重点强调了希望把一切分离成单独的文件。因此，我们将文件分为展示、逻辑、以及这个应用程序的每个组件。

现在让我们修改登录表单如下：

import React from ‘react’;
import { Col, Panel, Input, ButtonInput, Glyphicon } from ‘react-bootstrap’;
class Login extends React.Component {
 render() {
  const {error} = this.props;
  return (
   <col xs="{12}" sm="{6}" smoffset="{3}">
    <panel>
     <h1>Login</h1>
     {error ? <p style="{{color:" ‘red’}}="">{error}</p> : null}
     <form>
      <input ref="”email”" type="”email”" placeholder="”Email”">
      <input ref="”password”" type="”password”" placeholder="”Password”">
      <buttoninput onclick="{this.login.bind(this)}" bsstyle="”primary”" type="”submit”" value="”Login”/">
     </buttoninput></form>
    </panel>

  )
 }
login(e) {
 e.preventDefault();
 const {loginUser} = this.props;
 const {email, password} = this.refs;
 loginUser(email.getValue(), password.getValue());
 email.getInputDOMNode().value = ‘’;
 password.getInputDOMNode().value = ‘’;
 }
}
export default Login;

这基本上是一个相同的表单，但我们将用登录方法来代替它的逻辑。

React-Boostrap 非常易于使用，我们只需要安装好项目，使用 import 函数引入每个我们想要引用的组件，就像其他类型一样渲染这些组件。

我们处理使用数据的方法则有一些不同，因为它是组件，而不是我们实际需要处理的输入内容，我们需要使用特殊的 React-Bootstrap 函数 getValue() 来帮我们轻松地取值。

第二步 — 添加条目模块

现在，我们将添加新的模块来管理我们的日志条目，首先让我们设置目录和文件。

mkdir client/modules/entries
cd client/modules/entries
mkdir actions components containers
touch index.js
touch actions/index.js actions/entries.js
touch components/NewEntry.jsx components/Entry.jsx components/EntryList.jsx
touch containers/NewEntry.js containers/Entry.js containers/EntryList.js

好了，现在我们有了应用中所需要的所有文件和文件夹。让我们来做一些真正的开发工作吧。

首先，让我们再来看一下我们创建的应用结构。这里我们制造了一个简单的 Mantra 模块。我们通过这些目录文件来看看他们是怎么做到交互的。通过这些将会让你很好地理解如何使用 Meteor 1.3 和 Mantra 。

索引

Mantra 有一个庞大的单一入口。这个索引文件负责导入内容随后导出路由和动作，这样在我们导入模块时即可使用。通过这种方式我们不用担心再单独导入每个文件。

import actions from ‘./actions’;
import routes from ‘../core/routes.jsx’;
export default {
 routes,
 actions
};

动作

动作文件夹负责我们应用的所有逻辑。你可以看到我们在这里创建了两个文件。首先是一个索引文件。这是一个类似目的模块的索引文件。我们向里面添加下面的内容。

import entries from ‘./entries’;
export default {
 entries
};

上面所做的就是导入条目文件，在条目文件中有我们的动作逻辑。这只是为了更容易地从其他文件导入我们的逻辑。

接下来我们要添加实际逻辑，这些包含了我们的应用逻辑。这里我们要添加一个创建条目的函数方法。

你可以通过查看例子中 users 模块的方法文件来了解这是怎么工作的。

在 actions.js 中添加下面的内容来补全条目模块。

export default {
 create({Meteor, LocalState, FlowRouter}, text) {
  if (!text) {
   return LocalState.set(‘CREATE_ENTRY_ERROR’, ‘Text is required.’);
  }
  LocalState.set(‘CREATE_ENTRY_ERROR’, null);
  Meteor.call(‘entries.create’, text, (err) => {
   if (err) {
    return LocalState.set(‘CREATE_ENTRY_ERROR’, err.message);
   }
  });
 }
};

当我们填写表格来创建一个新条目时，这就是会被执行的方法，我们就快设置好这些组件了，让我们先别管服务端的东西，为我们的条目创建集合和方法。

在 lib 目录中打开 collections.js 文件然后添加条目集合。

export const Entries = new Mongo.Collection(‘entries’);

现在在 server 目录下的 methods 目录中添加 entries.js 文件，并添加以下内容来创建一个创建新条目的方法。

import {Entries} from ‘/lib/collections’;
import {Meteor} from ‘meteor/meteor’;
import {check} from ‘meteor/check’;
export default function () {
 Meteor.methods({
  ‘entries.create’(text) {
   check(text, String);
   const createdAt = new Date();
   const entry = {text, createdAt};
   Entries.insert(entry);
  }
 });
}

这是一个我们刚创建的将要被调用的方法。

我们还需要将下面代码添加到 methods 文件夹中的 index.js 文件。

import entries from ‘./entries’;
export default function () {
 entries();
}

组件

组件目录存放着我们的 UI 组件。这里的组件只负责显示我们的接口内容，他们不操作任何数据，这些是容器组件需要做的。

让我们创建 UI 组件，然后我们将建立相应的容器组件。

import React from ‘react’;
import {Grid, Row, Col} from 'react-bootstrap';
const Entry = ({entry}) => (
 <grid>
  <row>
   <col xs="{6}" xsoffset="{3}">
    <p>
     {entry.text}
    </p> 

  </row>
 </grid>
);
export default Entry;

这里获取到的 {entry} 对象是我们容器组件要传递给它属性。它包含了我们的数据。

接下来我们创建 NewEntry 组件。

import React from ‘react’;
import { Col, Panel, Input, ButtonInput, Glyphicon } from ‘react-bootstrap’;
class NewEntry extends React.Component {
 render() {
  const {error} = this.props;
  return (
   <col xs="{12}" sm="{6}" smoffset="{3}">
    <panel>
     <h1>Add a New Entry</h1>
     {error ? <p style="{{color:" ‘red’}}="">{error}</p> : null}
     <form>
      <input ref="”text”" type="”textarea”" placeholder="”Add" your="" entry”="">
      <buttoninput onclick="{this.newEntry.bind(this)}" bsstyle="”primary”" type="”submit”" value="”Create”/">
     </buttoninput></form>
    </panel>

  )
 }
 newEntry(e) {
  e.preventDefault();
  const {create} = this.props;
  const {text} = this.refs;
  create(text.getValue());
  text.getInputDOMNode().value = ‘’;
 }
}
export default NewEntry;

这里我们使用了更多的 React-Bootstrap 组件，你会留意到为了获取输入的值，我们用了一个特别的 getValue() 方法。这是因为我们的渲染组件实际上并不是输入框，输入框是在这些组件的内部。所以我们需要使用这个函数来访问它。

最后，我们创建一个 EntryList 组件。

import React from ‘react’;
import {Grid, Row, Col, Panel} from ‘react-bootstrap’;
const EntryList = ({entries}) => (
 <grid>
  <row>
   {entries.map(entry => (
    <col xs="{3}" key="{entry._id}">
     <panel>
      <p>{entry.title}</p>
      <a href="{`/entry/${entry._id}`}">View Entry</a>
     </panel>

   ))}
  </row>
 </grid>
);
export default EntryList;

接下来，我们通过属性来获取数据，设置一些 React-Bootstrap 组件，并为每个入口映射一个对应专属的面板。

现在，让我们来设置这些容器组件，首先从最简单的 NewEntry 容器组件开始。

import NewEntry from ‘../components/NewEntry.jsx’;
import {useDeps, composeWithTracker, composeAll} from ‘mantra-core’;
export const composer = ({context, clearErrors}, onData) => {
 const {LocalState} = context();
 const error = LocalState.get(‘CREATE_ENTRY_ERROR’);
 onData(null, {error});
 return clearErrors;
};
export const depsMapper = (context, actions) => ({
 create: actions.entries.create,
 clearErrors: actions.entries.clearErrors,
 context: () => context
});
export default composeAll(
 composeWithTracker(composer),
 useDeps(depsMapper)
)(NewEntry);

这里你应该已经对 react-komposer 较为熟悉了，我们将用它来创建这一容器组件。它负责创建一个容器组件，用于处理错误、调用合适的动作。在大多数情况下，它还将获取数据并通过属性传给 UI 组件。

depsMapper 通过 react-komposer 中的 useDeps 函数检索动作及上下文内容并将它们传递给 UI 组件。

clearErrors 方法负责清除组件卸载时发生的所有错误。

让我们在创建条目方法时创建这一方法。

clearErrors({LocalState}) {
 return LocalState.set(‘SAVING_ERROR’, null);
}

现在我们将要创建 EntryList 组件的容器。这个稍许有些复杂，因为我们会实际上获取一些数据。

import EntryList from ‘../components/EntryList.jsx’;
import {useDeps, composeWithTracker, composeAll} from ‘mantra-core’;
export const composer = ({context}, onData) => {
 const {Meteor, Collections} = context();
 if (Meteor.subscribe(‘entries.list’).ready()) {
  const entries = Collections.Entries.find().fetch();
  onData(null, {entries});
 }
};
export default composeAll(
 composeWithTracker(composer),
 useDeps()
)(EntryList);

这也确实与其他容器组件较为相似，但一个重要的区别在于，我们会检查我们的入口集合条目结合，并将它们分配给一个变量。最终我们通过 onData 函数将这个变量传给 UI 组件。

让我们在 publications 目录下的 entries.js 文件中设置发布

import {Entries} from ‘/lib/collections’;
import {Meteor} from ‘meteor/meteor’;
import {check} from ‘meteor/check’;
export default function () {
 Meteor.publish(‘entries.list’, function () {
  const selector = {};
  const options = {
   fields: {_id: 1, text: 1},
   sort: {createdAt: -1}
  };
  return Entries.find(selector, options);
 });
}

同时我们将要为此发布创建一个 index 文件。

import entries from ‘./entries’;
export default function () {
 entries();
}

我们需要在 server 目录中打开 main.js 文件，取消注释行，导入 publications 和 methods ，所以文件就像这样：

import publications from ‘./publications’;
import methods from ‘./methods’;

// publications();
// methods();

最后我们将要为独立的 Entry 组件创建容器组件。

import Entry from ‘../components/Entry.jsx’;
import {useDeps, composeWithTracker, composeAll} from ‘mantra-core’;
export const composer = ({context, entryId}, onData) => {
 const {Meteor, Collections} = context();
 if (Meteor.subscribe(‘entries.single’, entryId).ready()) {
  const entry = Collections.Entries.findOne(entryId);
  onData(null, {entry});
 } else {
  const entry = Collections.Entries.findOne(entryId);
  if (entry) {
   onData(null, {entry});
  } else {
   onData();
  }
 }
};
export default composeAll(
 composeWithTracker(composer),
 useDeps()
)(Entry);

此容器使用了一个 entryId (将通过我们之后设立的一个路由进行传递)并且找到一个合适的入口，来通过属性传递它给UI组件。

让我们在之前设置的发布列表中快速设置发布来展示发布条目。

Meteor.publish(‘entries.single’, function (entryId) {
 check(entryId, String);
 const selector = {_id: entryId};
 return Entries.find(selector);
});

现在让我们设置我们的路由吧。

路由

打开 routes 文件来添加一些新的路由，修改 routes 文件类似如下所示。

import React from ‘react’;
import {mount} from ‘react-mounter’;
import Layout from ‘./components/MainLayout.jsx’;
import Home from ‘./components/Home.jsx’;
import NewUser from ‘../users/containers/NewUser.js’;
import Login from ‘../users/containers/Login.js’;
import EntryList from ‘../entries/containers/EntryList.js’;
import Entry from ‘../entries/containers/Entry.js’;
import NewEntry from ‘../entries/containers/NewEntry.js’;
export default function (injectDeps, {FlowRouter}) {
 const MainLayoutCtx = injectDeps(Layout);
 FlowRouter.route(‘/’, {
  name: ‘items.list’,
  action() {
   mount(MainLayoutCtx, {
    content: () => (<entrylist>)
   });
  }
 });
 FlowRouter.route(‘/entry/:entryId’, {
  name: ‘entries.single’,
  action({entryId}) {
   mount(MainLayoutCtx, {
    content: () => (<entry entryid="{entryId}/">)
   });
  }
 });
FlowRouter.route(‘/new-entry’, {
  name: ‘newEntry’,
  action() {
   mount(MainLayoutCtx, {
    content: () => (<newentry>)
   });
  }
 });

 FlowRouter.route(‘/register’, {
  name: ‘users.new’,
  action() {
   mount(MainLayoutCtx, {
    content: () => (<newuser>)
   });
  }
 });
FlowRouter.route(‘/login’, {
  name: ‘users.login’,
  action() {
   mount(MainLayoutCtx, {
    content: () => (<login>)
   });
  }
 });
FlowRouter.route(‘/logout’, {
  name: ‘users.logout’,
  action() {
   Meteor.logout();
   FlowRouter.go(‘/’);
  }
 }); 
}</login></newuser></newentry></entry></entrylist>

在运行我们的应用之前我们还需要做最后一件事，打开 main.js 文件并导入我们的 entries 模块，修改内容如下。

import {createApp} from ‘mantra-core’;
import initContext from ‘./configs/context’;
// modules
import coreModule from ‘./modules/core’;
import usersModule from ‘./modules/users’;
import entriesModule from ‘./modules/entries’;
// init context
const context = initContext();
// create app
const app = createApp(context);
app.loadModule(coreModule);
app.loadModule(usersModule);
app.loadModule(entriesModule);
app.init();

现在我们设置了我们的所有路由并且应用已经准备好运行，让我们切换目录到根目录并运行

meteor

你可以看到应用程序在 Mantra 提供的默认加载效果中启动，让我们添加一个条目，这样我们应该可以在屏幕上看到效果了。

访问 localhost:3000/new-entry ，填写并提交表单来添加一个条目。

然后访问根目录，你应该可以看到一个可以逐个查看链接的的条目列表。

希望这个简单的 Mantra 引导以及目前的 Meteor 1.3 beta 版本有助于让你更加了解如何运用它们来构建一个应用。