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}.
);
其中,import
和export
是ES6关于JavaScript模块的语法,具体可以参见这篇文章。
接下来,我们将使用FlowRouter和react-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应用啦。
注意事项
- 首先你需要安装Node,安装完会自带NPM,参考这里。
- NPM国内被墙,可以修改到淘宝npm镜像源,参考这里。
- 不要使用任何基于react-runtime的扩展包,那会带来两个版本的React,导致一系列问题。