React Version: 0.8.0
meteor-react is a smart package for Meteor that provides integration for React.
React's add-ons are available.
mrt add react
Write your React components in files with .jsx
extension.
foobar.jsx
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.
meteor-react is based on meteor-react
by @benjamn and react-meteor
by @petehunt.
Copyright (c) 2014 David Leung and contributors. See LICENSE.md for further details.