React smart package for Meteor

React Version: 0.8.0

meteor-react is a smart package for Meteor that provides integration for React.

React's add-ons are available.

Quick Start

mrt add react

Usage

Creating React components

Write your React components in files with .jsx extension.

foobar.jsx

Connecting Meteor's reactive states to React's

To receive reactive data from Meteor, add MeteorMixin as a mixin to the React component that should receive state updates, and implement the getMeteorState method by making use of any reactive data source from Meteor:

// foobar.jsx

var Foo = React.createClass({
    mixins: [MeteorMixin],

    getMeteorState: function() {
        return {
            // update React's this.state.bar by value of Session.get('bar')
            bar: Session.get('bar');
        };
    }
});

The state will be available as a property of this.state.meteor.

For example, to access bar in the component Foo above, we can do:

// foobar.jsx

var Foo = React.createClass({
    ...
    render: function() {
        var bar = this.state.meteor.bar;
        return (<span>{bar}</span>);
    }
    ...
});

Refer to the Interactivity and Dynamic UIs Guide for an explanation of how state works in React.

Credits

meteor-react is based on meteor-react by @benjamn and react-meteor by @petehunt.