React.js from League I/O WIP

player_champions.js.jsx

var PlayerChampions = React.createClass({

  loadChampions: function() {
    $.ajax({
      url: '/api/v1/players/' + this.props.summoner + '/champions',
      dataType: 'json',
      success: function(data) {
        this.setState({champions: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('#GET Error', status, err.toString());
      }.bind(this)
    });
  },

  getInitialState: function(){
    return { 
      searchString: '', 
      champions: []
    };
  },

  componentDidMount: function() {
    this.loadChampions();
  },

  handleChange: function(e){
    // If I comment out this line, the text box will not change its value.
    // This is because in React, an input cannot change independently of the value
    // that was assigned to it. In my case this is this.state.searchString.
    this.setState({searchString:e.target.value});
  },

  render: function() {

    var champions = this.state.champions,
        searchString = this.state.searchString.trim().toLowerCase();

    if(searchString.length > 0){
      // We are searching. Filter the results.
      champions = champions.filter(function(l){
        return l.name.toLowerCase().match( searchString );
      });
    }

    return (
      <div className="PlayerChampions clearfix">
        <div className="pull-left Title"> 
          <i className="ion-ribbon-a"></i> Played Champions
        </div>
        <div className="pull-right TierInfo"> 
          {this.state.champions.length}
        </div>
        <hr/>
        <input type="text" className="form-control ItemSearch" value={this.state.searchString} onChange={this.handleChange} 
          placeholder="Search Champions" />

        <ul className="ItemSearchList"> 
          { 
            champions.sort(function(a, b) { return b.total_sessions_played - a.total_sessions_played }).slice(0,3).map(function(champ){
              return (
                <li key={champ.id} >
                  <div className="media">
                    <div className="media-left">
                      <a href="#">
                        <img className="media-object" src={"http://ddragon.leagueoflegends.com/cdn/5.2.1/img/champion/" + champ.key  + ".png"} />
                      </a>
                    </div>
                    <div className="media-body" >
                      <h4 className="media-heading">{champ.name}</h4>
                      <div>
                        {(champ.total_sessions_won / champ.total_sessions_played * 100.0).toFixed(2)}% Winratio
                      </div>
                    </div>
                  </div>
                </li>
              )
            }) 
          }
        </ul>
      </div>
    )

  }
});


// Render the ItemSearch component on the page
$(document).on("page:change", function() {
  var $content = $("#playerChampions");
  if ($content.length > 0) {
    React.render(
      <ItemSearch />,
      document.getElementById('playerChampions')
    );
  }
})

player_league_entry.js.jsx

var WinRatio = React.createClass({
  render: function() {
    return (
      <div className="Stats">
        <h3>
          <span>{(this.props.data.total_sessions_won / this.props.data.total_sessions_played * 100).toFixed(1)}</span>
          <small>%</small>
        </h3>
        <p>Winratio</p>
      </div>
    )
  }
});

var WinsLosses = React.createClass({
  render: function() {
    return (
      <div className="Stats">
        <h3>
          <span>{this.props.data.total_sessions_won + '/' + this.props.data.total_sessions_lost}</span>
        </h3>
        <p>Wins / Losses</p>
      </div>
    )
  }
});

var PlayerStatistics = React.createClass({

  loadPlayer: function() {
    $.ajax({
      url: "/api/v1/players/" + this.props.summoner,
      dataType: 'json',
      success: function(data) {
        this.setState({
          player: data.player,
          ranked: data.ranked
        });
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('#GET Error', status, err.toString());
      }.bind(this)
    })
  },

  getInitialState: function() {
    return { 
      player: [],
      ranked: []
    };
  },

  computeStats: function() {
    this.winratio = this.state.ranked.total_sessions_played;
  },

  componentDidMount: function() {
    this.loadPlayer();
  },

  render: function() {

    var progress_width = {
      width: this.state.player.league_points + '%'
    }

    return (
      <div className="PlayerStatistics IoFont">

        <div className="row StatBox">
          <div className="col-md-6 col-sm-6 col-xs-6">
            <WinRatio data={this.state.ranked} />
          </div>
          <div className="col-md-6 col-sm-6 col-xs-6 BL">
            <WinsLosses data={this.state.ranked} />
          </div>
        </div>

        <div className="row TierBox">
          <div className="col-md-6 col-xs-6">
            <div className="Image">
              <span className="text-center">
                <img src={"https://s3.amazonaws.com/leagueio/static/images/tier/" + this.state.player.tier + "_" + this.state.player.division + ".png"} />
              </span>
            </div>
          </div>
          <div className="col-md-6 col-xs-6">
            <div className="Info">
              <h4 className="text-left">
                {this.state.player.tier + ' ' + this.state.player.division}
              </h4>
              <small className="text-muted">
                {this.state.player.division_name}
              </small>
              <div className="progress">
                <div className="progress-bar progress-bar-striped active" role="progressbar" 
                  aria-valuenow={this.state.player.league_points} aria-valuemin="0" aria-valuemax="100" 
                  style={progress_width}>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="row StatBox">
          <div className="col-md-6 col-sm-6 col-xs-6">
            <div className="Stats">
              <h3>
                <span>{this.state.player.league_points}</span>
                <small>LP</small>
              </h3>
              <p>Leaguepoints</p>
            </div>
          </div>

          <div className="col-md-6 col-sm-6 col-xs-6 BL">
              <div className="Stats">
                <h3>
                  <span>123</span>
                </h3>
                <p>something</p>
              </div>
          </div>
        </div>

      </div>
    );
  }
});

$(document).on("page:change", function() {
  var $content = $("#playerStatistics");
  if ($content.length > 0) {
    React.render(
      <PlayerStatistics />,
      document.getElementById('playerStatistics')
    );
  }
})