Getting Started with Meteor 1.3, React, and FlowRouter

announce
1

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
2

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!

3

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

4

Meteor always loads all your files immediately.

5

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.

6

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

1 Like
7

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
8

Sweet! Will definitely be checking out the React branch!

9

@hoggy - glad you found it helpful!

10

@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
11

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
12

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?

13

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

14

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!)

15

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

16

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