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"></div> 
<div id="debug"></div>

JavaScript 1.7

// BEGIN DEBUG STUFF
// This is just some side effect rendering so we can see
// what gets rendered by our example components.

const debugInfo = {
	a: [],
  b: []
};

const renderDebug = () => {
  ReactDOM.render(
    <pre>{JSON.stringify(debugInfo, null, 2)}</pre>,
    document.getElementById('debug')
  );
};

renderDebug();

// END DEBUG STUFF

// BEGIN EXAMPLE

// Our state holds a pointer to the current component.
const initialState = {
	component: 'a'
};

// One action which toggles between 'a' and 'b' values.
const reducer = (state = initialState, action) => {
	if (action.type === 'TOGGLE') {
    state = {
      ...state,
      component: state.component === 'a' ? 'b' : 'a'
    };
	}
	return state;
};

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

// We expect this component to only ever receive 'a'.
const A = connectToState(React.createClass({
  render() {
    debugInfo['a'].push(this.props.component);
    renderDebug();  
  	const { component } = this.props;
    return <div>Component A: {component}</div>;
  }
}));

// We expect this component to only ever receive 'b'.
const B = connectToState(React.createClass({
  render() {
    debugInfo['b'].push(this.props.component);
    renderDebug();
  	const { component } = this.props;
    return <div>Component B: {component}</div>;
  }
}));

// Map of component names to components.
const components = {
  a: A,
  b: B
};

// Render A or B depending on the value in the store state.
// When we're on A, we should expect that component to only
// get 'a' state, and when we're on B, we should expect that
// component to only ever get 'b' state. But because the child
// subscribes first, the first render of A will get a 'b' value.
const Root = connectToState(React.createClass({
  onToggle() {
    setTimeout(() => {
    	ReactDOM.unstable_batchedUpdates(() => {
        store.dispatch({type: 'TOGGLE'});
			});
		}, 0)
  },
	render() {
  	const { component } = this.props;
    const Component =...