开始使用 Meteor1.3

阅读 1320
收藏 28
2016-03-14
原文链接:www.jianshu.com

Meteor + React

Meteor开发团队正在全力推进1.3版本的发布,Meteor 1.3将是有史以来最棒的Meteor版本,它将更加融入和拥抱整个JavaScript社区。我们能够轻松地使用NPM包,集成React等前端框架,并且构建架构更加清晰的Meteor应用。

这个系列文章中,我们将以MeteoRain为例,讲解如何使用最新的Meteor1.3+React搭建一个新一代的Meteor应用。

在第一篇文章中,我们会讲述如何创建一个Meteor 1.3项目,如何通过NPM添加React和相应扩展包,并构建一个最简单的应用。

创建Meteor 1.3应用

由于目前Meteor 1.3仍然处于测试阶段,所以我们需要指定它的版本来创建项目,等到1.3正式发布后,你就不需要再添加--release参数啦。

meteor create --release 1.3-beta.11 meteorain.com
cd meteorain.com
rm -rf *

同我们之前所做的一样,删除创建项目时自动生成的文件。然后创建一些基本的目录结构:

mkdir client server lib public

创建NPM模块

由于我们要通过NPM来添加React等等包,所以我们首先得让这个项目变成一个NPM模块。

大家可能知道,Meteor1.2中有Meteor扩展包封装了React和Layout,那么我们为什么要通过NPM添加它们呢?

这是由于,许多Meteor封装的NPM包并不能在第一时间得到更新,相反,它们的原始NPM包总是最新的。而且,我们实际上并不需要再通过Meteor封装NPM包,尤其是前端方面的一些包,Meteor相关的包最好都是用到Meteor本身的核心功能的,而不是作为一个NPM包的wrapper。

好了,下面我们输入以下命令:

# 这会在你当前目录下创建一个 packages.json 文件
npm init -f

package.json文件描述了一个NPM包的所有相关信息,包括作者、简介、包依赖、构建等信息。它的格式必须是严格的JSON格式。如果你之前使用过Node和NPM的话,应该对此非常熟悉。

添加React相关包

下面,我们就要通过NPM添加React相关的扩展包了:

npm i --save react react-dom

这条命令做了两件事,第一是参数i所代表的install,即下载安装包到node_modules目录下,第二件则是--save参数代表的,将包记录添加到package.json文件中。

这是由于我们在分享项目时,不会带着node_modules这个目录,而只需要告诉别人我们用到了哪些包的哪个版本即可,然后他们可以自行去NPM下载安装。

创建React组件

我们创建client/app.jsx,并添加如下代码:

import React from 'react';

// define and export our Layout component
export const Layout = ({content}) => (
  

My App


{content}
); // define and export our Welcome component export const Welcome = ({name}) => (
Hello, {name}.
);

其中,importexport是ES6关于JavaScript模块的语法,具体可以参见这篇文章

接下来,我们将使用FlowRouterreact-mounter来吧这些组件挂载到页面上。

挂载组件

首先,添加FlowRouter包,当然,你也可以使用React Router,当然,在Meteor应用中,我们还是推荐FlowRouter

meteor add kadira:flow-router

接下来我们需要安装react-mounter,我们使用它来挂载一个组件到页面上。在Meteor1.2中,我们的做法是使用ReactLayout,它们的工作原理相同,不同的是react-mounter通过NPM发布。

npm i --save react-mounter

下面,我们来创建路由文件,也就是client/routes.jsx

import React from 'react';
import {mount} from 'react-mounter';
// load Layout and Welcome React components
import {Layout, Welcome} from './app.jsx';

FlowRouter.route("/", {
  action() {
    mount(Layout, {
        content: ()
    });
  }
});

现在,我们就完成了所有工作啦,你已经有了一个能够成功运行的Meteor 1.3应用啦。

注意事项

  1. 首先你需要安装Node,安装完会自带NPM,参考这里
  2. NPM国内被墙,可以修改到淘宝npm镜像源,参考这里
  3. 不要使用任何基于react-runtime的扩展包,那会带来两个版本的React,导致一系列问题。

参考

  • 原文链接:Getting Started with Meteor 1.3 beta and React
  • Github Repo: MeteoRain
  • 流星雨网站:MeteoRain全栈开发 ,网站会在基本UI完成后发布。
  • 评论