meteor
Meteor + Réagir

Remarques

Configuration et "Hello World"

Ajouter Réagissez à votre projet:

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

Créez le fichier client/helloworld.jsx pour afficher un composant React simple:

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

Créer un conteneur réactif à l'aide de createContainer

Disons qu'il y a une collection appelée Todos et que le paquet de autopublish est ajouté. Voici le composant de base.

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

En bas, vous pouvez ajouter un conteneur pour alimenter les données réactives dans le composant. Ça ressemblerait à ça.

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

Affichage d'une collection MongoDB

Cet exemple montre comment une collection MongoDB peut être affichée dans un composant React. La collection est continuellement synchronisée entre le serveur et le client, et la page est instantanément mise à jour lorsque le contenu de la base de données change.

Pour connecter des composants React et des collections Meteor, vous aurez besoin du paquet react-meteor-data .

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

Une collection simple est déclarée dans both/collections.js . Chaque fichier source des both répertoires est à la fois un code côté client et un code côté serveur:

import { Mongo } from 'meteor/mongo';

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

La collection doit être publiée sur le serveur. Créez une publication simple dans 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();
});

En utilisant la fonction createComponent , nous pouvons transmettre des valeurs réactives (comme la collection Numbers ) à un composant 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);

Initialement, la base de données est probablement vide.

Ajoutez des entrées à MongoDB et observez la mise à jour automatique de la page.

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