React Base Fiddle (JSX)

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

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">
  <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var PropTypes = React.PropTypes;
var createStore = Redux.createStore;
var applyMiddleware = Redux.applyMiddleware;
var Provider = ReactRedux.Provider;
var connect = ReactRedux.connect;

// thunk
function thunkMiddleware({
  dispatch,
  getState
}) {
  return next => action =>
    typeof action === 'function' ?
    action(dispatch, getState) :
    next(action);
}

function changeState() {
  return (dispatch) => {
    setTimeout(
      () => {
        dispatch({
          type: 'CHANGE-STATE'
        });
      },
      200
    )
  };
}

function OuterComponent({
  textKey,
  changeState
}) {
  return ( <
    div >
    <
    ConnectedInnerComponent textKey = {
      textKey
    }
    /> <
    button onClick = {
      changeState
    } > Change the State < /button> < /
    div >
  );
}
OuterComponent.displayName = 'OuterComponent';
const ConnectedOuterComponent = connect(
  ({
    textKey
  }) => ({
    textKey
  }), {
    changeState
  }
)(OuterComponent);

function InnerComponent({
  displayText
}) {
  console.log(`InnerComponent says "${displayText}"`);
  return ( <
    p > {
      displayText
    } < /p>
  );
}
InnerComponent.displayName = 'InnerComponent';
InnerComponent.propTypes = {
  displayText: PropTypes.string.isRequired
};
const ConnectedInnerComponent = connect(
  ({
    textContent
  }, {
    textKey
  }) => {
    return {
      displayText: textContent[textKey]
    };
  }
)(InnerComponent);

const initialState = {
  textKey: 'lorem',
  textContent: {
    lorem: 'Lorem ipsum...'
  }
};

function exampleApp(state = initialState, action) {
  switch (action.type) {
    case 'CHANGE-STATE':
      return {
        textKey: 'cow',
        textContent: {
          cow: 'How now brown cow'
        }
      }
    default:
      return state;
  }
}

ReactDOM.render( <
  Provider store = {
    createStore(exampleApp, applyMiddleware(thunkMiddleware))
  } >
  <
  ConnectedOuterComponent / >
  <
  /Provider>,
  document.getElementById('container')
);