React Base Fiddle (JSX)

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

by Cody Lindley

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<div id="app"></div>

Babel + JSX

var MoodComponent = React.createClass({
  getInitialState: function() {
    return {mood: ':|'};
  },
  changeMood:function(event,a){
  	const moods = [':)',':|',':('];
	const current = moods.indexOf(event.target.textContent);
  	this.setState({mood: current === 2 ? moods[0] : moods[current+1]});
  },
  render: function() {
	  return (
  		<span style={{fontSize:'60',border:'1px solid #333',cursor:'pointer'}} 
		      onClick={this.changeMood}>
			  {this.state.mood}
		</span>
		)
	}
});

ReactDOM.render(< MoodComponent / >, app);