サーチ…
備考
Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。 オープンソースで 、Facebookによって開発、管理されています。 MeteorはReactの生産準備ができています。
リソース:
セットアップと "Hello World"
あなたのプロジェクトにReactを追加してください:
meteor npm install --save react react-dom react-mounter
シンプルなReactコンポーネントを表示するには、 client/helloworld.jsx
ファイルを作成しclient/helloworld.jsx
。
import React, { Component } from 'react';
import { mount } from 'react-mounter';
// This component only renders a paragraph containing "Hello World!"
class HelloWorld extends Component {
render() {
return <p>Hello World!</p>;
}
}
// When the client application starts, display the component by mounting it to the DOM.
Meteor.startup(() => {
mount(HelloWorld);
});
createContainerを使用してリアクティブコンテナを作成する
Todos
というコレクションがあり、 autopublish
パッケージが追加されたとしましょう。ここに基本的なコンポーネントがあります。
import { createContainer } from 'meteor/react-meteor-data';
import React, { Component, PropTypes } from 'react';
import Todos from '/imports/collections/Todos';
export class List extends Component {
render() {
const { data } = this.props;
return (
<ul className="list">
{data.map(entry => <li {...entry} />)}
</ul>
)
}
}
List.propTypes = {
data: PropTypes.array.isRequired
};
下部には、反応性の高いデータをコンポーネントにフィードするコンテナを追加できます。それはこのようになります。
export default createContainer(() => {
return {
data: Todos.find().fetch()
};
}, List);
MongoDBコレクションの表示
この例は、MongoDBコレクションをReactコンポーネントに表示する方法を示しています。コレクションはサーバーとクライアントの間で継続的に同期され、データベースの内容が変更されるとすぐにページが更新されます。
ReactコンポーネントとMeteorコレクションを接続するには、 react-meteor-data
パッケージが必要です。
$ meteor add react-meteor-data
$ meteor npm install react-addons-pure-render-mixin
単純なコレクションはboth/collections.js
で宣言されています。 both
ディレクトリにあるすべてのソースファイルは、クライアント側とサーバー側の両方のコードです。
import { Mongo } from 'meteor/mongo';
// This collection will contain a list of random numbers
export const Numbers = new Mongo.Collection("numbers");
コレクションはサーバーに公開する必要があります。 server/publications.js
簡単なパブリケーションを作成しserver/publications.js
。
import { Meteor } from 'meteor/meteor';
import { Numbers } from '/both/collections.js';
// This publication synchronizes the entire 'numbers' collection with every subscriber
Meteor.publish("numbers/all", function() {
return Numbers.find();
});
createComponent
関数を使用して、 Numbers
コレクションのようなリアクティブ値をReactコンポーネントに渡すことができます。 client/shownumbers.jsx
:
import React from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Numbers } from '/both/collections.js';
// This stateless React component renders its 'numbers' props as a list
function _ShowNumbers({numbers}) {
return <div>List of numbers:
<ul>
// note, that every react element created in this mapping requires
// a unique key - we're using the _id auto-generated by mongodb here
{numbers.map(x => <li key={x._id}>{x.number}</li>)}
</ul>
</div>;
}
// Creates the 'ShowNumbers' React component. Subscribes to 'numbers/all' publication,
// and passes the contents of 'Numbers' as a React property.
export const ShowNumbers = createContainer(() => {
Meteor.subscribe('numbers/all');
return {
numbers: Numbers.find().fetch(),
};
}, _ShowNumbers);
当初データベースはおそらく空です。
MongoDBにエントリを追加し、ページが自動的に更新されるのを見てください。
$ meteor mongo
MongoDB shell version: 3.2.6
connecting to: 127.0.0.1:3001/meteor
meteor:PRIMARY> db.numbers.insert({number: 5});
WriteResult({ "nInserted" : 1 })
meteor:PRIMARY> db.numbers.insert({number: 42});
WriteResult({ "nInserted" : 1 })