React Base Fiddle (JSX)

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

by tomexx

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-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700.css">
<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>

CSS

body {
  background: #111;
  overflow: hidden;
}

.item {
  width: 150px;
  height: 250px;
  
  font-family: 'Roboto';
  font-size: 11px;
  text-align: center;
  
  position: absolute;
  left: 100%;
  top: 50%;
  
  margin-top: -125px;
  margin-left: -75px;
  
  background-color: #F1F1F1;
  opacity: 0.1;
  
  transition: opacity .5s ease-in-out, left 1s ease-in-out;
}

.item h1 {
  font-family: 'Roboto';
  font-size: 13px;
  
  padding: 0 5px;
}

.item p {
  font-family: 'Roboto';
  font-size: 11px;
  
  padding: 0 5px;
}


.item-in {
  left: 50%;
  opacity: 1;
}

.item-out {
  left: 20%;
  opacity: 0;
}

JavaScript 1.7

var ReactTransitionGroup = React.addons.TransitionGroup;

var App = React.createClass({
	getInitialState: function() {
    return {
    	items: [
      	{ 
        	name: 'Gummies liquorice pudding',
        	text: 'Gummies liquorice pudding wafer. Pie tootsie roll brownie sugar plum pastry oat cake tart caramels pastry. Candy canes lollipop dragée caramels muffin icing.',
          url: 'https://www.fillmurray.com/150/100'
        }, 
        { 
        	name: 'Dessert chocolate cake', 
        	text: 'Dessert chocolate cake halvah jelly. Icing chupa chups sweet candy canes cupcake fruitcake chocolate biscuit biscuit. Jujubes wafer candy halvah topping sesame snaps bonbon jelly.',
          url: 'https://www.fillmurray.com/150/101'
        }, 
        { 
        	name: 'Gummies ice cream', 
       		text: 'Gummies ice cream chocolate cake chocolate icing. Soufflé pie sweet bonbon. Gingerbread cotton candy ice cream carrot cake sweet roll pastry fruitcake bonbon.',
          url: 'https://www.fillmurray.com/150/102'
        }, 
        { 
        	name: 'Cake cake pudding',
        	text: 'Cake cake pudding. Jujubes muffin toffee wafer bear claw fruitcake sesame snaps. Pie pastry chocolate cake apple pie fruitcake cake pie cake.',
          url: 'https://www.fillmurray.com/150/103'
        }
      ],
    	active: 0
    };
  },
  
  handleToggleClick: function() {
    var state = this.state.active +1;
    if (state >= this.state.items.length) {
			state = 0;
    }
    this.setState({
    	items: this.state.items,
      active: state
    });
    console.clear();
  },
  
	render: function() { 	
    return (
    	<div>
        <button onClick={this.handleToggleClick}>Next</button>
        
     		<Container name={this.state.items[this.state.active].name} text={this.state.items[this.state.active].text} url={this.state.items[this.state.active].url} />
      </div>
    );
  }
});

var Container = React.createClass({
	render: function () {
  	var item = <Item...