Looking for a React + Meteor 1.3 + React Router Example

react
1

So I’ve started using react as my go to view layer. I have been working on one using 1.2, react router and react for a minor project. I’m about to start work on a larger project which I want to use 1.3 for. With the new module import export I’m curious to see how people are implementing it with react router and react. Does anyone have an example how they have put a webapp together with react, react router, and meteor 1.3. I’ve seen plenty with 1.2 but nothing for 1.3. I know that 1.3 is not ready for primetime but by the time my project finishes, I’m sure it will be so I figure might as well architecture around 1.3 rather than 1.2 with later refactoring for 1.3. Plus the build times on 1.3 have been extremely impressive.

3 Likes
2

What’s the difference between ReactRouter and FlowRouter anyhow? Also, if ReactRouter “complements” React in a way FlowRouter cannot, why adopt FlowRouter, why not just jump to ReactRouter?

1 Like
3

With everything going towards NPM and ReactRouter having a larger following and better support structure over FlowRouter, it seems better to simply use ReactRouter rather than FlowRouter. Flow Router is restricted only to Meteor whereas ReactRouter is global to react library.

1 Like
4

Heres my minimal Hello world - Its uses NPM for react and react router and just the react-meteor-data package which isn’t used in the example.

4 Likes
5

I agree. Why use FlowRouter at all? Wait, is MDG going to promote FlowRouter over ReactRouter?

6

Thank you Glenarama,

This is exactly what I was looking for - I appreciate you putting this together

7

@glenarama Any idea why I am getting a ‘Uncaught Error: Cannot find module ‘react’’ error from the browser console? I git cloned your repo, npm --save installed each of the npm packages, and the server itself starts up fine, but nothing displays on the front end.

Perhaps im using this repo wrong?

8

Flow Router v4 will have built in SSR capability. ReactRouter has this as well but is not an automatic setup (works in any setup).

ReactRouter is also better for heavily nested UI as well (Gmail for example).

I use both and FlowRouter is a bit more simple.

2 Likes
9

@glenarama Okay I got the ‘repo’ working by following the Readme instructions. However, I am still confused about using the React-Meteor-Data Mixin. You mention this in the Readme:
In order to use above with es6 classes - look at the react-mixin package. However, this requires decorators which are not supported in meteor ecmascript at the moment so you'll have to edit the package to include them.

When you say ‘edit the package to include them’, can you go into a little more detail here? Thanks.

10

Have a read of this:https://github.com/meteor/meteor/issues/5246

I got it working by creating a local ecmascript and babel-compiler and adding decorator support - not ideal. I’d probably recommend using create class instead of es6 classes for now.

1 Like
11

you can call func instead of decorator

import reactMixin from 'react-mixin';
...
reactMixin(App.prototype, ReactMeteorData);
3 Likes
12

Looking forward meteor upgrade ecmascript to babel 6.x

1 Like
13

Yes - agree, this is an easier implementation than decorators for now. Will add this to instructions.

1 Like
14

@glenarama I also think this looks much easier, so thank you for updating the instructions. This is my #1 candidate for a boilerplate for 1.3 so far, so I appreciate any and all updates.

@mrphu3074 I agree, babel 6 cant come soon enough. I’m assuming you are installing the react-mixin package the 1.3 way (npm install react-mixin)?

15

yes, i using react-mixin via npm module

16

Example updated to include this - the example is partial since it uses accounts-password but there is no login available - but you should see the concept of pulling data.

1 Like
17

@glenarama Awesome, thank you for updating! Really loving how easy react-mixin is to implement with GetMeteorData mixin.

@glenarama I just have one more question (slightly unrelated): What are we supposed to use for integrating accounts-password with React, specifically since we are using npm packages for React, React-router, etc…? Thanks again for all of your help.

18

You can still Meteor add package and they are available as they always were.
In the example project, accounts-passwords is installed (Check .meteor/packages) Once installed Meteor.user() is available - check client/Layout/Main.jsx

1 Like
19

Hi glenarama, also been looking for this. Thanks for putting it together

20

I have just uploaded commit 7 of my Meteor-React-Start-App.

The characteristics of the app are as follows:

  • Meteor version 1.3 (beta 5) with React and React Router
  • NPM Packages: react react-dom react-router@2.0.0-rc5 history@2.0.0-rc2 react-mixin babel@6.5.1
  • ES6: arrow functions
  • A basic lay-out with a header, body and a footer
  • User Login (create account, login/logout, change password)
  • Router with Navigation buttons
  • Some static ‘pages’: Home, Admin and NotFound
  • A Tasks Page with a simple list of tasks from the Mongo database

In next installments I will add more of the functionality of the simple-todos-react app and the framework material ui.
The app is up-and-running at meteor.com
See also the tutorial that goes along with this start-app.

2 Likes