Is Meteor Ready for React yet?

react
1

Hallo,

I guess using react now with meteor isn’t the right time since most thing are not complete like the user-accounts and many other stuff that you need to wrap inside each other… right or wrong?

Prove me wrong?

What are some good projects using React-Meteor???

or any good boilerplate project that’s is not wrapping things just to make React work!

Thanks

2

I think in 1.3, you can use import to use the user account package, something like

import {Meteor} from ‘meteor’

then use it like Meteor.loginWithPassword(...your code here) in your react component
of course, if you want to use the reactivity of Meteor.user of similar feature, you can use mixin or higher component like mentioned by @SkinnyGeek1010 in here

3

The Meteor tutorial with React view shows how to wrap a blaze component to use in React. Specifically the user accounts package.

4

I have a full app made and deployed that uses React and Twitter auth: https://github.com/MantarayAR/plipable

No real boilerplate either and it uses Meteor 1.2.

4 Likes
5

I think the main thing needed for meteor to be “ready for React” is using NPM modules, because atmosphere packages are severely lacking for React. So my answer is: Yes - with Meteor 1.3

1 Like
6

We use React and Blaze in our app running meteor 1.2. And use react components from npm via cosmos:browserify. Excited for 1.3, but this stuff does work today.

7

Yes Meteor is ready for React today. We have a Meteor 1.2 (currently released Meteor version) app using React.

  • Flow Router
  • React
  • Meteor’s React Mixin

Works fine out of the box with no configuration. When Meteor releases 1.3 we’ll probably look at upgrading, but not immediately.

Here’s an example of a simple component we have. Fully data reactive, if we add a moderator elsewhere, the UI updates automatically.

CommunityModerators = React.createClass({
  mixins: [ReactMeteorData],
  getMeteorData() {
    var data = {};
    var handle = Meteor.subscribe('community.moderators', this.props.community._id);
    if (handle.ready()) {
      data.moderators = Meteor.users.find().fetch();
    }
    return data;
  },

  render() {
    return (
      <div>
        {this.data.moderators? this.getContent() : null}
      </div>
    )
  },

  getContent() {
    return (
      <div className="box media-list-box community-moderators">
        <div className="box-heading">Moderators</div>
        <div className="box-content">
          {
            this.data.moderators.map(function(user) {
              return (
                <div key={user._id} className="media">
                  <div className="media-left">
                    <a href="#">
                      <img className="media-object" src="http://placehold.it/32x32" />
                    </a>
                  </div>
                  <div className="media-body">
                    <a href="#"><strong>{user.profile.username}</strong></a>
                    <div className="subtle-text">@{user.profile.username}</div>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }
});

There is one package that is supposed to simplify getting Meteor data in react, but I can’t find it again. Anyone know what it is, it looks like this (kinda):

CommunityModerators = React.createClass({
  moderators() {
    Meteor.users.find().fetch();
  }, 

  render() {
    return (
      <div>
        {this.data.moderators? this.getContent() : null}
      </div>
    )
  }
});
8

I also have an app using the ReactMeteorData mixin, and it works well, but at this point I would use Mantra architecture instead. I plan to rewrite app to use Mantra very soon.