bookmark interface using reactjs, based on the quick start in react official website

main.js

var BookmarkCollection = React.createClass({
      loadBookmarksFromServer: function() {
        $.ajax({
          url: this.props.link,
          dataType: 'json',
          cache: false,
          success: function(data) {
            this.setState({data: data.bookmarks})
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.link, status, err.toString());
          }.bind(this)
        });
      },
      handleBookmarkSubmit: function(bookmark) {
        $.ajax({
          url: this.props.link,
          dataType: 'json',
          type: 'POST',
          data: bookmark,
          success: function(data) {
            this.setState({data: data.bookmarks})
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, error.toString());
          }.bind(this)
        });
      },

      getInitialState: function() {
        return {data: []};
      },
      componentDidMount: function() {
        this.loadBookmarksFromServer();
        setInterval(this.loadBookmarksFromServer, this.props.pollInterval);
      },
      render: function() {
        return (
          <div className="bookmarkCollection">
            <h1>Bookmarks</h1>
            <BookmarkList data={this.state.data}/>
            <BookmarkForm onBookmarkSubmit={this.handleBookmarkSubmit} />
          </div>
        );
      }
    });

    var BookmarkForm = React.createClass({
      getInitialState: function() {
        return {url: '', comment: ''};
      },
      handleUrlChange: function(e) {
        this.setState({url: e.target.value});
      },
      handleCommentChange: function(e) {
        this.setState({comment: e.target.value});
      },
      handleSubmit: function(e) {
        e.preventDefault();
        var url = this.state.url.trim();
        var comment = this.state.comment.trim();
        if (!comment || !url) {
          return;
        }
        this.props.onBookmarkSubmit({url: url, comment: comment});
        this.setState({url:'', comment: ''});
      },
      render: function() {
        return (
          <form className="bookmarkForm" onSubmit={this.handleSubmit}>
            <input type="text" placeholder="url" onChange={this.handleUrlChange} value={this.state.url}/>
            <input type="text" placeholder="comment" onChange={this.handleCommentChange} value={this.state.comment}/>
            <input type="submit" value="Add" />
          </form>
        );
      }
    });

    var Bookmark = React.createClass({
      render: function() {
        return (
          <div className="bookmark">
            <div className="url">
              {this.props.url}
            </div>
            <div className="comment">
              {this.props.comment}
            </div>
          </div>
        );
      }
    });

    var BookmarkList = React.createClass({
      render: function() {
        var bookmarkNodes = this.props.data.map(function(bookmark) {
            return (
              <Bookmark url={bookmark.url} comment={bookmark.comment} key={bookmark.id}/>
            );
        });
        return (
          <div className="bookmarkList">
            {bookmarkNodes}
          </div>
        );
      }
    });

    ReactDOM.render(
      <BookmarkCollection link="/api/bookmarks" pollInterval={2000}/>,
      document.getElementById('content')
    );