React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by _alexander_

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.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>

Babel + JSX

class Post extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      post: this.props.data,
      comment: ''
    };
  }
  
  render() {
  	return <div>
			<input 
      	type="text" 
        value={this.state.comment} 
        onChange={ this.handleChange.bind(this) } 
        placeholder="Write a comment..." />
    	
      <button 
      	className="button comments" 
        onClick={ this.handleClick.bind(this, this.state.post.id)}>Button</button>
    </div>
	}
 	
  handleClick(postId, e) {
  	console.log( postId );
    console.log( this.state.comment );
  }
  
  handleChange(e) {
  	this.setState({ comment: e.target.value });
	}
}
 
var post = {
	id: 100
};

ReactDOM.render(
	<Post data={ post } />, document.getElementById('container')
);