React Base Fiddle (JSX)

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

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="//code.jquery.com/jquery-1.11.3.min.js"></script>
<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>

JavaScript 1.7

var Card = React.createClass({
	getInitialState : function() {
  	return {};
  },
  componentDidMount : function() {
  	var component = this;
    $.get('https://api.facebook.com/users/' + this.props.login, function(data) {
    	component.setState(data);
    });
  },
	render: function() {
		return (
    	<div>
    		<img src={this.state.avatar_url} width="80"/>
        <h3>{this.state.name}</h3>
        <hr/>
      </div>
     );
  }
});

var Form = React.createClass({
	handleSubmit : function(e) {
  	e.preventDefault();
    var loginInput = ReactDOM.findDOMNode(this.refs.login);
    this.props.addCard(loginInput.value);
		loginInput.value = '';
	},
	render: function() {
  	return (
    	<form onSubmit={this.handleSubmit}>
      	<input placeholder="github login" ref="login" />
        <button>Add</button>
      </form>
    );
  }
})

var Main = React.createClass({
	getInitialState : function() {
  	return {
    	logins: []
    };
  },
  addCard : function(login) {
  	this.setState({logins: this.state.logins.concat(login)});
  },
    render: function() {
    	var cards = this.state.logins.map(function(login) {
      	return (<Card key={login} login={login} />);
      });
			return ( 
				<div>
        	<Form addCard={this.addCard} />
        	{cards}
				</div>
			);
    }
});
 
ReactDOM.render(
	<Main name="World" />,
    document.getElementById('container')
);