React Base Fiddle (JSX)

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

by infous

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.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.min.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>

JavaScript 1.7

var auth = function (state = { status: 'logged out', value: 'guest' }, action) {
	switch (action.type) {
  case 'LOGIN':
  	return Object.assign({}, state, {
    	status: 'logged in',
      value: action.value
    });
  case 'LOGOUT':
  	return Object.assign({}, state, {
    	status: 'logged out',
      value: action.value
    });  
  default:
  	return state;
  }
};
const { createStore } = Redux;
var store = createStore(auth);

var Auth = React.createClass({
	handleLogin: function () {
  	let username = this.refs.username.value;
    store.dispatch({ type: 'LOGIN', value: username });
  },
  handleLogout: function () {
  	store.dispatch({ type: 'LOGOUT', value: 'guest' });
    this.refs.username.value = '';
  },
  render: function () {
  	var button;
    if (this.props.state.status === 'logged out') {
    	button = <button onClick={this.handleLogin}>Login</button>;
    } 
    
    if (this.props.state.status === 'logged in') {
    	button = <button onClick={this.handleLogout}>Logout</button>;
    }
    
  	return (
    	<div>
      	<input type="text" ref="username" />
        {button}
        <h1>Current state is {this.props.state.status} as {this.props.state.value}</h1>
      </div>
    );
  }
});

var render = function () {
  ReactDOM.render(
    <Auth state={store.getState()} />,
    document.getElementById('container')
  );
};

store.subscribe(render);
render();