React Base Fiddle (JSX)

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

by Matthew Day

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

CSS

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

.example-appear {
  opacity: 0.01;
  transition: opacity 1s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

Babel + JSX

var {CSSTransitionGroup} = React.addons;

class Fade extends React.Component {
	constructor(props) {
  	super(props);
    this.clickHandler = this.clickHandler.bind(this); 
    this.state = {
    	items: ["Hello"]
    }
  }

	clickHandler(e) {
    this.setState({
    	items:[]
    });
  }
  
  render() {
  	const items = this.state.items.map((item, index) => (
    	<div onClick={this.clickHandler} key={index}>{item}</div>
    ));
    
    return (
        <CSSTransitionGroup  transitionName="example"
          transitionAppear={true}
          transitionLeave={true}
          transitionEnterTimeout={600}
          transitionAppearTimeout={600}
          transitionLeaveTimeout={300}>
          {items}
        </CSSTransitionGroup>
    );
  }
};

ReactDOM.render(
  <Fade/>,
  document.getElementById('container')
);

// SOURCES
// https://jsfiddle.net/nikhilkumar80/69z2wepo/34420/ (for the transition)
// http://jsfiddle.net/protron/560fyjnp/ (for a React fiddle in Babel + JSX)