React Base Fiddle (JSX)

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

by johnwun

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-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.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

h1{
  border:1px dashed blue;
  padding:12px;
}

button{
  color:gray; 
  font-size:4em;
  padding:12px 48px;
  margin:6px;
  border-radius:12px;
}

.poop{
  color:white; 
  background-color:fuchsia;
}

JavaScript 1.7

const Hello = React.createClass({
	getInitialState(){
  	return {lastClicked:`2`}
  },
	handleClick:function(e){
      let clickedVal = e.target.getAttribute('id') || `0`;
     // console.log(clickedVal, e, this.state.lastClicked);
      this.setState({lastClicked: clickedVal});
    
  },
  render: function() {   
    return 	(
    	<h1 onClick={this.handleClick}>
    		<div>Click the <span className="poop">{this.props.name}</span></div>
        <button id="1" className={this.state.lastClicked==='1' ?`poop`:``}>1</button>
      	<button id="2" className={this.state.lastClicked==='2' ?`poop`:``}>2</button>
    		<button id="3" className={this.state.lastClicked==='3' ?`poop`:``}>3</button>
    		<button id="4" className={this.state.lastClicked==='4' ?`poop`:``}>4</button>
  		</h1>
      );
  }
});

ReactDOM.render(<Hello name="Buttons!" />,
  document.getElementById('container')
);