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.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.0.4/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.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

const ActionTypes = {
	FETCH_POSTS: 'FETCH_POSTS'
};

const initialState = {
	posts: [],
    postsById: {}
};

const handlers = {
	[ActionTypes.FETCH_POSTS](state, {posts}) {
		return {
        	...state,
            posts: posts.map(post => post.id),
            postsById: _.object(post => [post.id, post])
        };
    }
};

const reducer = (state = initialState, action) => {
	if (handlers[action.type]) {
    	return handlers[action.type](state, action);
	}
    return state;
};

const fetchPosts = () {
	return dispatch => {
    	dispatch({
        	type: ActionTypes.FETCH_POSTS,
            posts: [
            	{id: 1, title: 'Hello!'}
            ]
        });
	};
};

const PostList = ({posts}) =>
	<ul>
    	{
        	posts.map(post =>
            	<li>{post.title}</li>
            )
        }
    </ul>

ReactDOM.render(
	<PostList posts={[{title: 'hello'}]}/>,
    document.getElementById('container')
);