Migrating to React

help
1

I’m on Meteor 1.3.5.1 & Iron Router. I’ve used Blaze for my entire application. I’m trying to make a transition to React but even a basic example is not rendering. I’m on react 15.3.0.

I followed this LevelUpTuts video to start.

sudo npm install --save react
sudo npm install --save react react-dom

I used a Blaze template, and embed a div that I want to render a react component to:

React component:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
	render() {
		return (
			<h1>Hello World</h1>
		)
	}
}

if (Meteor.isClient) {
	Meteor.startup(function () {
		ReactDOM.render(<App />, document.getElementById("render-target"));
	});
}

Blaze template I try to render to:

 <template name="blaze-template">
   <div id="render-target"></div>
 </template>

Nothing renders but the Blaze controls. What am I doing wrong?

2

When using React, you don’t actually need and template definition. Just create an html file in your Client directory, let’s call it home.html and in this file between <body></body> tags put <div id="render-target"></div>, after server restart you will see your component.
But if you want to use React components in Blaze templates I suggest you to check out React Components in Blaze guide section

1 Like
3

Thanks for the link, I will use this technique for some templates.

I already have a body element in my index.html. How do I call out to a plain html page using Iron Router? For example, say I’m on a regular “Blaze” template, and link to a plain old html page that has a React component tied to it. How would/could this work?

4

I need to be able to create a react component, then inside a html “view” have a html element with an id that maps to that react component. Then finally be able to call out to the html “view” from a Blaze template using Iron Router.

Is this possible? Can React and Blaze live side by side – without me integrating the React component within a Blaze template?

6

Hope you will get benefited from my pattern and take the best of it.

1 Like
7

They might be a little out of date now, but I did a series of videos about migrating from Blaze/IR to React a while back: https://www.discovermeteor.com/category/blaze-to-react/

1 Like
8

Thanks @sacha. Has a lot changed since you made them?

Also, can I use Flow Router and Iron Router on the same project (Flow for React and Iron for Blaze) or will there be conflicts?

9

I don’t think that much has changed, although now I use React Router instead of Flow. I wouldn’t recommend mixing both router though, I don’t think that would work.

10

Thank you for the advice. It seems Flow Router is client side only? I need a router that has server side hooks too.

Why do you now use React Router (is it because Flow Router is no longer maintained)?

11

You can use Picker on the server:

And yeah, I don’t think Flow Router will be maintained forever. React Router has a much bigger community.

2 Likes
12

Will React Router work with Blaze too? I use Iron Router ATM and I can’t get rid of my Blaze stuff just yet.

13

@aadams,

Why are you making the switch now? If your app is working, postpone the switch for when you have money to hire someone to do it. Shortest path to $$$ :slight_smile: is what matters.

1 Like
14

Yes, I also find it’s always better to postpone any technological evolutions until the absolutely last minute, when you’re desperate and everything is broken :wink:

I don’t think React Router will work with Blaze though. I think using FlowRouter (or even just Iron Router but in a non-Iron-Router-y manner) as a middle step is fine though.

15

  • Meteor and MDG is moving away from Blaze. Without official support, it creates risk to my company to stay.

  • I haven’t seen much of any MDG-independent community contributions towards Blaze (granted being able to do so only recently). I’ve only seen a few champions of Blaze so far, and I can’t be certain what direction Blaze will take.

  • No one outside of Meteor uses Blaze, and within the Meteor community, the Blaze install base is shrinking by the month (mainly in favor of React). It seems logical to conclude Blaze community support will diminish over time.

  • Meanwhile, it seems like the entire industry to adopting React as the go-to UI framework (including MDG). Just looking at the React community for a short time now, I can see huge momentum, support and tooling.

It makes sense for me to hedge my bets and at least start to migrate now, while there are devs in the community migrating off of Blaze too, devs that might want to help me. And for the why, well for the many reasons that revolve around the points mentioned above (and probably much more).

16

So migrate to FlowRouter for client side routing and Picker for server side routing to start off – got it. This will allow me to migrate to React. Then, afterwards, I can see about migrating to React Router.

17

@sacha, fear mongering doesn’t help anyone. I held back replying in the past, but feel it’s hurting others not to answer these wrong statements.

  1. More than half surveyed meteor devs (on this forum) were still using blaze. Technology does not get obsoleted over night. This is what experience tells us - you know, white hair of experience and wisdom :slight_smile:
  2. React is one of many UI frameworks - I am happy you and MDG like it - but, one of many
  3. Meteor is changing forever, Apollo is taking over and MDG engineers are moving onto it. Meteor will see little investment in UI, routers, states etc. Data is the new game in town.
  4. We are about to announce a fork of / update to meteor which completely replaces mongo with rethinkdb – real scalable reactivity. As part of this, we plan on being part of / funding maintenance of blaze / Vue / viewmodel
  5. We can swap blaze with React / Vue / viewmodel / ember any time, it’s a small effort if the app view layer is properly modularized

Finally, and most important (again experience speaking)

-6. This is a business decision as much as it is a technical one. Money first, tech second. Tech is ALWAYS changing, it’s like chasing a rainbow … unless one is an hourly labor peddling latest and greatest with no regard for commercial viability of a project.

1 Like
18

@aadams,

Simply, will this decision speed up your profitability? I am not against one framework vs other. I just don’t like fear mongering.

19

Who’s fear-mongering?? I feel like I’m just stating the fairly obvious fact that if you’re planning on migrating away from Iron Router and Blaze at some point (which you should, since they are currently not being maintained or worked on as far as I know, and better alternatives exist), it’s better to do it when you still have some breathing room than once everything starts to break.

I’m sure @aadams will be glad to know it’s just a “small effort”…

20
  1. Iron Router is definitely a goner.
  2. “Small effort” – you are confusing learning curve with actual work. An experienced dev can swap out UI if the app is properly designed.
  3. “once everything starts to break.” Care to share an example? Everything is a strong word, relativity is an important concept. Nothing is broken over here. Again, React for meteor is maintained by the community. In fact, other than Data, everything will soon get maintained by the community.

The only real risk is Apollo, if you intend on embarking on that.

1 Like
21

I’d like to start on React components, but I’m on Iron Router and Blaze ATM. Is there a way to incorporate React Router and incorporate blaze-layout for my Blaze templates on the client? I’d rather not do Flow Router, then go to React Router. Also, for a time, I’d like to have Blaze Templates and React components in the same project – I don’t want to mix React into Blaze templates – I just want them to be able to have one route be a Blaze template and the next a React “page”.

Also, I’m going to use picker for server side routes since no solution but Iron Router supports server side.

I’m confused what combinations will achieve what I need:

flow-router
blaze-layout
meteor-react-layout
Picker for Server side Render
react-router
react-mounter