当 Meteor 遇见 React

Meteor 是目前 Nodejs 社区最为流行的全栈框架。Meteor 官方支持三种前端框架来写 UI，分别是 Blaze ，React 和 Angular 。本节来把 Meteor 安装上，然后看看 React 如何与 Meteor 协同工作。

视频列表

第一个小任务：用 Github 托管网站，进入课程的论坛。

搭建 Github 个人网站搭建 Github 项目网站论坛沟通

安装 meteor

安装参考这里，说到底就是下面一条命令：

curl https://install.meteor.com/ | sh

这样 meteor 就装好了。

创建一个新项目

来新建一个项目

meteor create s3-meteor

这样一个简单的 meteor 项目就有了，来启动一下

cd s3-meteor meteor

这样，就可以浏览器中访问 http://localhost:3000/ 看到运行效果。自动生成的代码，我做了一个 commit

meteor create s3-meteor

本节后续所有代码

meteor react

不用 blaze 用 react

默认 meteor 项目的 UI 库是 Blaze ，所以生成的这几个文件中的语法也是 Blaze 的语法，咱们就不详细介绍了。因为咱们要用一个更为强大的，也就是 react 。

既然这样，那么项目中可以看到的这三个文件就可以删除了

rm -rf *

但是项目现在可不是空的，里面有一个重要的隐藏文件夹 .meteor

ls  .meteor local/     packages  platforms release   versions

其中 local/ 文件夹是很大的，因为里面装了很多包，但是做版本控制的时候也不用担心，因为和它同级的位置有一个 .gitignore 里面已经注明了忽略这个文件夹。其他的几个文件是需要跟源码一起进行版本控制的，里面分别存放了包的版本信息。

用 meteor 装包

meteor 作为一个快速开发框架，当然需要有自己的一个很大的包仓库了，比如我们运行

meteor add react

注意：个别时候需要翻墙才能安装成功。

就可以把 meteor 官方提供的 react 这个包（注意跟 npm 中提供的 react 包要区分开）安装上。那么安装位置就是前面提到的 .meteor/local 里面，并且包自身的版本信息也在 .meteor/versions 文件中记录了。

命令执行完毕，命令行输出中看到安装了下面这几个包

coffeescript        added, version 1.0.11
cosmos:browserify   added, version 0.9.3
jsx                 added, version 0.2.3
react               added, version 0.14.3
react-meteor-data   added, version 0.2.4
react-runtime       added, version 0.14.4
react-runtime-dev   added, version 0.14.4
react-runtime-prod  added, version 0.14.4

其中最主要的是来自 facebook 的 react 包，还有 meteor 团队添加的 react-meteor-data 这个包，用来沟通 meteor 和 react 之间的数据的。其他的包咱们用到的时候再提。

跑一个 react 的 Hello World

首先到项目中新建一个 client/ 文件夹

mkdir client

注：根据 Meteor 的规范，凡是要在浏览器中执行的代码一律放在 client 文件夹下。官方文档在这里。

在里面添加一个 react 的组件来显示 Hello World ，具体代码如下

需要一个启动文件 startup.jsx

Meteor.startup(function () {
  ReactDOM.render(<Hello />, document.getElementById("container"));
});

组件文件 Hello.jsx

Hello = React.createClass({
  render(){
    return (
      <div>Hello World!</div>
    );
  }
});

最后一个是 index.html （不必担心 html5 的 doctype 声明等内容，meteor 会帮我们自动添加的）

<head>
  <title>Peter</title>
</head>
<body>
  <div id='container'></div>
</body>

注意： react 代码的文件后缀一定要是 jsx ，这样 meteor 系统才能够正确识别出这是 react 的文件，从而进行编译。参考这里。

End

后台保持 meteor 命令一直运行，这样在 http://localhost:3000/ 就可以看到组件的显示效果了。另外，meteor 还自带了自动页面刷新功能，一旦 client/ 中的代码有变动，页面就会自动刷新，非常方便开发。