Getting Started with Meteor 1.3, React, and FlowRouter

I created a guide for getting started with Meteor 1.3, React, and FlowRouter.

The main reason was that I noticed that while there is a tutorial on using React with Meteor, the more advanced Todos app, which has routing, uses Blaze.

So I wrote up a guide. It ended up being a bit longer than I had planned :blush: and is probably more useful for beginners, but perhaps more advanced devs will find a nugget or two in there.

http://coderchronicles.org/2016/04/08/getting-started-with-meteor-1-3-react-and-flowrouter/

5 Likes

Thereā€™s also the react branch of the official complex todos app! https://github.com/meteor/todos/tree/react

@tmeasday we should make this much more discoverable!

Nice article, Iā€™m just planning to use 1.3 with React in my next project. I am just wondering about lazy loading. In your example you have loaded all routes via import in main.js - isnā€™t it an anti pattern for lazy loading? Iā€™m just wondering if Meteor would load all files I am using if I import all routes on the beginning in main.js

Meteor always loads all your files immediately.

And all files will be transferred to the client at once and not if he visits the specific route? So we have the same transfering behavior like in 1.2? I am just wondering because the blog post says something different.

Yes. There is lazy evaluation, but not lazy client-side bundle loading.

1 Like

As someone learning React, Meteor and ES2015 having just got to grips with 1.2 and Blaze. These kind of walk-throughs complement the Meteor Guide extremely well.

@andersr I just wanted to thank you.

1 Like

Sweet! Will definitely be checking out the React branch!

@hoggy - glad you found it helpful!

@sashko - maybe Iā€™m reading this response out of context, but could you clarify what you mean by ā€œMeteor always loads all your files immediately.ā€

I thought the whole point of the ā€œimportsā€ directory is that files in that directory are not loaded immediately.

2 Likes

No the point is that you can control which files are loaded, and in which order. And that opens up a path to code splitting and asynchronous loading down the road, since such a system is basically impossible without explicit imports.

1 Like

How do you deal with the active route in this case? Is there a npm package to handle active rutes in meteor 1.3 + react?

Handling of the current route is unchanged in Meteor 1.3 - just use FlowRouter.routeā€¦
More at https://github.com/kadirahq/flow-router/blob/master/README.md

Itā€™s not completely unchanged, to avoid loading React x2 you have to use React mounter instead of ReactLayout which depends on the meteor package (you can also use React router)

EDIT: you can now also just update your react meteor package (thanks @sashko!)

@reoh - yes, correct, I forgot about that one but very important detail. Thanks for pointing it out.

Thatā€™s not the case anymore - the newest version of the meteor react package loads it from NPM so you only get one copy.

1 Like