React sub-modules, routing

[aksonov]

It is not clear from demo, how to split React components to many files effectively. How to use routing, Flux approach, etc. because Meteor supports node 'require' only on server side... Again, maybe it is not issue of react-meteor but Meteor framework.

[sunspots]

So far I've just been throwing all my components into a folder under client, called components.
I've got a couple of subfolders there as well, look into Meteor's load order if you need things in the right order. (I haven't had any problems with load order yet)

For routing, I've chosen a pure React approach, using react-router. Meteor doesn't know, and it doesn't care.

I think part of the Flux flow works automatically - update your reactive data store (your database and Session), then the changes are propagated downwards to all respective components.

What I think is sort of missing is the dispatcher layer.

[aksonov]

Bad news. As I understand it loads components in alphabetic order, so a composite react component cannot use inner ones if its order of name is higher. I still doesn’t understand why they re-invent package system, when webpack re-use node one successfully for both web and server….

On Nov 12, 2014, at 15:45, Sunspotsy notifications@github.com wrote:

So far I've just been throwing all my components into a folder under client, called components.
I've got a couple of subfolders there as well, look into Meteor's load order if you need things in the right order. (I haven't had any problems with load order yet)

For routing, I've chosen a pure React approach, using react-router https://github.com/rackt/react-router Meteor doesn't know and doesn't care.

I think part of the Flux flow works automatically - update your reactive data store (your database and Session), then the changes are propagated downwards to all respective components.

What I think is sort of missing is the dispatcher layer.

—
Reply to this email directly or view it on GitHub #25 (comment).

[sunspots]

But the load order mostly doesn't matter here, since nothing is invoked until everything is loaded.
Meteor.startup won't run until everything's loaded.

I just tried to make sure - ui.jsx and z.jsx in the same folder, ui.jsx uses z.jsx without a problem.

[aksonov]

Oh, great. Sorry, i’m new to Meteor, didn’t know that.
So how to ‘import’ z within ui.jsx? Just use global variables? Example would be very helpful.

I’m trying to split Leaderboard example with two components, Leaderboard.jsx and Player.jsx, getting error:
While Building the application:
lib/Leader.jsx:25:13: Unexpected token <
lib/Player.jsx:4:13: Unexpected token <

On Nov 12, 2014, at 16:34, Sunspotsy notifications@github.com wrote:

But the load order mostly doesn't matter here, since nothing is invoked until everything is loaded.
Meteor.startup won't run before everything's loaded.

I just tried to make sure - ui.jsx and z.jsx in the same folder, ui.jsx uses z.jsx without a problem.

—
Reply to this email directly or view it on GitHub #25 (comment).

[sunspots]

I've been using global variables for now, but you could probably throw them in to a global object to avoid global namespace pollution.

[josebalius]

@Sunspotsy Your way is exactly what I have been doing with meteor + react. It feels really nice. Have you had any problems with this pattern?

[sunspots]

It's been pretty smooth. It's hard to know when issues are with this approach, and which are just due to my general incompetence.
I'm quite interested in how we could use Meteor packages to bundle and/or distribute components, which could help us with the global variable issues. I just haven't had the time to play with it yet.

[aksonov]

Okey, I've solved issue in other way - don't use this plugin and use web pack and its jsx-loader for jsx files and its all dependencies and setup it just to copy generated .js into root of meteor app. Move all needed js, jsx into separate folder starting with "." to avoid meteor to load everything. So meteor loads only generated .js file by webpack.

Works perfectly. Finally I can use clear constructions like var React = require('react');
var Player = require('./player.jsx'), etc. and manage all dependencies via npm on client side.

Even hot reload works well now (for example if i change "Give 5 points" to "Give 15 points" within jsx file in leaderboard example), it is automatically reloaded at browser. One disadvantage that now i have two scripts running - 'webpack -w' to generate new js for every change, and 'meteor'.

[josebalius]

@aksonov that's a really nice idea, it sucks that have to put . in front of folders to ignore them

[aksonov]

@josebalius I've added it as suggestion within meteor git #3098

[sunspots]

I haven't had any issues with live-reload so far, with my current workflow.
What I would really want is Meteor to implement a good way to use CommonJs/AMD modules as an alternative, there has to be a better way to do this, instead of sidestepping around Meteor.

[aksonov]

@Sunspotsy try to do this - change "Give 5 points" to "Give 15 points" within jsx file with your plugin. I had to refresh page to see new text.

[sunspots]

When I change something in a jsx file, it is instantly recompiled and reloaded. I don't know why it wouldn't do it for you. Strange.

[aksonov]

@Sunspotsy I've just checked again. Meteor server is reloaded automatically, but web page - doesn't. I've to press Cmd+R. Atleast for Safari 8.0

[colevoss]

Hey gang! I am trying my hand at getting React to work nice with Meteor with this but I am also getting Unexpected token < errors from my .jsx files as well. I have them my .jsx file in client/components/whatever.jsx and it doesn't seem to be compiling correctly or at all (not quite sure). I have also tried putting them in something like client/templates/another_directory with no luck their either.

Using meteor 1.0.1.

Thanks guys!

[benjamn]

I think it used to be true (with React v0.10.0) that your .jsx files had to have /** @jsx React.DOM */ at the top in order for JSX syntax to be transformed, so all those opening <s were syntax errors in new files if you neglected to include that comment.

This should no longer be true with React v0.12.2. If this diagnosis is mistaken, please feel free to reopen this issue!

[trusktr]

@SunspotsEU

there has to be a better way to do this, instead of sidestepping around Meteor.

Meteor code runs on the server side. I bet there's a way to run webpack during Meteor's build stage instead of doing it manually.

@aksonov So when you run the webpacked version of React, does it work fine with ReactMeteor.Mixin? Could you post a sample snippet?

[tehfailsafe]

I'd also like to know about this. Using ./components folder with webpack sounds like a great idea, but I have also come to really appreciate the getMeteorState reactivity. It sounds like with using @aksonov approach we'd be sidestepping react-meteor all together and losing it's meteor specific features.

Is that right?