Preview of official React support

react
1

Hi everyone,

We are working on an official React package, and we have a prerelease version for you to try. Our goal for the initial release is to provide a great experience for Meteor users who want to use React for part of, or all of, their app’s UI.

A great integration has many parts, from the build tool, to the glue libraries, to the documentation and examples, so we are building all of these things. You can see what we’ve got and try it out by following our guide (URL subject to change): http://react-in-meteor.readthedocs.org/en/latest/

Let us know what you think, and file issues here: https://github.com/meteor/react-packages/issues

Thanks,
Avital, David, and Sashko

Branched discussion threads

I’ve decided to move some of the long conversations off this thread and onto GitHub:

  1. Simple routing and rendering examples
  2. Easy way to remove Blaze
  3. Issues on Windows
  4. Server-side rendering
  5. Data management and loading

If you have any new topics, bring them up in this thread, or file a new issue on GitHub.

42 Likes
2

Thanks for your effort, very appreciated.

Do you plan to also an official accounts-ui-react package or other MDG ui components in react?

3

I think there are some other priorities that would come first, but it would be awesome if there was a community package for this. I think most production apps actually don’t use accounts-ui and use some community solution instead.

Also, if you use the react-template-helper package, you can include the Blaze version of accounts-ui if you want.

4

outstanding work here!! i’ve been using react in meteor for months and this will make it that much easier to integrate.

thank you!

1 Like
5

Great work, thanks for sharing the preview! One thing I noticed is that a lot
of react devs don’t use native jsx it’s either jsx + babel or jsx + coffeescript or jsx + typescript. I have used webpack to compile all of those without much setup. So the question can jsx package accept input from another transformer ?
Currrently people are using npm package with jsx transformer in it in their packages which might lead to desynchronisation of jsx compilers versions.

1 Like
6

Are you guys planning to add proper browserify/npm support to the build tool soon?
I talked with @elidoran to make it much more easy to use browserify with meteor.
(Direct support in meteorhacks:npm )

I delayed the idea since your may add a solution for that.
Seems like it’s not, so I might can implement it. Shall I?

1 Like
7

The jsx package does compile your stuff with Babel: http://react-in-meteor.readthedocs.org/en/latest/jsx/#enabled-ecmascript-transforms

It seemed to us that JSX+CS or JSX+TypeScript wasn’t nearly as popular. We want to provide the best possible experience out of the box rather than making people configure chains of transformers to get started.

However, the reason that we ship jsx as a separate package is so that you can use a different one to transform your code if you want to, and still use all of the other parts like the ReactMeteorData mixin.

Also, there is no need to be worried about JSX version mismatches - since the packages are compiled to regular ES5 on publish and not when they are downloaded, the JavaScript code should be compatible even if the versions of JSX are different.

8

The guide for this integration includes directions on using cosmos:browserify with meteorhacks:npm: http://react-in-meteor.readthedocs.org/en/latest/client-npm/

Thanks for building this stuff, it really made the first version of this integration much easier to do.

I’m reasonably sure the next steps for this project will include much better support for client and server-side NPM, and a lot of other goodies that will make us more aligned with the wider JavaScript community. This is just the first step!

What kind of solution were you thinking of implementing?

3 Likes
9

Right I missed part where it says that it’s using babel. Ok that does make sense, is it possible to try out now ? I guess meteor add react wouldn’t work yet

10

I have a question: with that, can we just uninstall Blaze from the whole app or it still needed? AFAIK, we can’t remove Blaze that easily nowadays.

1 Like
11

It does work! Maybe we should make it clearer that these packages are actually released. Will put up a message.

1 Like
12

https://github.com/meteor/react-packages/blob/master/examples/material-ui-example/.meteor/packages is an example of a packages file with no Blaze, the app still runs fine.

We are going to make an easier way to remove blaze soon, I already have a PR for it.

2 Likes
13

Okay. Glad to hear that.
It’s about simply defining packages.json and they will just included to the project.

Syntax of packages.json will be changed a bit but it will be backward compatible.

We will work on that until you guys comes with a native solution. I assume native solution takes about 3-4 months at least.

If not just tell me, then there is no point doing it.

14

Really great work man! I love how you nailed the abstraction level of integrating React with Blaze/Spacebars: http://react-in-meteor.readthedocs.org/en/latest/react-template-helper/. This actually makes React easier to use!

4 Likes
15

Not able to install this package on Windows 7. Meteor v 1.1.0.2.

D:\Development\Meteor\my-react-app>meteor add react

C:\Users\gevalia\AppData\Local.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\dev_bundle\lib\node_modules\fibers\future.js:245
throw(ex);
^
TypeError: Cannot call method ‘replace’ of null

3 Likes
16

Git Cloned some of the example apps and I can confirm that react-meteor doesn’t play nicely on Windows 10.

17

Having used the package a little bit, I am already a big fan. There is one thing however that is going to prevent me from using it. There needs to be an easy way to get this to work well with routing, i.e. as easy as blaze works with routing. Until that point it’ll be this awesome thing I wish I could use but just can’t.

2 Likes
18

@sashko

I started to play with this implementation. I read the docs too.
Why can’t we simply just use state and why use special data field.

As you’ve mentioned in the docs, now we can’t use shouldComponentUpdate and other goodies works with react by default.

I hope there seems to be a good reason, but I can’t figure out it?

3 Likes
19

Does this implementation allow for use of React’s SSR?

1 Like
20

You can use it fairly easily with FlowRouter. You can either have FlowRouter render the template into a div container or if you’re rendering inside a Blaze shell, you can use a helper to render them with a helper.

Checkout this example here:

and here:
https://github.com/AdamBrodzinski/react-ive-meteor/blob/master/client/pages/Feed.html

Note the Blaze helper is a little different than the MDG preview helper but i’m planning on switching this example over to full React and no Blaze soon.

2 Likes