React Base Fiddle (JSX)

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

by Chetan Hanumantha

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="http://code.jquery.com/jquery-2.1.4.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.github.com/users/'+this.props.login, function(data){
        	component.setState(data);
        })
    },
    render: function() {
        return (
        	<div>
          	<img src={this.state.avatar_url} width="80px"/>
            <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: ['zpao', 'fisherwebdev']};
    },
    addCard: function(login) {
    	this.setState({logins: this.state.logins.concat(login)});
    },
		render: function() {
    		var cards = this.state.logins.map(function(login) {
        	return (<Card login={login}/>)
        });
    		return (
        	<div> 
          	<Form addCard={this.addCard}/>
        		{cards}
         	</div>
        )
    }
})

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