Skip to content

Instantly share code, notes, and snippets.

@SachaG

SachaG/1.jsx

Last active February 7, 2016 00:08
Show Gist options
  • Save SachaG/4ba8f5a53dab84e9cade to your computer and use it in GitHub Desktop.
Save SachaG/4ba8f5a53dab84e9cade to your computer and use it in GitHub Desktop.
Download ZIP
A React Primer For Meteor
Raw
1.jsx
Post = React.createClass({
render() {
return (
<div className="post">
<h1>Hello World!</h1>
<p>Lorem ipsum</p>
</div>
)
}
});
Raw
10.jsx
Post = React.createClass({
// ...
render() {
if (this.data.post.body) {
return (
<div className="post">
<h1>{this.data.post.title}</h1>
<p>{this.data.post.body}</p>
<button onClick={this.upvote}>Upvote</button>
</div>
)
} else {
return (
<div className="post">
<h1>{this.data.post.title}</h1>
<button onClick={this.upvote}>Upvote</button>
</div>
)
}
}
});
Raw
11.jsx
Post = React.createClass({
// ...
render() {
return (
<div className="post">
<h1>{this.data.post.title}</h1>
{this.data.post.body ? <p>{this.data.post.body}</p> : ''}
<button onClick={this.upvote}>Upvote</button>
</div>
)
}
});
Raw
12.jsx
PostList = React.createClass({
mixins: [ReactMeteorData],
getMeteorData () {
return {
posts: Posts.find().fetch()
}
},
renderPost(post, index) {
return (
<div className="post" key={index}>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
)
},
render() {
return (
<div className="posts">
{this.data.posts.map(this.renderPost)}
</div>
)
}
});
Raw
13.jsx
PostList = React.createClass({
mixins: [ReactMeteorData],
getMeteorData () {
return {
posts: Posts.find().fetch()
}
},
render() {
return (
<div className="posts">
{this.data.posts.map((post) => <Post title={post.title} text={post.text}/>)}
</div>
)
}
});
Raw
14.jsx
PostWrapper = React.createClass({
render() {
return (
<div className="posts">
<div className="foo">
<div className="bar">
{this.props.children}
</div>
</div>
</div>
)
}
});
Raw
2.jsx
Post = React.createClass({
render() {
var foo = "World";
return (
<div className="post">
<h1>Hello {foo}!</h1>
<p>Lorem ipsum</p>
</div>
)
}
});
Raw
3.jsx
Post = React.createClass({
mixins: [ReactMeteorData],
getMeteorData () {
var postId = FlowRouter.getParam('postId');
return {
post: Posts.findOne(postId)
}
},
render() {
return (
<div className="post">
<h1>{this.data.post.title}</h1>
<p>{this.data.post.body}</p>
</div>
)
}
});
Raw
4.jsx
Post = React.createClass({
mixins: [ReactMeteorData],
getMeteorData () {
var postId = this.props.postId;
return {
post: Posts.findOne(postId)
}
},
render() {
return (
<div className="post">
<h1>{this.data.post.title}</h1>
<p>{this.data.post.body}</p>
</div>
)
}
});
Raw
5.jsx
Post = React.createClass({
mixins: [ReactMeteorData],
propTypes: {
postId: React.PropTypes.string.isRequired
},
getMeteorData () {
var postId = this.props.postId;
return {
post: Posts.findOne(postId)
}
},
render() {
return (
<div className="post">
<h1>{this.data.post.title}</h1>
<p>{this.data.post.body}</p>
</div>
)
}
});
Raw
6.jsx
Post = React.createClass({
mixins: [ReactMeteorData],
getMeteorData () {
var postId = this.props.postId;
Meteor.subscribe("post", postId);
return {
post: Posts.findOne(postId)
}
},
render() {
if (this.data.post) {
return (
<div className="post">
<h1>{this.data.post.title}</h1>
<p>{this.data.post.body}</p>
</div>
)
} else {
return (
<div className="loading">
<h3>Loading…</h3>
</div>
)
}
}
});
Raw
7.jsx
Post = React.createClass({
//...
componentDidMount() {
$("h1").applyCoolEffect();
},
render() {
return (
<div className="post">
<h1>{this.data.post.title}</h1>
<p>{this.data.post.body}</p>
</div>
)
}
});
Raw
8.jsx
Post = React.createClass({
//...
upvote(event) {
event.preventDefault();
Meteor.call("upvote", this.props.postId);
},
render() {
return (
<div className="post">
<h1>{this.data.post.title}</h1>
<p>{this.data.post.body}</p>
<button onClick={this.upvote}>Upvote</button>
</div>
)
}
});
Raw
9.jsx
Post = React.createClass({
//...
renderUpvoteButton() {
return (
<button onClick={this.upvote}>Upvote</button>
)
},
render() {
return (
<div className="post">
<h1>{this.data.post.title}</h1>
<p>{this.data.post.body}</p>
{this.renderUpvoteButton()}
</div>
)
}
});
Raw
task.jsx
// Task component - represents a single todo item
Task = React.createClass({
propTypes: {
task: React.PropTypes.object.isRequired,
showPrivateButton: React.PropTypes.bool.isRequired
},
toggleChecked() {
// Set the checked property to the opposite of its current value
Meteor.call("setChecked", this.props.task._id, ! this.props.task.checked);
},
deleteThisTask() {
Meteor.call("removeTask", this.props.task._id);
},
togglePrivate() {
Meteor.call("setPrivate", this.props.task._id, ! this.props.task.private);
},
render() {
// Give tasks a different className when they are checked off,
// so that we can style them nicely in CSS
// Add "checked" and/or "private" to the className when needed
const taskClassName = (this.props.task.checked ? "checked" : "") + " " +
(this.props.task.private ? "private" : "");
return (
<li className={taskClassName}>
<button className="delete" onClick={this.deleteThisTask}>
&times;
</button>
<input
type="checkbox"
readOnly={true}
checked={this.props.task.checked}
onClick={this.toggleChecked} />
{ this.props.showPrivateButton ? (
<button className="toggle-private" onClick={this.togglePrivate}>
{ this.props.task.private ? "Private" : "Public" }
</button>
) : ''}
<span className="text">
<strong>{this.props.task.username}</strong>: {this.props.task.text}
</span>
</li>
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment