Meteor + React

Remarks

React is a JavaScript library for building user interfaces. It's open source, developed and maintained by Facebook. Meteor has production-ready support for React.

Resources:

Create reactive container using createContainer

Let's say there's a collection called Todos and the autopublish package is added. Here is the basic component.

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

At the bottom, you can add a container to feed the reactive data into the component. It would look like this.

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

Displaying a MongoDB collection

This example shows how a MongoDB collection can be displayed in a React component. The collection is continuously synchronized between server and client, and the page instantly updates as database contents change.

To connect React components and Meteor collections, you'll need the react-meteor-data package.

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

A simple collection is declared in both/collections.js. Every source file in both directory is both client-side and server-side code:

import { Mongo } from 'meteor/mongo';

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

The collection needs to be published on the server. Create a simple publication 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();
});

Using the createComponent function we can pass reactive values (like the Numbers collection) to a React component. 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);

Initially the database is probably empty.

screenshot before adding data

Add entries to MongoDB and watch as the page updates automatically.

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

screenshot after adding data

Setup and "Hello World"

Add React to your project:

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

Create the client/helloworld.jsx file to display a simple React component:

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