React Base Fiddle (JSX)

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

by justindeal

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.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.0/react-redux.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container"/>

JavaScript 1.7

const initialState = {
	component: 'a',
  value: 1,
  inc: 0
};

const reducer = (state = initialState, action) => {
	if (action.type === 'TOGGLE') {
    state = {
      ...state,
      component: state.component === 'a' ? 'b' : 'a',
      value: state.value === 1 ? 2 : 1
    };
	} else if (action.type === 'INC') {
    state = {
      ...state,
      inc: state.inc + 1
    };
	}
	return state;
};

const connectToState = ReactRedux.connect(
	state => state
)

const A = connectToState(React.createClass({
  render() {
  	const { component, value, inc } = this.props;
    console.log(`A: ${component}, value: ${value}, inc: ${inc}`);
    return <div>Component A: {value}</div>;
  }
}));

const B = connectToState(React.createClass({
  render() {
  	const { component, value, inc } = this.props;
    console.log(`B: ${component}, value: ${value}, inc: ${inc}`);
    return <div>Component B: {value}</div>;
  }
}));

const Root = connectToState(React.createClass({
  onToggle() {
    //store.dispatch({type: 'INC'});
    setTimeout(() => {
      store.dispatch({type: 'TOGGLE'});
		}, 0)
  },
	render() {
  	const { component, value, inc } = this.props;
    const Component = components[component];
    console.log(`Root: ${component}, value: ${value}, inc: ${inc}`);
    return (
    	<div>
      	<button onClick={this.onToggle}>Toggle</button>
    		<Component/>
      </div>
    );
  }
}));

const components = {
  a: A,
  b: B
};

const store = Redux.createStore(reducer);

const { Provider } = ReactRedux;

ReactDOM.render(
  <Provider store={store}>
		<Root/>
  </Provider>,
  document.getElementById('container')
);