JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<script src="https://wzrd.in/standalone/expect@latest"></script>
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div class="root"></div>

Babel + JSX

const todo = (state, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                id: action.id,
                text: action.text,
                completed: false
            };
        case 'TOGGLE_TODO':
            if (state.id !== action.id) {
                return state;
            } 
            return {
                ...state,
                completed: !todo.completed
            }
        default:
            return state;
    }
};

const todos = (state = [], action) => {
	switch (action.type) {
        case 'ADD_TODO':
            return [
                ...state,
                todo(null, action)
            ];
        case 'TOGGLE_TODO':
            return state.map(t => todo(t, action));
        default:
            return state;
    }
};

const visibilityFilter = (state = 'SHOW_ALL', action) => {
	switch (action.type) {
        case 'SET_VISIBILITY_FILTER':
            return action.filter;
        default:
            return state;
    }
};

/*
const todoApp = (state = {}, action) => {
    return {
    	todos: todos(
        	state.todos,
            action
        ),
        visibilityFilter: visibilityFilter(
            state.visibilityFilter,
            action
        )
    };
};
*/

const {combineReducers} = Redux;
const todoApp = combineReducers({
	todos: todos,
    visibilityFilter: visibilityFilter
});


const {createStore} = Redux;
const store = createStore(todoApp);

const {Component} = React;
let nextTodoId = 0;
class TodoApp extends Component {
	render: () => {
        return (
        	<div>
            	<button onClick={() => {
            		store.dispatch({
                        type: 'ADD_TODO',
                        text: 'Test',
                        id: nextTodoId++
                    })
        		}}></button>
                <ul>
                    {this.props.todos.map(todo =>
                     <li key={todo.id}>{todo.text}</li>
                	)}
               ...