meteor/react-packages

Meteor packages for a great React developer experience

react-packages

Meteor packages for a great React developer experience

Linting

Run

npm run lint

Note this does not yet all lint. Working on it.

Testing

Due to difficulties in testing packages with "peer" NPM dependencies, we've worked around by moving package tests into harness test apps. You can find them in tests/.

react-packages's Issues

Semantic UI package from atmosphere doesn't work with React components

I added the Semantic UI package as per:
meteor add semantic:ui flemay:less-autoprefixer

And added the following inside a render(), renaming class to className, but it's not showing the Semantic styling, shows generic browser UI:

<div className="ui three buttons">
  <button className="ui active button">One</button>
  <button className="ui button">Two</button>
  <button className="ui button">Three</button>
</div>

Should I be using the React specific NPM package for Semantic UI?
http://semantic-ui.com/introduction/integrations.html

Was hoping to avoid NPM packages were possible and don't mind renaming classes. I got Bootstrap working this way as per Meteor package + React-packages.

react-router not loading page.

My app loads, but clicking on a react-router Link won't upload the page. It changes the URL in browser address field, but get no errors anywhere. This is just a static Component, i.e. no Meteor Collection.

Some code below.

client/Feedback.jsx

var Link = ReactRouter.Link;

MyHeader = React.createClass({
  render() {
    return (
      <div>
        <Link to="feedback">Feedback</Link>
      </div>
    );
  }
});

client/routes.jsx

var {
  Route,
  NotFoundRoute,
  DefaultRoute
} = ReactRouter;


var routes = (
  <Route name="root" handler={App} path="/">
    <DefaultRoute handler={App} />
    <Route name="feedback" path="feedback" handler={Feedback} />
    <NotFoundRoute handler={AppNotFound} />
  </Route>
);


var router = ReactRouter.create({
  routes: routes,
  location: ReactRouter.HistoryLocation
});


Meteor.startup(function () {
  router.run(function (Handler, state) {
    var params = state.params;
    React.render(<Handler params={params}/>, document.body);
  });
});

client/app.jsx

var {
  Link,
  Navigation,
  State,
  RouteHandler
} = ReactRouter;


App = React.createClass({
  render() {
    return (
      <div>
        <MyHeader />
      </div>
    );
  }
});

Make ES2015 features more clear for official release

In React class, render method; can you explain the why of render() VS render: function().

i.e. Is using render() an ES6 feature of object keys pointing to anonymous functions?

Browserify Tutorial Throws Error

Perhaps i'm not reading the Browserify tutorial correctly but I tried creating a new project twice just to be sure. Most of it was copy/pasted from the tutorial. ReactRouter is not defined and i'm getting an error in the client console:

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value) is not a function

