gistfile1.coffee

Hummingbird.LibraryEntryView = Ember.View.extend
  user: Ember.computed.alias('controller.user')

  didInsertElement: ->
    @set 'reactComponent', LibraryEntryReactComponent(
      content: @get('content')
      view: this
    )
    React.renderComponent @get('reactComponent'), @get('element')

  willClearRender: ->
    React.unmountComponentAtNode @get('element')

gistfile2.js

/** @jsx React.DOM */

var LibraryDropdownReactComponent = React.createClass({
  render: function() {
    var content = this.props.content;

    if (this.props.dropdownOpen) {
      return (
        <snipped>
      );
    }
    else {
      return (
        <div />
      );
    }
  }
});

var LibraryEntryReactComponent = React.createClass({
  getInitialState: function() {
    return {dropdownOpen: false};
  },

  toggleDropdown: function(event) {
    this.setState({dropdownOpen: !this.state.dropdownOpen});
  },

  render: function() {
    var content = this.props.content;

    var ratingDivClass = "list-item-score";
    if (Ember.isNone(content.get('rating'))) {
      ratingDivClass += " not-rated";
    }

    return (
      <div className="library-entry">
        <div className="list-group-item" onClick={this.toggleDropdown}>
          <div className="list-item-left">
            {content.get('anime.canonicalTitle')}
          </div>
        </div>
        <LibraryDropdownReactComponent dropdownOpen={this.state.dropdownOpen} content={content} view={this.props.view} />
      </div>
    );
  }
});