React Components Example

gistfile1.js

var PostsList = React.createClass({
    getInitialState: function() {
        return { posts: this.props.initialPosts };
    },
 
    render: function() {
        var posts = this.state.posts.map(function(post) {
            return <Post key={post.id} post={post} />;
        });
 
        return (
            <div className="posts">
                {posts}
            </div>
        );
    }
});

var Post = React.createClass({
    render: function() {
        return (
            <div className="post">
                <PostHeader post={this.props.post} />
                <PostContent post={this.props.post} />
            </div>
        );
    }
});

var PostHeader = React.createClass({
    render: function() {
        return (
            <div className="post-header">
                <h2>{this.props.post.title}</h2>
                <div className="post-meta">
                    By {this.props.post.author} – {this.props.post.created_at}
                </div>
            </div>
        );
    }
});

var PostContent = React.createClass({
    render: function() {
        return (
            <div className="post-contents">
                {this.props.post.contents}
            </div>
        );
    }
});