Change img based on screen size

dynamic-image.js

var React = require('react');
var ReactDOM = require('react-dom');

var DynamicImage = React.createClass({
  var width = $(window).width();
  getInitialState: function() {
    if (width >= 1028) {
      return {url: 'images/browser.png'};
    } else if (width < 1028 && width >=768) {
      return {url: 'images/ipad.png'};
    } else {
      return {url: 'images/iphone.png'};
    }
  },
  handleResize: function(){
    if (width >= 1028) {
      this.setState({url: "images/browser.png"});
    } else if (width < 1028 && width >=768) {
      this.setState({url: "images/ipad.png"});
    } else {
      this.setState({url: "images/iphone.png"});
    }
  },
  componentDidMount: function() {
    window.addEventListener('resize', this.handleResize);
  },
  componentWillUnmount: function() {
    window.removeEventListener('resize', this.handleResize);
  },
  render: function() {
    return (
      <img className="img-responsive" src={this.state.url}/>
    );
  }
});

ReactDOM.render(
  <DynamicImage/>,
  document.getElementById('picture')
);