yolo.php

<?php

class React_YOLO {
    public function __construct() {
        add_action( 'admin_menu', array( $this, 'admin_menu' ) );
    }

    public function admin_menu() {
        add_menu_page( 'React', 'React', 'edit_posts', 'react', array( $this, 'page' ) );
    }

    public function page() {
        wp_enqueue_script( 'wp-api' );
?>
<script src="http://fb.me/react-0.12.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<div class="wrap">
    <h2>YOLO</h2>
    <div id="yolo"></div>
<script type="text/jsx">
var $ = jQuery, YOLO, Post, Posts, Form;

Post = React.createClass({
    render: function () {
        var post = this.props.data;
        return (
            <li>{post.id}. {post.title.rendered}</li>
        );
    }
});

Posts = React.createClass({
    render: function () {
        var posts = this.props.data.map(function (post) {
            return <Post data={post} />;
        });
        return (
            <ul>
            {posts}
            </ul>
        );
    }
});

Form = React.createClass({
    submit: function (e) {
        e.preventDefault();

        var title = this.refs.title.getDOMNode(),
            content = this.refs.content.getDOMNode();

        this.props.onSubmit({
            status: 'publish',
            title: title.value.trim(),
            content: content.value.trim()
        });

        title.value = '';
        content.value = '';
        return;
    },
    render: function () {
        return (
            <form onSubmit={this.submit}>
                <p><input type="text" placeholder="Title" ref="title" /></p>
                <p><input type="text" placeholder="Some content..." ref="content" /></p>
                <input type="submit" value="Post" />
            </form>
        );
    }
});

YOLO = React.createClass({
    getInitialState: function () {
        return {posts: []};
    },
    setPosts: function (data) {
        this.setState({posts: data});
    },
    loadPosts: function () {
        $.ajax({
            url : '/wp-json/posts'
        }).done( _.bind( this.setPosts, this ) );
    },
    componentDidMount: function () {
        this.loadPosts();
    },
    addPost: function (data) {
        var posts = this.state.posts;
        posts.pop();
        posts.unshift( data );
        this.setState({posts: posts});
        this.loadPosts();
    },
    submit: function (data) {
        $.ajax({
            type: 'post',
            url: '/wp-json/posts',
            data: {
                data: data
            },
            beforeSend: function (xhr) {
                xhr.setRequestHeader('X-WP-Nonce', WP_API_Settings.nonce);
            }
        }).done( _.bind( this.addPost, this ) );
    },
    render: function() {
        return (
            <div className="yolo-box">
                <Posts data={this.state.posts} />
                <Form onSubmit={this.submit} />
            </div>
        );
    }
});

React.render(<YOLO />, document.getElementById('yolo'));
</script>
</div>
<?php
    }
}

new React_YOLO();