React Base Fiddle (JSX)

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

by axl163

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://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="app">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var PhoneBook = React.createClass({
	getInitialState: function() {
  	return {
    	title: 'My Phonebook',
    	listings: ['323-993-9871', '123-947-9958', '654-331-9622']
    }
  },
  addListing: function(listing) {
  	this.setState({
    	listings: this.state.listings.concat([listing])
    });
  },
	render: function() {
  	return (
    	<div>
      	<h1>{this.state.title}</h1>
				<AddNumber addNew={this.addListing}></AddNumber> 
        <Listings numbers={this.listings}></Listings>
			</div>

    )
  }
});

var Listings = React.createClass({
	render: function() {
  	return {
    	var phoneNumbers = this.props.numbers.map(function(number){
      	return '<li>' + number + '</li>';
      })
      <div>
      	<h1>Phone Numbers</h1>
        <ul>
        	{phoneNumbers}
				</ul>
      </div>
    }
  }
});

ReactDOM.render(<PhoneBook />, document.getElementById('app'));