KevinSia/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container-1"></div>
  <div id='container-2'</div>
</body>
</html>

## jsbin.xihegu.js
// similiar to $(function() { ... })
// class is an UI object
// creating a class does not add into DOM yet

var TweetBox = React.createClass({
  // In React, you don’t directly modify the DOM. Instead, in an event handler, you modify something called the “state”. And this is done by calling this.setState
  // every time state changes, the render function is called again
  getInitialState: function(){
    return {
      text: '',
      photoAdded: false
    };
  },
  // changes the state of 'text' every time someone inputs into text area
  handleChange: function(event){
    input = event.target.value;
    this.setState({ text: input });
  },
  // changes the state of 'photoAdded'
  togglePhoto: function(event){
    this.setState({ photoAdded: !this.state.photoAdded });
  },
  // returns the number of remaining character from 'text' state
  remainingCharacters: function(event){
    if(this.state.photoAdded)
    {return 140 - 23 - this.state.text.length;}
    else
    {return 140 - this.state.text.length;}
  },
  // creates error flash and overflow text and return to render method
  overflowAlert: function() {
    if (this.remainingCharacters() < 0) {
      if (this.state.photoAdded) {
        var beforeOverflowText = this.state.text.substring(140 - 23 - 10, 140 - 23);
        var overflowText = this.state.text.substring(140 - 23);
      } else {
        var beforeOverflowText = this.state.text.substring(140 - 10, 140);
        var overflowText = this.state.text.substring(140);
      }

      return (
        <div className="alert alert-warning">
          <strong>Oops! Too Long:</strong>
          &nbsp;...{beforeOverflowText}
          <strong className="bg-danger">{overflowText}</strong>
        </div>
      );
    } else {
      return "";
    }
  },
  // {...} syntax to include any JavaScript code inside the HTML syntax part of JSX.
  // add slash for self closing tags
  render: function() {
    return(
      <div className='well clearfix'>
      This React example is created from
      <a href='http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/'>
      &nbsp;this&nbsp;
      </a>
      tutorial.
      { 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>
    );
  }
});
// handleChange and togglePhoto are event handlers
// remainingCharacters() method to return a number.

// render(class_name, container_to_append_into)
ReactDOM.render(
  <TweetBox />, document.getElementById('container-1')
);

// whatever happens to container-2 will not
// affect anything on container-1
// as both of them have different rendering ID
ReactDOM.render(
  <TweetBox />,
  document.getElementById('container-2')
);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://fb.me/react-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="container-1"></div>
	<div id='container-2'</div>
	</body>
	</html>
	// similiar to $(function() { ... })
	// class is an UI object
	// creating a class does not add into DOM yet

	var TweetBox = React.createClass({
	// In React, you don’t directly modify the DOM. Instead, in an event handler, you modify something called the “state”. And this is done by calling this.setState
	// every time state changes, the render function is called again
	getInitialState: function(){
	return {
	text: '',
	photoAdded: false
	};
	},
	// changes the state of 'text' every time someone inputs into text area
	handleChange: function(event){
	input = event.target.value;
	this.setState({ text: input });
	},
	// changes the state of 'photoAdded'
	togglePhoto: function(event){
	this.setState({ photoAdded: !this.state.photoAdded });
	},
	// returns the number of remaining character from 'text' state
	remainingCharacters: function(event){
	if(this.state.photoAdded)
	{return 140 - 23 - this.state.text.length;}
	else
	{return 140 - this.state.text.length;}
	},
	// creates error flash and overflow text and return to render method
	overflowAlert: function() {
	if (this.remainingCharacters() < 0) {
	if (this.state.photoAdded) {
	var beforeOverflowText = this.state.text.substring(140 - 23 - 10, 140 - 23);
	var overflowText = this.state.text.substring(140 - 23);
	} else {
	var beforeOverflowText = this.state.text.substring(140 - 10, 140);
	var overflowText = this.state.text.substring(140);
	}

	return (
	<div className="alert alert-warning">
	<strong>Oops! Too Long:</strong>
	...{beforeOverflowText}
	<strong className="bg-danger">{overflowText}</strong>
	</div>
	);
	} else {
	return "";
	}
	},
	// {...} syntax to include any JavaScript code inside the HTML syntax part of JSX.
	// add slash for self closing tags
	render: function() {
	return(
	<div className='well clearfix'>
	This React example is created from
	<a href='http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/'>
	this
	</a>
	tutorial.
	{ 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>
	);
	}
	});
	// handleChange and togglePhoto are event handlers
	// remainingCharacters() method to return a number.

	// render(class_name, container_to_append_into)
	ReactDOM.render(
	<TweetBox />, document.getElementById('container-1')
	);

	// whatever happens to container-2 will not
	// affect anything on container-1
	// as both of them have different rendering ID
	ReactDOM.render(
	<TweetBox />,
	document.getElementById('container-2')
	);