meteor
Meteor + Reaktion

Bemerkungen

Setup und "Hello World"

Fügen Sie React zu Ihrem Projekt hinzu:

meteor npm install --save react react-dom react-mounter

Erstellen Sie die Datei client/helloworld.jsx , um eine einfache React-Komponente anzuzeigen:

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);
});

Erstellen Sie einen reaktiven Container mit createContainer

Nehmen wir an, es gibt eine Sammlung namens Todos und das autopublish Paket wird hinzugefügt. Hier ist die Grundkomponente.

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
};

Unten können Sie einen Container hinzufügen, um die reaktiven Daten in die Komponente einzuspeisen. Es würde so aussehen.

export default createContainer(() => {
  return {
    data: Todos.find().fetch()
  };
}, List);

Anzeigen einer MongoDB-Sammlung

Dieses Beispiel zeigt, wie eine MongoDB-Sammlung in einer React-Komponente angezeigt werden kann. Die Sammlung wird kontinuierlich zwischen Server und Client synchronisiert, und die Seite wird bei Änderungen der Datenbankinhalte sofort aktualisiert.

Um React-Komponenten und Meteor-Sammlungen zu verbinden, benötigen Sie das Paket react-meteor-data .

$ meteor add react-meteor-data
$ meteor npm install react-addons-pure-render-mixin

In both/collections.js Sammlungen wird eine einfache Sammlung deklariert. Jede Quelldatei in both Verzeichnissen enthält sowohl clientseitigen als auch serverseitigen Code:

import { Mongo } from 'meteor/mongo';

// This collection will contain a list of random numbers
export const Numbers = new Mongo.Collection("numbers");

Die Sammlung muss auf dem Server veröffentlicht werden. Erstellen Sie eine einfache Publikation in 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();
});

Mit der Funktion createComponent können wir reaktive Werte (wie die Numbers Auflistung) an eine React-Komponente übergeben. 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);

Anfangs ist die Datenbank wahrscheinlich leer.

Fügen Sie MongoDB Einträge hinzu und beobachten Sie, wie die Seite automatisch aktualisiert wird.

$ 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 })