JSFiddle - React, Tailwind, and code Playground

by Liao Yongfu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.1.1/react-router-dom.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-transition-group.min.js"></script>
<div id="root">
loading..
</div>

CSS

body{
  min-height: 300px;
}
.example-enter{
    opacity: 0.01;
}
.example-enter.example-enter-active{
    opacity: 1;
    transition: opacity 500ms ease-in;
}
.example-leave{
    opacity: 1;
}
.example-leavel.example-leavel-active{
    opacity: 0.01;
    transition: opacity 300ms ease-in;
}
.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in;
}

Babel + JSX

const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

class Home extends React.Component{
    constructor(){
        super();

        this.state = {
            items: [
                'hello',
                'world',
                'click',
                'me'
            ]
        };
        this.handleAdd = this.handleAdd.bind(this);
    }

    handleAdd() {
        const newItems = this.state.items.concat([
            prompt('Enter some text')
        ]);
        this.setState({items: newItems});
    }

    handleRemove(i) {
        let newItems = this.state.items.slice();
        newItems.splice(i, 1);
        this.setState({items: newItems});
    }

    render(){
        const items = this.state.items.map((item, i) => (
          <div key={i} onClick={() => this.handleRemove(i)}>
            {item}
          </div>
        ));
        return (
            <div>
                <button type="button" onClick={this.handleAdd}>Add Item</button>
                <ReactCSSTransitionGroup
                    transitionName="example"
                    transitionEnterTimeout={500}
                    transitionLeaveTimeout={300}
                >
                    {items}
                </ReactCSSTransitionGroup>
            </div>
        );
    }
}

ReactDOM.render(
	<div>
	  <Home/>
	</div>,
  document.getElementById('root')
)