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

分手后的思念是犯贱 2022-06-01 03:28 149阅读 0赞

>   
>

由于目前 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 框架规范进行应用开发的书，点击[这里][Link 1]可以了解更多并免费获取前三章的内容。

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

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

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

在我们开始前，你需要安装好 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…][github.com_meteor_mete]

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

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

1.  [voice.kadira.io/getting-sta…][voice.kadira.io_getting-sta]
2.  [voice.kadira.io/let-s-compo…][voice.kadira.io_let-s-compo]
3.  [voice.kadira.io/using-meteo…][voice.kadira.io_using-meteo]

#### 第一步 — 项目设置 ####

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

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

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

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

现在我们安装完样板项目，它完全包含了遵循 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 类。想要了解更多关于这个优秀的包的工作原理，可以在[这里][Link 3]查看组件列表。

现在让我们修改 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 版本有助于让你更加了解如何运用它们来构建一个应用。

[Link 1]: https://link.juejin.im/?target=http%3A%2F%2Fkenrogers.co%2Fmeteor-react
[Link 2]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fkadirahq%2Fmantra
[Meteor]: https://link.juejin.im/?target=https%3A%2F%2Fwww.meteor.com%2Ftutorials%2Freact%2Fcreating-an-app
[github.com_meteor_mete]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fmeteor%2Fmeteor%2Fblob%2Frelease-1.3%2Fpackages%2Fmodules%2FREADME.md
[voice.kadira.io_getting-sta]: https://link.juejin.im/?target=https%3A%2F%2Fvoice.kadira.io%2Fgetting-started-with-meteor-1-3-and-react-15e071e41cd1%23.qn4zj3420
[voice.kadira.io_let-s-compo]: https://link.juejin.im/?target=https%3A%2F%2Fvoice.kadira.io%2Flet-s-compose-some-react-containers-3b91b6d9b7c8%23.pd37xdmpn
[voice.kadira.io_using-meteo]: https://link.juejin.im/?target=https%3A%2F%2Fvoice.kadira.io%2Fusing-meteor-data-and-react-with-meteor-1-3-13cb0935dedb%23.3oe66g4ye
[Mantra]: https://link.juejin.im/?target=https%3A%2F%2Fkadirahq.github.io%2Fmantra%2F
[Mantra 1]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fmantrajs%2Fmantra-sample-blog-app
[Link 3]: https://link.juejin.im/?target=https%3A%2F%2Freact-bootstrap.github.io%2Fcomponents.html