關於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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。