index.html.erb

<%= react_component 'VideoListWithSearch', videoURL: videos_path(format: :json), 
                                           searchURL: videos_search_path(format: :json) %>

search.js.coffee.cjsx

window.Search = React.createClass
  componentWillMount: ->
    console.log('Will Mount')
  render: ->
    <div className="full-width search">
      <div className="container">
        <form>
          <input type="text" onChange={this.props.handleChange}/>
          <a href="" className="glyphicon glyphicon-search submit button"></a>
          <a href="" className="glyphicon glyphicon-plus add-filter button"></a>
        </form>
      </div>
    </div>

video.js.coffee.cjsx

window.Video = React.createClass
  render: ->
    <a className="col-md-4 card-wrapper">
      <div className="card" style={{background: 'url(' + this.props.video.thumbnail + ') center'}}>
        <div className="info-wrapper">
          <span className="info">
            {this.props.video.team}
          </span>
          <span className="info event">
            {this.props.video.event} {this.props.video.season}
          </span>
        </div>
      </div>
    </a>

video_list.js.coffee.cjsx

window.VideoList = React.createClass
  propTypes:
    videoURL: React.PropTypes.string

  getInitialProps: ->
    videos: []

  hasVideos: ->
    this.props.videos.length != 0
  
  renderNoVideoFoundMessage: ->
    if not this.hasVideos()
      <div className="message">
        <p>No videos</p>
        <p>Try searching for something else</p>
      </div>
  
  renderVideoComponents: ->
    this.props.videos.map (video, i) ->
      <Video video={video} key={i} />
  
  render: ->
    <div className="container">
      <div className="row cards video-list">
        {this.renderNoVideoFoundMessage()}
        {this.renderVideoComponents()}
      </div>
    </div>

video_list_with_search.js.coffee.cjsx

window.VideoListWithSearch = React.createClass
  getInitialState: ->
    {
      query: null,
      videos: []
    }
  
  componentWillMount: ->
    that = this
    $.get this.props.videoURL, (data) ->
      that.setState({videos: data})

  search: ->
    that = this
    $.get this.props.searchURL, (data) ->
      that.setState({videos: data})

  handleChange: (event) ->
    this.setState({query: event.target.value});

  render: ->
    <Search onChange={this.handleChange} />
    <VideoList videos={this.state.videos} />