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

HTML

<div id="root"></div>

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;
}

React

class NavigationItem extends React.Component {
   	onClick = (e) => {
        this.props.itemSelected(this.props.item);
    }

    render() {
        return (
            <li onClick={this.onClick} className={this.props.selected ? "selected" : ""}>
                {this.props.item.data.display_name}
            </li>
        );
    }
}

class Navigation extends React.Component {
    setSelectedItem = (item) => {
        this.props.itemSelected(item);
    };

    render() {
        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>
        );
    }
}

class StoryList extends React.Component {
    render() {
        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>
            </table>
        );
    }
}

class App extends React.Component {
	 ...