More Related Content
Similar to The First React on Rails (20)
The First React on Rails
- 9. 9
gulp.task('compile-es6', function() {
var files;
files = glob.sync('./client/react-client/src/ClientGlobal.js');
return browserify({entries: files, debug: true})
.transform('babelify')
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('app/assets/javascripts/components'));
});
import CommentPage from './container/CommentPage'
window.CommentPage = CommentPage
ClientGlobal.js
gulpfile.js
- 10. 10
react-client/src/container/CommentPage.js
import React from 'react'
import Comment from '../components/comment.js'
export default class CommentPage extends React.Component {
render () {
var commentsNodes = this.props.comments.map(( comment, i) => {
return(<Comment comment={comment} key={i}></Comment>)
}.bind(this));
return (
<div>
{commentsNodes}
</div>
);
}
}
- 11. 11
react-client/src/components/Comment.js
import React from ‘react'
export default class Comment extends React.Component {
render() {
return(
<section className="comment Project-cheer">
<h1 className="u-d_none">コメント</h1>
<article className="Project-cheer__comment Media">
<div className="Project-cheer__comment-img Media__img">
<img className="Project-cheer__comment-img-prop"
src={this.props.comment.profile_image} width="20" height="20"
alt={this.props.comment.user.name} />
</div>
<div className="Project-cheer__comment-main Media__body">
<header className="Project-cheer__comment-header u-clrfix">
<h1 className="Project-cheer__comment-name u-d_ib"><b className="u-
em">{this.props.comment.user.name}</b>さん</h1>
<time className="Project-cheer__comment-date">{this.props.comment.days}</time>
</header>
<div className="Project-cheer__comment-body">
<p>{this.props.comment.body}</p>
</div>
</div>
</article>
</section>
);
- 13. _comment.json.jbuilder
13
json.cache! [item], expires_in: 1.hours do
json.days item.reserved_at.strftime('%Y年%m月%d日')
if item.user.is_deleted?
nil
else
json.user_link user_path(item.user)
end
json.profile_image asset_url item.user.my_image_url
json.user item.user, :name
if item.comment.present?
json.body item.comment
else
json.body "頑張ってください!!"
end
end
partial