React tests (JSX)

http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/

by Anton

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var TweetBox = React.createClass({
  getInitialState: function() {
    return {
      text: "",
      photoAdded: false
    };
  },
  togglePhoto: function(event) {
  	this.setState({ photoAdded: !this.state.photoAdded });
  },
  remainingCharacters: function() {
  	return 140 - this.state.text.length - (this.state.photoAdded ? 23 : 0);
  },
  overflowAlert: function() {
  	var photoOffset = this.state.photoAdded ? 23 : 0;
  	var beforeOverflowText = this.state.text.substring(140 - 10 - photoOffset, 140 - photoOffset);
  	var overflowText = this.state.text.substring(140 - photoOffset);
    
  	return this.remainingCharacters() >= 0 ? '' : (
      <div className="alert alert-warning">
        <strong>Oops! Too Long:</strong>
        &nbsp;...{beforeOverflowText}
      	<strong className="bg-danger">{overflowText}</strong>
      </div>
    )
  },
  handleChange: function(event) {
  	this.setState({ text: event.target.value });
  },
  render: function() {
    return (
      <div className="well clearfix">
      	{ this.overflowAlert() }
        <textarea className="form-control" rows="5" onChange={this.handleChange}></textarea>
        <br/>
        <span>{ this.remainingCharacters() }</span>
        <button className="btn btn-primary pull-right" disabled={this.state.text.length === 0 && !this.state.photoAdded}>Tweet</button>
        <button className="btn pull-right" onClick={this.togglePhoto}>{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }</button>
      </div>
    );
  }
});

ReactDOM.render(
  <TweetBox />,
  document.getElementById("container")
);