How to manage global variables in React?

I’ve started playing around with React now that it is becoming easier to integrate with Meteor. It seems really cool! I do have a few questions though…

How should components be declared? I’ve just been keeping them in separate files under the lib folder and declaring them as globals. I try to keep the global names very specific so that they are not likely to interfere with other code, but that doesn’t seem like the best way of structuring a react-meteor app. How do you organize your components as far as declaring variables is concerned?

Meteor has a lot of great packages that appear to only work with Blaze. If I were to build an app with React, would I also need to use Blaze in that app? Or would I be able to integrate existing packages into a react component? (I’m thinking of Tabular, Autoform, and plugins like that)

I’d appreciate any suggestions you have!

You can either keep them as globals or if you want to mitigate the pollution and can use a namespace like: Comps = {}; in lib and then insert components into that. Then just use <Comps.PostItem /> to consume it. Once we get ES6 modules this will be a bit easier!


[quote="ryanswapp, post:1, topic:6600"] If I were to build an app with React, would I also need to use Blaze in that app? Or would I be able to integrate existing packages into a react component? [/quote]

You can either use React only or both Blaze and React together. Lets say for example you want to use accounts-ui in your header you can just render the Blaze template into the div that you want like this example. The new React package preview also has some helper methods to make this insertion easier.

Note, I should be using componentWillUpdate and returning false to make sure it doesn’t re-render and conflict with Blaze (in this case it won’t ever update anyhow)

I’ve found that a lot of packages are already React components with the exception of very specific ones that access the Meteor data layer. Tabular Tables is one of those that is hard to not use. FB has a nice table component but there isn’t any publication paging support of course.

Also speaking of data, you might want to try out Pete Hunt’s domain methodology. He’s using it for a similar cache here but the concept is the same. This makes it easy for different components to access data.

@SkinnyGeek1010 I didn’t know that you could call a component like <Comps.PostItem />. Thanks for the heads up! I’ll have to start doing that.

Thanks for the example code! That will definitely help me get started with integrating the two.

React is very interesting… It seems like a perfect fit for Meteor. On a side note, it appears that you are using FlowRouter for routing. Is that the best option for working with React?

FlowRouter 2.0 is the best if you’re very comfortable with Meteor routers. However react-router has a feature that allows you to nest UI with nested routes. I haven’t used this in production yet but it seems pretty cool (based off of the Ember router).

One perk with FlowRouter is that there is very basic serverside routing that you could use today (bleeding edge and will change):
https://kadira.io/blog/meteor-ssr-support-using-flow-router-and-react

However React-Router also has SSR. I tried to get it going and failed with what seems to be a commonJS export issue.

I’m confident in short time both will SSR. It seems like the largest difference is that react-router nests the UI and FlowRouter can handle subscriptions (which I think is a bad idea for large apps)

Also, Sashko wrote a nice tutorial on installing React components (react-router) in the guides… def. worth reading!

2 Likes