JSX

/** @jsx React.DOM */
var CountdownTimer = React.createClass({
  getInitialState: function() {
    return {
      secondsRemaining: this.props.secondsRemaining
    };
  },
  tick: function() {
    this.setState({secondsRemaining: this.state.secondsRemaining - 1});
    if (this.state.secondsRemaining <= 0) {
      clearInterval(this.interval);
    }
  },
  componentDidMount: function() {
    this.setState({ secondsRemaining: this.props.secondsRemaining });
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    if (this.state.secondsRemaining) {
      return (
        <div>
          <div>Seconds Remaining: {this.state.secondsRemaining}</div>
          <div><img src="/img/place-bid.jpg" alt="Place Bid" /></div>
        </div>
      );
    } else {
      return (
        <div>The auction has ended</div>
      );
    }
  }
});

var AuctionListing = React.createClass({
  render: function() {
    return (
      <div className="auction-listing">
        <div className="image">
          <img src={this.props.image} alt="iPhone 5S" />
        </div>
        <div className="details">
          <h3 className='title'>{this.props.title}</h3>
          <p className='description'>{this.props.description}</p>
          <p className='countdown'><CountdownTimer secondsRemaining={this.props.remaining} /></p>
        </div>
      </div>
    );
  }
});

React.renderComponent(<AuctionListing title="Like new iPhone 5S" description="Complete, with the original box. You know you want it!" image="/img/iphone5s.jpg" secondsRemaining="10" />, document.querySelector('#output'));

Javascript

var CountdownTimer = React.createClass({displayName: 'CountdownTimer',
  getInitialState: function() {
    return {
      secondsRemaining: this.props.secondsRemaining
    };
  },
  tick: function() {
    this.setState({secondsRemaining: this.state.secondsRemaining - 1});
    if (this.state.secondsRemaining <= 0) {
      clearInterval(this.interval);
    }
  },
  componentDidMount: function() {
    this.setState({ secondsRemaining: this.props.secondsRemaining });
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    if (this.state.secondsRemaining) {
      return (
        React.DOM.div(null,
          React.DOM.div(null, "Seconds Remaining: ", this.state.secondsRemaining),
          React.DOM.div(null, React.DOM.img( {src:"/img/place-bid.jpg", alt:"Place Bid"} ))
        )
      );
    } else {
      return (
        React.DOM.div(null, "The auction has ended")
      );
    }
  }
});

var AuctionListing = React.createClass({displayName: 'AuctionListing',
  render: function() {
    return (
      React.DOM.div( {className:"auction-listing"},
        React.DOM.div( {className:"image"},
          React.DOM.img( {src:this.props.image, alt:"iPhone 5S"} )
        ),
        React.DOM.div( {className:"details"},
          React.DOM.h3( {className:"title"}, this.props.title),
          React.DOM.p( {className:"description"}, this.props.description),
          React.DOM.p( {className:"countdown"}, CountdownTimer( {secondsRemaining:this.props.secondsRemaining} ))
        )
      )
    );
  }
});

React.renderComponent(AuctionListing( {title:"Like new iPhone 5S", description:"Complete, with the original box. You know you want it!", image:"/img/iphone5s.jpg", secondsRemaining: 10} ), document.querySelector('#output'));

Output