However if I take out the app.browserify.options.json file then it works fine (however i'm assuming it would double load react?)

Any ideas on what I can change? I've uploaded a repo that should reproduce the error:
https://github.com/AdamBrodzinski/browserify-test

react-template-helper doesn't un-mount React component

Does Meteor automatically clean up the React component that get's rendered in with the {{React } } helper? It seems like the current build will leak once it's torn down.

I was going to try and submit a PR but I couldn't figure out a way to reference the node once onDestroyed is called since this.firstNode is null.

I'm manually doing this with an ID like so and that works:

Template.postsNew.rendered = function() {
  var container = document.getElementById('PostContainer');
  React.render(React.createElement(PostForm), container);
};

Template.postsNew.destroyed = function() {
  var container = document.getElementById('PostContainer');
  React.unmountComponentAtNode(container);
};

Packages are not published yet

when I ran meteor add react

I got :
While adding package react:
error: no such package

call to `{{> React ... }}` missing `component` argument.

I'm pretty new to React in the first place, so it may be something I'm doing incorrectly, but here's the issue.

I'm using all the normal meteor react packages, along with meteor-template-helper, and jhartma:cjsx.
I have a component called Header, and when I call {{> React component=Header }} in a template, I get this error:

Error: In template header, call to `{{> React ... }}` missing `component` argument.
    at null.<anonymous> (react-template-helper.js:14)
    at view.js:191
    at Function.Template._withTemplateInstanceFunc (template.js:437)
    at view.js:190
    at Object.Blaze._withCurrentView (view.js:523)
    at viewAutorun (view.js:189)
    at Tracker.Computation._compute (tracker.js:294)
    at new Tracker.Computation (tracker.js:210)
    at Object.Tracker.autorun (tracker.js:533)
    at Blaze.View.autorun (view.js:201)

My template:

<template name="header">
  {{> React component=Header }}
</template>

I tried emptying out my component of everything except the render function with a basic div and text, same thing. Weird thing is I have another component that works fine, but not sure what's different since I removed everything, and the files are located in the same directories.

Weird thing is, when I call:

Template.header.rendered = ->
  React.render <Header/>, @firstNode

It works fine.

Server-side rendering blockers

Since it looks like SSR is now doable, it looks like this issue and this issue might be closer to getting properly addressed at the core level for SEO's sake?

How to use React Router?

React Router looks pretty neat. But I'm trying to figure out how you added it to you project:

https://github.com/meteor/react-packages/tree/master/examples/react-todos

No smart package? :(

YouTube embed in iframe won't show or play within React component with Meteor mobile.

This works with a pure Cordova app, but not when build using Meteor mobile tools. I test on Android 4.4.2

Put this inside your render method:

<iframe width="360" height="203" src="https://www.youtube.com/embed/LXBJqmCyOHA" frameborder="0" allowfullscreen></iframe>

ES2015 and CommonJS module support

As mentioned in this blog post, Meteor currently doesn't support ES2015 modules or CommonJS-style require but we will be working on it as soon as possible.

No, module support will not be shipped in Meteor 1.2. However, I expect it will be very soon after.

I'm going to redirect all module-related issues here.

Rest assured that this is absolutely far and away one of our top priorities at the moment.

If URL changes in react-router, Browser refresh whole page as if pressing F5.

Your todos example behaves as expected.

var {
  Route,
  NotFoundRoute,
  DefaultRoute,
  RouteHandler
} = ReactRouter;

var App = React.createClass({
  render () {
    return (
      <div>
        <h1>Application</h1>
        <RouteHandler/>
      </div>
    )
  }
});

var About = React.createClass({
  render: function () {
    return <h2>About</h2>;
  }
});

var Inbox = React.createClass({
  render: function () {
    return <h2>Inbox</h2>;
  }
});

var Home = React.createClass({
  render: function () {
    return <h2>Home</h2>;
  }
});

var routes = (
<Route handler={App}>
  <Route path="about" handler={About} />
  <Route path="inbox" handler={Inbox} />
  <Route path="home" handler={Home} />
</Route>
)

var router = ReactRouter.create({
  routes: routes,
  location: ReactRouter.HistoryLocation
});

Meteor.startup(function () {
  router.run(function (Handler, state) {
    React.render(<Handler />, document.getElementById('root'));
  });
});

Calling `React.render` inside an autorun and then stopping it kills reactivity

I want to have an autorun to watch for subscription readiness, then stop it when the subs are ready (basically, use it as a promise or callback). If I call React.render and then stop the computation, the internal autorun inside the trackMeteorData mixin stops too.

We should correctly wrap it in Tracker.nonreactive to fix this issue.

@dgreensp This is inside the MeteorDataMixin.

Here is my code, from the react-todos/client/routes.jsx file:

// XXX this should be replaced by promises, probably...
Tracker.autorun(function (computation) {
  // Are all of the subscriptions done yet?
  subsReady = _.all(handles, function (handle) {
    return handle.ready();
  });

  // If they are, and we are at the root route, we should go to a valid list
  if (subsReady && router.getRouteAtDepth(1) &&
      router.getRouteAtDepth(1).isDefault) {
    showFirstList();
    computation.stop(); // after this, the list component never updates
  }
});

Package to compile templates into React components

@timbrandin has a good start here: https://atmospherejs.com/timbrandin/jsx-templating

Allow separation of templates from React

Is it possible to somehow still have separated templates and React rendering? I like clean separation of concerns.

Something like react-separate-template, but just if it would be spacebars. :-)

Add observable wrapper for meteor data subscriptions as addition to meteor-data-mixin

In new react apps ES6-ES7 javascript syntax become very popular. But there are no mixins for react components created as ES6 classes.
It looks like it's not a big deal to create observable wrapper for Meteor subscriptions (using RxJs contract or any other) and use it as like as any other observable.
Since that your meteor-data-mixin get's more easy code, and users can use this observable to create HoC components and decorators as like as this https://gist.github.com/tgriesser/d5d80ade6f895c28e659

For example this code line https://github.com/meteor/react-packages/blob/master/packages/react-meteor-data/meteor-data-mixin.jsx#L20 is not a good solution (props can be freezed using 'Object.freeze' in any version of react), and this code can easily be avoided by using normal observable subscriptions.

There are a lot of additional usage behaviors if Observable subscriptions will be created. Like as subscription caching, counting etc...

Syntax errors in React class don't show any file or line #.

Get incomprehensible errors, i.e. put a semicolon ; after the last closing tag, that's wrapped inside (); in a React class return(). Get Uncaught SyntaxError: Unexpected token Y but no file or line #. Impossible to figure out with even just a few react classes & files.

return (
   <div>
      Do something!
   </div>;
 );

Todos example bug

On todos example, when one user changed todo item, other user can't see update without refresh!

View doesn't correspond to a template? body

I don't think the React template inclusion works directly inside body:

https://www.dropbox.com/s/p9ghwecxywlr2yf/Screenshot%202015-06-27%2015.33.44.png?dl=0

Add example for routing with FlowRouter and ReactRouter

Routing is an important part of any app, we should have a quick guide that shows you how to get set up with these popular tools. It's not any harder than Iron Router, but the absence of a guide makes it seem like it is.

Coffeescript JSX

It would be great if using the coffeescript package would allow to use coffeescript with JSX syntax as well, like .cjsx. There are already transformation tools on GitHub.

can't find defined module

I don't know if I did it right, I'm trying to integrate with Material ui, I can't require the defined exported module.

inside client/lib/app.browserify.js,

mui = require('material-ui');
injectTapEventPlugin = require('react-tap-event-plugin');
Router = require('react-router');

AppRoutes = require('../components/routes');

This gives the following error:

Error: Cannot find module '../components/routes ' from '/Users/xxx/workspace/app-name/packages/npm-container/.npm/package'

How do I import defined module? the import syntax doesn't work either.

Can not add the react package on windows?

Using Meteor version 1.2.2

using es6 and react: ReferenceError: module is not defined

I'm following this example, https://github.com/meteor/react-packages/tree/master/examples/material-ui-example, after I add a component class, and exported using module.exports = Master;, it gives an error ReferenceError: module is not defined, why is that?

feature request: let you pass in a global React component into react-template-helper without defining a template helper

I'm trying out the latest build of react-template-helper and now that the Component is being passed in by reference it can't be used without passing the template with a helper.

The use case would be just wanting to insert a React component into blaze without passing any data or props into it. In this case you would have to create a JS template helper just to pass in the template name.

However if you use window[data.component] then it will be defined at the onRendered time. The following code below brings back the ability to pass in the reference or the string name.

Feel free to ignore/close this as I realize this is still a work in progress. I just wanted to chime in since i've been using React and Blaze for bit. I would be more than happy to provide a sample repo and/or a PR if that would help.

Thanks!!

Template.React.onRendered(function () {
  var parentTemplate = parentTemplateName();
  var container = this.firstNode.parentNode;

  this.autorun(function (c) {
    var data = Blaze.getData();

    debugger // data.component is undefined at this point if it's the fn

    var comp;
    if (data && typeof data.component === 'string') {
      comp = data && window[data.component];
    } else {
      comp = data && data.component;
    }    

ReactMeteorData is not defined

When trying to include ReactMeteorData as a mixin, the server throws an error saying it was not defined. I had created a new project and installed the react package and react-meteor-data, but no luck.

Server-side routing and rendering

Just a thought. ;)

`react` package doesn't work properly on Windows

Still investigating.

muiTheme of context undefined for child component from material-ui

I wrestled with this for a while before figuring out that somehow it's the Meteor version of React that's causing the problem.

I'm rendering a component that uses some components from Material UI, e.g. <Paper/>. To set the styling of those components, you have to set muiTheme in context. I do this at my top-level component, App, like so:

// App.jsx
App = React.createClass({
  childContextTypes: {
    muiTheme: PropTypes.object,
    themeManager: PropTypes.object,
  },

  getDefaultProps() {
    return {
      themeManager: new Material.Styles.ThemeManager();
    }
  },

  getChildContext() {
    return {
      muiTheme: this.props.themeManager.getCurrentTheme(),
      themeManager: this.props.themeManager,
    }
  },

  render() {...}
}

In one part of my app, I render a Paper element:

// GroveCard.jsx
GroveCard = React.createClass({
  propTypes: {
    text: React.PropTypes.string,
  }
  contextTypes: {
    muiTheme: React.PropTypes.object,
  },

  render() {
    return (
      <Paper zIndex={2}/>
        {this.props.text}
      </Paper>
    );
});

This has been working fine when using the normal browserified version of react, but when using the react-runtime package it fails with this error:

Warning: owner-based and parent-based contexts differ (values: `undefined` vs `[object Object]`) for key (muiTheme) while mounting Paper (see: http://fb.me/react-context-by-parent)
debug.js:43 Exception from Tracker recompute function: undefined
debug.js:43 TypeError: Cannot read property 'component' of undefined
    at getStyles (http://localhost:3000/packages/client-deps.js?13cafeead7e3aad3bdc018f78d6c11e639290d00:6475:47)

And line 6475 of that package, function getStyles looks like...

  getStyles: function getStyles() {
    var styles = {
      root: {
        backgroundColor: this.context.muiTheme.component.paper.backgroundColor,
        transition: this.props.transitionEnabled && Transitions.easeOut(),
        boxSizing: 'border-box',
        fontFamily: this.context.muiTheme.contentFontFamily,
        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
        boxShadow: this._getZDepthShadows(this.props.zDepth),
        borderRadius: this.props.circle ? '50%' : this.props.rounded ? '2px' : '0px'
      }
    };
    return styles;
  },

This error happens anywhere I use a component from Material. My hunch is that this is because React is a peer dependency for Material UI and I'm not declaring that, but I haven't verified that yet.

Tutorial places app in document.body

Putting the root React app into document.body can cause a lot of unforeseen problems with browser extensions and other JS that append to body. The tutorial shows you how to render to body. Should we change this or at least provide a warning to not do this in production?

Perhaps something like:

<body>
  <div id="root"></div>
</body>

and

if (Meteor.isClient) {
  Meteor.startup(function () {
    React.render(<App />, document.getElementById('root'));
  });
}     

2600 LOC React app is super slow running on meteor deploy

2600 LOC React app is super slow running off server.

I put a React app (with 2600 LOC) into Meteor as per react-packages, and it's performance is fine running locally. There is ZERO collections, no user accounts. It's simply React code and images. Mobile design, about 20 screens, very little props or state.

Just opening a simple side menu React component with only text (no images) is noticeably slower off the server (using Meteor.com free hosting) VS locally. Not sure why, the React code isn't touching the server at all, so why is it so sluggish. I checked in both Chrome (Mac) and the built Android app.

• Carl

Invariant Violation: _registerComponent(...): Target container is not a DOM element.

I created a new app with name 'my-react-app'.
And I cloned the 'react-packages' in the project directory with the name 'pakages'.
Then, I executed the command 'meteor add react'. I worked well.

Trying to run the app, I got the message:
'Invariant Violation: _registerComponent(...): Target container is not a DOM element.'

How can I resolve it?

My PC settings:

• Mac OS X Yosemite 10.10.3
• Meteor 1.1.0.2

Example Todos: Task text is not reactive

Summary:
When the task name changed in database, the task name in view doesn't change

Step to reproduce:
Open two browser tab. change a task name in one browser, go to another browser, the name won't change.

Steps done to investigate:
The second browser has received DDP and miniMongo changed.
In TodoItem.jsx the render function set defaultValue like this
<input
type="text"
defaultValue={self.props.task.text}
placeholder="Task name"
onFocus={ self.onFocus }
onBlur={ self.onBlur }
onKeyUp={ self.onKeyUp } />

It is always stick on {self.props.task.text} won't change.

I am not sure it is by design or just a fixable bug. I am a new React learner.

Seems like React chrome extension doesn't work with Meteor projects

Without meteor, using browserify or webpack all works fine, but with meteor I can't see components tree, just only few times have success.

Bad things happen if working directory is not root of app in react-todos

If you run meteor from a subdirectory of the app (which is normally ok in a meteor app), it throws a bunch of errors and then corrupts the app. To fix the app, remove the .meteor/local/isopacks directory in the app and run it again.

This is almost certainly due to a bug in meteorhacks:npm.

Problems arise when using `meteor add react` with a browserified React package like material ui

I tried to meteor add react and add material-ui via cosmos:browserify but it seems the context is undefined.

No problem with react and material-ui added via cosmos:browserify

Defining a global variable in JSX

I cant seem to assign a variable to the global scope using JSX in a package.

I've got this going in package.js

Package.onUse(function(api) {

  api.use([
    "react-runtime",
    "jsx"
  ]);

  api.imply([
    "react-runtime",
  ]);

  // add files

  api.export('createInstance');
})

Then in one of my files I have:

this.createInstance = createInstance;

I cant seem to find this function anywhere in the global scope...

Added jsx package first, then react. Server-side .jsx file in local package not being transpiled

Within a local package, the following code, unmodified, is callable when the file is named thing.js, but 404's when the file is named thing.jsx.

I have to change the reference from .js to .jsx in the package.js file when I rename the file, the .jsx just never seems to get transpiled server side.

Simply renaming from .jsx back to .js solves the 404 issue.

The file is in a the /server directory, directly off the root of the local package.

Meteor.methods(
{
   getConfig: function (siteID, callbackFunction){
    console.log('On Server: getConfig : ' + siteID + ":" + callbackFunction);
    var myConfig = Configs.findOne({"project.siteID": siteID})
    console.log("myConfig: %s", myConfig );
    return (myConfig);
  }
});

Remove @jsx React.DOM from example code

@jsx React.DOM at top of JSX files not needed with latest version of ReactJS. Referring here to the examples directory.

todo example, can't delete a list in mobile screen size.

Can't delete a list when the screen is in mobile size, i.e. when the list items are only visible.

react-router bug when using react package

Hi,
I found a bug when using meteors react package. I've created a simple demonstration app here:
https://github.com/dropfen/meteor-react-router-issue

In the master branch I'm using the original react from npm together with react-router, and everything is fine. If I switch only the packages (the repo allows you to do this by changing the branch to react-broken-router the router didn't find expected values in the handler context and the app gets broken.

Hope I can help to improve it.

Where'd the var go? [Modules]

Why won't var before the React.createClass() work? i.e. var AppBody = React.createClass()

I'm using the react-todos example.

Is this on your list to fix? I've got a pile of existing React code that I don't want to have to change.

Also, a bit confused how an NPM React module would work, assuming they use var to define React.createClass(), but my own (or example) React code won't work.

React without a Meteor mixin

Hey dude, I'd love to hear your thoughts on this post I wrote:

https://forums.meteor.com/t/react-without-react-mixins/6013

meteor add react installs older dependencies

Currently when running "meteor add react", version 0.0.1 installs instead of version 0.1.0 as well as the older version of the react-meteor-data package.

How can I go about installing the latest packages? Thanks all :)

React package and a React-mixin package

Its very frustrating to me how there's not a single package that gives me React without some side-effects and additional code that I'm not going to use.

I think there should be one React package that adds React and gives you a JSX compiler (the compiler doesnt add any code to the client so thats fine). Then for whatever mixins you want to make, you can create another package. Otherwise, people are stuck with those mixins and people like me who don't use any meteor data mixins have to create their own packages without all the baggage.

Document best practises for handling subscriptions/data across components

It would be nice to have some information on this side of things. I know @tmeasday has been digging into it a little bit.

Official react package

Hello,
I just wanted to ask, why the official react package is not in listed here. I guess I missed some discussion about it. So please could some one point me to the right answer?

react-router: Uncaught TypeError: Cannot read property 'makeHref' of undefined

Trying to react-router working, I followed the instructions in the docs to add NPM, got my app working with 1 DefaultRoute. But soon as I add a Link get this error:
Uncaught TypeError: Cannot read property 'makeHref' of undefined

Some code below. btw - Would be awesome to have some docs on how to get react-router working in MeteorJS.

client/Feedback.jsx

var Link = ReactRouter.Link;

MyHeader = React.createClass({
  render() {
    return (
      <div>
        <Link to="feedback">Feedback</Link>
      </div>
    );
  }
});

client/routes.jsx

var {
  Route,
  NotFoundRoute,
  DefaultRoute
} = ReactRouter;


var routes = (
  <Route name="root" handler={App} path="/">
    <DefaultRoute handler={App} />
    <Route name="feedback" path="feedback" handler={Feedback} />
    <NotFoundRoute handler={AppNotFound} />
  </Route>
);


var router = ReactRouter.create({
  routes: routes,
  location: ReactRouter.HistoryLocation
});


Meteor.startup(function () {
  router.run(function (Handler, state) {
    var params = state.params;
    React.render(<Handler params={params}/>, document.body);
  });
});

client/app.jsx

var {
  Link,
  Navigation,
  State,
  RouteHandler
} = ReactRouter;


App = React.createClass({
  render() {
    return (
      <div>
        <MyHeader />
      </div>
    );
  }
});

Cannot read property 'dispose' of undefined

To reproduce:

1. run react-todos
2. click the "Join" button
3. observe error in console

@dgreensp I think this is inside the MeteorDataMixin

Screenshot:

Build easy way to create an app without Blaze

This will include two things:

1. meteor-platform-no-ui - a package that lets you get all of the standard meteor stuff without Blaze
2. static-html - a package that lets you render static HTML for your app without using templating. Basically, you can create an index.html file that has <head> and <body> tags, and those will be used for the server response. You can use this to render a container element for your React components, modify the meta tags of your page, etc.

This is not an implementation of server-side rendering; the static-html package will always render the same HTML, which should be filled in with content on the client side. Server side rendering will be discussed here: #15