React Base Fiddle (JSX)

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

by samdelagarza

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="root">
  <!-- 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) {
    console.log(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 = React.findDomNode(this.refs.login);
    
    this.props.addCard(loginInput.value);
    loginInput.value = '';
  },
	render: function(){
  	return (
    	<form>
      	<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 login={login} />);
    });
    return ( 
      <div>
      	<Form addCard={this.addCard} />
      	{cards}
      </div>
    );
  }
});

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

let React = require('react');
let ReactDOM = require('react-dom');
*/

let Hello = React.createClass({
    render() {
        return (<h3>Hello Webpack!!!!!</h3>);
    }
});

ReactDOM.render(<Hello />, document.getElementById('root'));