A simple Reddit Client with React JS

A recreation of the Reddit client created with Montage JS at http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html

by Joe Saad

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react-with-addons.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:300);

body {
    background-color: #2d2d2d;
    font-family: 'Lato';
    color: white;
    font-weight: 300;
}

h1 {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 42px;
}

.navigation {
    width: 200px;
    text-transform: uppercase;
    float: right;
}

.navigation ul {
    background-color: #37383a;
    cursor: pointer;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.navigation .header {
    padding: 15px;
    background-color: #4e5053;
}

.navigation li {
    padding: 15px;
}

.navigation .selected {
    background-color: #9061b2;
}

.score {
    font-size: 36px;
    margin: 15px;
    color: #afb3b9;
}

.title {
    font-size: 18px;
}

.title a {
    text-decoration: none;
    color: #fff;
}

.author {
    font-size: 16px;
}

/**
 * Changed to a <b> because React wraps text nodes in
 * <span> elements if they have non-text-node siblings.
 */
.author b {
    color: #afb3b9;
}

JavaScript 1.7

/**
 * Using React 0.13.2
 * Updated 2015-04-28
 */

var NavigationItem = React.createClass({
    onClick: function() {
        this.props.itemSelected(this.props.item);
    },
    render: function() {
        return (
            <li onClick={this.onClick} className={this.props.selected ? "selected" : ""}>
                {this.props.item.data.display_name}
            </li>
        );
    }
});

var Navigation = React.createClass({
    setSelectedItem: function(item) {
        this.props.itemSelected(item);
    },
    render: function() {
        var _this = this;

        var items = this.props.items.map(function(item) {
            return (
                <NavigationItem key={item.data.id}
                    item={item} itemSelected={_this.setSelectedItem}
                    selected={item.data.url === _this.props.activeUrl} />
            );
        });

        return (
            <div className="navigation">
                <div className="header">Navigation</div>
                <ul>
                    {items}
                </ul>
            </div>
        );
    }
});

var StoryList = React.createClass({
    render: function() {
        var storyNodes = this.props.items.map(function(item) {
            return (
                <tr key={item.data.url}>
                    <td>
                        <p className="score">{item.data.score}</p>
                    </td>
                    <td>
                        <p className="title">
                            <a href={item.data.url}>
                                {item.data.title}
                            </a>
                        </p>
                        <p className="author">
                            Posted by <b>{item.data.author}</b>
                        </p>
                    </td>
                </tr>
            );
        });

        return (
            <table>
                <tbody>
                    {storyNodes}
                </tbody>
           ...