React Base Fiddle (JSX)

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

by samur3

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>
<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>

CSS

body {
  color: white
}

JavaScript 1.7

class CounterDisplay extends React.Component{
	render() {
  	// Calls the handler props once events are fired
  	return <div>
    		<div>{this.props.counterProp}</div>
        <br />
        <button onClick={this.props.incrementCounter}>+</button>
        <button onClick={this.props.decrementCounter}>-</button>
    	</div>
  }
}

class Counter extends React.Component{
	constructor(props) {
  	super(props);    
    this.state = {counter: 0};     
  }
  
  handleIncrement(){
  	// Update counter state
  	this.setState({counter : this.state.counter+1});
  }
  
  handleDecrement(){
	  // Update counter state
  	this.setState({counter : this.state.counter-1});
  }
  render() {
  	// Pass down handlers to CounterDisplay component
    return <div>
    		<h2>{this.props.name}</h2>
    		<CounterDisplay 
        	counterProp={this.state.counter}
          incrementCounter={this.handleIncrement}
          decrementCounter={this.handleDecrement}></CounterDisplay>
      </div>;
  }
};

ReactDOM.render(
  <Counter name={'Counter'} />,
  document.getElementById('container')
);