<head>
  <meta charset="utf-8">
  <title>React</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <script src="//fb.me/react-with-addons-15.1.0.js"></script>
  <script src="//fb.me/react-dom-15.1.0.js"></script>
</head>

<body>
  <div id="container"></div>
</body>

body {
  margin: 20px;
}
// The reference comes from http://chibicode.com/react-js-introduction-for-people-who-know-just-enough-jquery-to-get-by/
// The syntax has been changed to ES6

class TweetBox extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      photoAdded: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.togglePhoto = this.togglePhoto.bind(this);
    this.remainingCharacters = this.remainingCharacters.bind(this);
    this.overflowAlert = this.overflowAlert.bind(this); 
  }
  
  handleChange(e) {
    e.preventDefault();
    this.setState({ text: event.target.value });
  }
  
  togglePhoto(e) {
    e.preventDefault();
    this.setState({photoAdded:!this.state.photoAdded});
  }
  
  overflowAlert() {
    if (this.remainingCharacters() < 0 ) {
      if (this.state.photoAdded) {
        let beforeOverflowText = this.state.text.substring(140 - 23 - 10, 140 - 23);
        let overflowText = this.state.text.substring(140 - 23);
      } else {
        let beforeOverflowText = this.state.text.substring(140 - 10, 140);
        let overflowText = this.state.text.substring(140);
      }
      return (
        <div className="alert alert-warning">
          <strong>Oops! Too Long:</strong>
          &nbsp;...{this.beforeOverflowText}
          <strong className="bg-danger">{this.overflowText}</strong>
        </div>
      );
    } else {
      return "";
    }
  }
  
  remainingCharacters (){
    if(this.state.photoAdded) {
      return 140 - 23 - this.state.text.length;
    } else {
      return 140 - this.state.text.length;
    }
  }
  
   
  
  render() {
    return (
      <div className="well clearfix">
         { this.overflowAlert() }
        <textarea className="form-control"
                  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 btn-default pull-right"
          onClick={this.togglePhoto}>
          {this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <TweetBox />,
  document.getElementById("container")
);
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js