hipertracker / meteor-reactjs

ReactJS + addons + JSX (--harmony) for Meteor

meteor-reactjs

Meteor smart package integrating React for both client and the server, to complement or replace the default Blaze templating system. React.addons are enabled. JSX is using ES6 transforms (--harmony) as well.

Usage

Inside your Meteor project, add the package:

$ meteor add hipertracker:reactjs

How it works

The package exposes a special ReactMeteor.Mixin object that can be used to enable reactive data fetching for your React components.

To add the ReactMeteor.Mixin to a React component, simply include it in the mixins class property:

var MyComponent = React.createClass({
  mixins: [ReactMeteor.Mixin],

  // Make sure your component implements this method.
  getMeteorState() {
    return {
      foo: Session.get("foo"),
      ...
    };
  }
});

The getMeteorState method should return an object of properties that will be accessed via this.state in the component's render method or elsewhere. Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.

You can find some examples at hipertracker/meteor-reactjs-examples.

Credits

The source code is based on reactjs/react-meteor. It has been updated to the latest Meteor and React version with enabled ES6 transforms for JSX files (--harmony).

meteor-reactjs's Issues

Routing

Any suggestions for how to do routing? Iron router has a great api but it's tied intimately to blaze.

React and Immutable state

Hey, so after reading a bunch about react and checking out Pete Hunt's react demo, it seems that React was built with the intention of "pure" components with immutable state. I think the only reason they included this.state is to deal with forms, validation, etc.

Anyways, the mixin you wrote makes a lot of sense from a meteor perspective and when combined with react gives more fine-grained re-rendering. However, now your react components have mutable state and they're no longer pure. This makes it hard to distinguish between a non-pure Player component that accepts a playerId and fetches the name and score. And a pure Player component that accepts a player object and renders the object's name and score.

Honestly, I'm uncomfortable with the pure version, but it seems that the beauty of react is this super fact reconciliation algorithm. Based on pete hunt's demo and his global autorun method, it seems they want you to treat react strictly as a rendering engine.

Anyways, I'm curious if you had any thoughts on this tradeoff...

Server rendering

Readme says enable client and server... Is there any example showing server side rendering ?

Handling multiple components?

This package is great, but I'm curious how you recommend handling multiple components across multiple files? Meteor's automatic build system seems to prohibit the typical "require" and "exports" workflow. The only other suggestion I've seen is creating all components globally.

please update meteor atmosphere package

meteor add hipertracker:reactjs should install v0.0.11 -- still sitting at v0.0.8

throws errors when getMeteorState is undefined

getMeteorState() is not required in all components, it would be nice to have the ability to omit it.

a simple check to see whether or not this function exists would solve this error.

Using meteor-reactjs with 3rd party components?

What's the recommended way of using 3rd party React components alongside meteor-reactjs?

I'm trying to use https://gitub.com/callemall/material-ui, but kept getting the "Uncaught TypeError: Cannot read property 'firstChild' of undefined".

So far, I include material-ui by running npm install && gulp build in a hidden folder that reactify's the dependencies into a single file and puts it in client/compatibility, which loads the library as expected, but results in the aforementioned error. In the simple example of just rendering a RaisedButton, it prevents the rippling animation from being triggered though on hover, the button changes.

edit: this issue might also be related: mui/material-ui#331