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 Contacts = React.createClass({
  getInitialState: function() {
    return {
      title: 'My Friends',
      friends: ['Bob', 'Tom', 'Ulla']
    }
  },
  addFriend: function(friend) {
    this.setState({
      friends: this.state.friends.concat([friend])
    });
  },
  render: function() {
    return ( < div >
      < h1 > {
        this.state.title
      } < /h1> < ContactList friends = {
      this.state.friends
    }
    /> < AddFriend addNew = {
    this.addFriend
  }
  /> < /div >
)
}
});

var AddFriend = React.createClass({
  getInitialState: function() {
    return {
      newFriend: ''
    }
  },
  getPropTypes: function() {
    addNew: React.PropTypes.func.isRequired
  },
  saveFriend: function() {
    this.props.addNew(this.state.newFriend);
    this.setState({
      newFriend: ''
    });
  },
  updateFriend: function(e) {
    this.setState({
      newFriend: e.target.value
    });
  },
  render: function() {
    return ( < div >
      < input value = {
        this.state.newFriend
      }
      onChange = {
        this.updateFriend
      }
      /> < button onClick = {
      this.saveFriend
    } > Add new friend < /button> < /div >
  )
}
});

var ContactList = React.createClass({
  getDefaultProps: function() {
    return {
      friends: []
    }
  },
  render: function() {
    var friendsList = this.props.friends.map(function(friend, index) {
      return <li key = {
        index
      } > {
        friend
      } < /li>
    })
    return ( < div >
      < ul > {
        friendsList
      } < /ul> < /div >
    )
  }
});

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