I’ve been following the official React Meteor tutorial but want to write it using ES2015 classes instead of .createClass().
I’m getting the following error in my browser:
Uncaught ReferenceError: App is not defined
I put all the files under the ‘client’ folder.
client\App.jsx
class App extends React.Component {
getTasks() {
return [
{ _id: 1, text: 'task1'},
{ _id: 2, text: 'task2'},
{ _id: 3, text: 'task3'}
];
}
renderTasks() {
return this.getTasks().map((task) => {
return <Task key={task._id} task={task} />;
});
}
render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{this.renderTasks()}
</ul>
</div>
);
}
}
client\myApp.html
<head>
<title>My Wonderful App</title>
</head>
<body>
<div id="render-target"></div>
</body>
client\myApp.jsx - Note, I’m using ReactDOM.render as was suggested by the browser console output.
Meteor.startup(function() {
ReactDOM.render(<App />, document.getElementById('render-target'));
});
client\Task.jsx
class Task extends React.Component {
static propTypes() {
return {
task: React.PropTypes.object.isRequired
};
}
render() {
return (<li>{this.props.task.text}</li>);
}
}
you need to expose your component to global like
class App extends React.Component {
...
}
this.App = App;
1 Like
Awesome!
I see no point in switching from Blaze-Components to React if I can’t use the awesome ES2015 features.
I’m still not conviced on React but I’m giving it a try.
Thanks @mrphu3074. I hope your reply helps others too!
One other thing I found is that I have to have the blaze-html-templates package enabled in order for the initial <body> tag to be displayed. Are there other alternatives that would be lighter than blaze? A simple html renderer?
$ meteor remove blaze-html-templates
$ meteor add static-html
1 Like
that’s just brilliant! Thanks!
Is there a way to use the ReactMeteorData mixin in ES2015 classes as per the tutorial? I’ve been researching it and it seems like either mixins are not the future or we just have to wait until ES7 or something like that.
I think the “mixins are dead” point of view is a little overstated on the web. You should check out the section on design notes in this section of the React in Meteor docs.
Yeah I thought it was pretty strong language too.
So essentially, for the moment, you can’t use ES2015 syntax with React + Meteor. Did I read that right?
(or at least not with the ReactMeteorData mixin)
Yeah, I think the class syntax doesn’t allow for mixins. I think this will be developing, so I wouldn’t worry about it too much. The tutorial uses other nice features from ES2015. I actually found it a great introduction to the topic when I tried it, and it inspired me to eventually write this post on ES2015.
Nice article! I definitely like the ES2015 syntax.
I’ve been following all the discussions on this forum about React vs Blaze vs whatever and I thought I should at least try React out. It’s a bit daunting though. It doesn’t seem to flow naturally for me.
Oh well, I’ve been looking at BlazeComponents as well and that makes more sense to me. I guess we’ll see what happens in the coming months.
React seems really alien at first, but I’ve come to prefer it. If React’s design seems strange, I found this talk by Pete Hunt to be helpful.
2 Likes
Hah. I started watching that video but only got half way through. Last night I was thinking that React was just too foreign and it seemed that it didn’t support Meteor level reactivity, at least not properly. It seemed like a step backwards, not forwards. Then I finished the video this morning. And I’m sort of right. React is not really reactive in the way that Blaze is. It actually re-renders everything (virtually) which seems horrific at first.
So if I’m thinking about this correctly, you basically want a layer that is all business logic and controllers that are highly reactive using Meteor. Which in turn tells React to re-render everything with the new data. Then React updates the DOM intelligently. It kind of separates the reactivity with the DOM in favor of React’s re-render approach.
Not sure if I worded that right but I hope I’m understanding the concepts.
I just begin with React, but i really like it. Some concepts of Meteor are difference with React or Flux.
I believe you can use the react-mixin npm module if you want to use mixins with true ES2015 classes.
1 Like
That’s an NPM module, right? How do you use that on the client in Meteor?
@darkadept: The way I see it, React purposefully avoids ad hoc reactivity to make the app easier to reason about. You can get into trouble with Tracker in large apps because the reactivity is so flexible that your autoruns trigger in unpredictable ways. I think this is part of what drew people away from Iron Router, for example. That said, I hear that larger React apps have difficulty maintaining the purity of this model, and I think we’ll see some interesting things from Meteor in this space.
@hellogerard: Thanks, didn’t know about that one!
How much time you got? 
Seriously, that is, IMO, the #1 force driving the discussion around Meteor’s build system and webpack. But there’s plenty of discussion around that on other threads.
To answer your question, you’ve got a couple options:
- Use
cosmos:browserify. The README for the package has good directions.
- Use
webpack:webpack. This blog post has directions on starting with that: https://medium.com/@SamCorcos/meteor-webpack-from-the-ground-up-f123288c7b75
Thanks for the answers! Yeah, I just saw the browserify method. I’ll have to check both methods out.
And just to update. I actually dropped back to just using .createClass() for now. I’ll have to see if I can get back to ES2015 classes. I have to say it’s not TOO bad the old way though.
I have the tutorial complete now and React is making more and more sense. Now to see if I can get some of my favorite jQuery packages working with React.
I re-created this component life-cycle diagram (from Redirecting...) and added getMeteorData() as well:
