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.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.1.0/redux-thunk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/0.10.1/fetch.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

``/**
 * This is a simple Redux example.
 * It simply retrieves a list of posts from JSONPlaceholder.com.
**/

/**
 * Reducer
**/
const posts = (state = [], action) => {
  switch (action.type) {
  case 'RECEIVED_ALL_POSTS': return {loaded: true, posts: action.posts}
  case 'FETCH_ALL_POSTS': return {loaded: false}
  default: return state
  }
}
const rootReducer = Redux.combineReducers({
  posts
})

/**
 * Store. Redux has a single store, handled by reducers.
**/
function configureStore(preloadedState) {
  return Redux.createStore(
  	rootReducer, 
    Redux.applyMiddleware(ReduxThunk.default)
  )
}
const store = configureStore()

/**
 * Action creator
**/
const postActions = {
  fetchAll: () => {
     return dispatch => {
      dispatch(postActions.fetch())
      return fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => dispatch(postActions.receivedPosts(json)))
    }
  },
  fetch: () => {
    return {type: 'FETCH_ALL_POSTS'}
  },
  receivedPosts: (json) => {
    return {
      type: 'RECEIVED_ALL_POSTS',
      posts: json
    }
  }
}

/**
 * Component to render Users list
**/
class Posts extends React.Component {
  render() {
  	const postsList = this.props.loaded ? (<ul>
        {(this.props.posts || []).map(post => <li key={post.id}>{post.title}</li>)}</ul>)
      : (<div>Loading ...</div>)
    return postsList
  }
}

/**
 * The Container component
 */
class App extends React.Component {
  componentDidMount() {
    const {dispatch} = this.props
    this.props.actions.fetchAll()
  }

  render() {
    return (
      <div>
        <Posts loaded={this.props.data.loaded} posts={this.props.data.posts}></Posts>
      </div>
    )
  }
}

/**
 * Important: conncet the Reducers, action creator and store
**/

// Map the state to the props
const mapStateToProps = (state) => {
  return {
    data: state.posts
  }
}

// Map the action creator and dispatcher
const mapDispatchToProps = (dispatch) => {
  return {
  ...