[SOLVED] ES6 With mixins: [ReactMeteorData]

help
21

ok so I did as you suggested but the result is still the same :rage:
here’s my code ` import React from ‘react’;
import {bootstrap} from ‘react-bootstrap’;
import ReactMixin from ‘react-mixin’;

export default class App extends React.Component {
getMeteorData(){
return{
task: Lessons.find({}, {sort: {createdAt: -1 }}).fetch(),
currentUser: Meteor.user()
}
},

getLesson() {
return lesson = Lessons.find().fetch();
},

render() {
return (


This is the home page of our blog



See Hello World Post



);
}
}

ReactMixin(App.prototype, ReactMeteorData);

` and I also tired to put that mixin before the react component but the same

22

Hi,

Any error messages? Also, I don’t think this bit will work as it’s outside the getMeteorData() block, so it won’t return any documents:

23

I was also following the instructions and got stuck with:
Uncaught TypeError: _reactMixin2.default.class is not a function

Any ideas?

24

So we have installed this:

npm install react-mixin --save

Then add the reactmeteordata.

Now our views:

import React from 'react';
import ReactMixin from 'react-mixin'; 

export default class App extends React.Component {
 getMeteorData() {}

 render(){
  return<h1>YES!</h1>
 }
}
ReactMixin(App.prototype, ReactMeteorData);

By looking at it, you maybe importing bootstrap incorrectly. You maybe after:

...

import bootstrap from "react-bootstrap"; // no curlies

...
25

You can solve this by using Higher order component. You can use Kadiras react komposer for that if you do not want to roll your own. It is a better solution IMHO.

26

Can we all go back to @roberto68 post? As I’ve marked this solved as it works for me. Thanks.

27

If I drop default keyword when creating the class, my code works as expected.

28

yes there’s an error at the end of the getMetorData - 12:3 even after I’ve commented the getLesson class

29

I decided to write a little blog post about this only to discover afterwards that it was already covered in this thread. But anyway, for who’s interested:

1 Like
30

@jamiter I have read your blogpost and it certainly helped me with (commit 7 of) my Meteor-React-Start-App.

The characteristics of the app are as follows:

  • Meteor version 1.3 (beta 11) 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 all the features from the simple-todos-react app from MDG’s tutorial

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

31

Hi, I get Uncaught ReferenceError: ReactMeteorData is not defined. I am using 1.3.11. Do I need to import the collection?
Thanks.

32

Try putting this at the top:

import {ReactMeteorData} from 'meteor/react-meteor-data';
2 Likes
33

Thanks ffxsam! I had to also add the react-meteor-data package, as it wasn’t included in the 1.3.11 release.

34

I’ve updated the blogpost. It now tells you that you need to add the ReactMeteorData package. Thanks for pointing this out!

1 Like
35

You can use react-komposer instead of react-meteor-data.

import React, {Component} from 'react';
import {composeWithTracker} from 'react-komposer';
import {Meteor} from 'meteor/meteor';
import Posts from '/lib/collections/posts';

function onPropsChange(props, onData) {
  const handle = Meteor.subscribe('posts');

  if (handle.ready()) {
    const posts = Posts.find({}).fetch();
    onData(null, {posts});
  }
}

const PostLoading = () => (
  <h1>Loading posts...</h1>
);

class PostList extends Component {
  render() {
    const {posts} = this.props;

    return (
      <div className="posts">
       {posts.map(post => <h1 key={post._id}>{post.title}</h1>)}
      </div>
    );
  }
}

export default composeWithTracker(onPropsChange, PostLoading)(PostList);
2 Likes
36

I answered a question about ES6 React classes on stack overflow, but another answer byDan Caragea had some good info about things to watch out for when using ES6 syntax, it’s worth a read: http://stackoverflow.com/a/35060571/1879019

1 Like
37

Yeah… why bother with getMeteorData when react-komposer is cleaner and works with createClass, classes and even the new functional style. It really is great. Mixins are going away.

38

Agreed, but this discussion started when there wasn’t a react-composer yet and all we had was the Mixin. A big thank you to Arunoda for bringing us this alternative! But still for people who want a small migration path (still using the Mixin), it at least is possible.

39

I received a warning in the browser when using mixins with ReactMeteorData:

Warning: Blaze.render without a parent element is deprecated. You must specify where to insert the rendered content.

The code is originated from meteor-blaze-to-react:

BlazeToReact = React.createClass({
  mixins: [ReactMeteorData],    // this line causes a warning
  ...

If I delete the line mixins: [ReactMeteorData], the warning will be silenced. I wonder how to mix ReactMeteorData into React components correctly.

40