关于React在meteor钟的使用

时间 2019-11-16

原文原文链接

引言

做为一个技术爱好者，本身也一直小倒腾一些东西，本身学习使用meteor.js已经快一年了，应该说做为一个现代web快速开发框架，确实有其独到的地方，如今将本身的一些积累携程博客，分享给你们。node

说到meteor，固然首先须要说reactive编程或是（反应式编程模式）。我的认为这是meteor做为实时web系统十分突出的一点，就像他本身标榜的特色同样：全栈式编程：统一了客户端、服务器端代码（本质上是node.js的实现）反应式编程：数据变化与现实实时统一（数据变化，界面也变化，并且是跨浏览器的同步）继承mogodb数据库（如今也支持一些其余的）固然还有不少优势，这里不一一举例。应该说meteor是已经成为一个自成体系的开发生态环境，有本身的闭合组件支持(https://atmospherejs.com），支持通用的服务器端nodejs代码，能够有效建融目前主要的web开发技术（jqeury、模板、路由、bootstrap、less、coffeescript等等）react

今天主要谈Reactjs在moteor钟的使用，这是一个新的话题，目前meteor1.2准备将其归入内置模块钟，我也是边学边写。git

认识React

http://facebook.github.io/react/ React是一种UI控件技术，经过js方式编写能够服用，方便维护的UI控件。（数据绑定、模板技术等）本省其与meteor不是紧密绑定的，meteor有本身的模板系统，也有本身的数据绑定方式，只不过使用其做为业务显示模块的补充，是一个比较好的方式。github

React的几个概念

JSX

JSX是一种文件格式定义，是在决赛中同时编写xml相似的数据显示格式，经过jsx编译器将其统一变异成规格化的js代码而已，是讲显示、数据、时间操做等统一在一汽实现的模式。具体例子能够见下面。web

纯粹React例子

<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>docker

JSX文件例子

React.render( <h1>Hello, world!</h1>, document.getElementById('example'));数据库

在meteor中使用react

一、安装：编程

meteor add react

以上过程已经安装jsx编译器，react-meteor-data，react-template-helper等react-template-helper等

二、在页面上直接使用便可，代码以下：bootstrap

var App = React.createClass({ render() { return <div>Hello world!</div>; }});
if (Meteor.isClient) { Meteor.startup(function () { React.render(<App />, document.getElementById('root')); });}浏览器

三、绑定meteor的mongo.collection

var Tasks = new Mongo.Collection("tasks");

if (Meteor.isClient) {
Meteor.startup(function () {
React.render(<App />, document.getElementById('root'));
});
}

四、经过用户动过操做数据（更新等）

var Tasks = new Mongo.Collection("tasks");

var NewTaskForm = React.createClass({
onSubmit(event) {
event.preventDefault();

var taskContent = React.findDOMNode(this.refs.content).value;

Meteor.call("insertTask", {
content: taskContent
});

React.findDOMNode(this.refs.content).value = "";
},
render() {
return (
<form onSubmit={this.onSubmit}>
<input type="text" ref="content" placeholder="Add a task..." />
</form>
);
}
})

var App = React.createClass({
render() {
return (
<div>
<List />
<NewTaskForm />
</div>
);
}
});

Meteor.methods({
insertTask: function (task) {
// Validate the data
check(task, {
content: String
});

// Insert into MongoDB and Minimongo
Tasks.insert(task);
}
});

if (Meteor.isClient) {
Meteor.startup(function () {
React.render(<App />, document.getElementById('root'));
});
}

五、整合meteor的模板技术

模板定义以下：

<template name="userDisplay">
<div>Hello, {{username}}</div>
<div>{{> React component=UserAvatar userId=_id}}</div>
</template>

js代码以下：

var UserAvatar = React.createClass( ... );

Template.userDisplay.helpers({
UserAvatar() {
return UserAvatar;
}
})

注意：a、以上模板中的React控件包含在一个有且仅有一个子节点的元素钟（子节点就是React控件），不然失败；二、不能模板只包含React控件，而不指定父元素

六、模板钟React控件的操做事件
Template.userDisplay.helpers({
onClick() {
var self = Template.instance();

// Return a function from this helper, where the template instance is in
// a closure
return function () {
self.hasBeenClicked.set(true)
}
}
})

<div>{{> React component=UserAvatar userId=_id onClick=onClick}}</div></template>