mithereal/index.html

## index.html
<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.js" data-semver="2.1.4" data-require="jquery@*"></script>
    <script data-require="moment.js@*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="root"></div>
    <script src="https://fb.me/react-0.14.3.js"></script>
    <script src="https://fb.me/react-dom-0.14.3.js"></script>
    <script src="script.js"></script>
  </body>

</html>

## script.jsx
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>
       <a href={this.state.html_url} >< img src = {
        this.state.avatar_url
      }
      width = "80" /></a>
      < h2 >
       {this.state.name}
      </h2>
       <div>
       <div>

      <label>Member since: {this.state.created_at}</label>
      </div>
      <div>
       <label>Location: {this.state.location} </label>
       </div>
       <div>
       <label>Email: {this.state.email} </label>
       </div>
       <div>
              <label>Hireable:{this.state.hireable} </label>
              </div>

      </div>
      <ul>
      <li>
      <label>public repos:</label><a href= {this.state.repos_url} > {this.state.public_repos} </a>
      </li>
            <li>
             <label>public Gists:</label> {this.state.public_gists}

      </li>
<li>
             <label>Followers:</label> {this.state.followers}

      </li>
      </ul>
      <div id="bio">
      {this.state.bio}
      </div>
      <hr/>
      </div>
    );
  }
});

var Form = React.createClass({
  handleSubmit:  function(e){
    e.preventDefault();
    var loginInput = React.findDOMNode(this.refs.login);
    if(loginInput.value.length >= 3 ){
     this.props.addCard(loginInput.value);
    }

    loginInput.value ='';

  },
  render: function() {
    return ( <div>
    <form onSubmit={this.handleSubmit}>
    <input placeholder="Github Username" ref = "login"/>
    <button> Search </button>
    </form>
      </div>
    );
  }
});

var Main = React.createClass({
  getInitialState: function(){
    return {logins: ['mithereal']};
  },
  addCard: function(logintoadd){
    this.setState({logins: this.state.logins.concat(logintoadd)});
  },
  render: function() {
    var cards = this.state.logins.map(function(login){
      return (<Card login={login} />);
    });
    return ( <div>
    <Form addCard={this.addCard} />
      {cards}
      </div>
    );
  }
});

React.render( <Main /> , document.getElementById("root"));
	<!DOCTYPE html>
	<html>

	<head>
	<script src="https://code.jquery.com/jquery-2.1.4.js" data-semver="2.1.4" data-require="jquery@*"></script>
	<script data-require="moment.js@*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
	<link rel="stylesheet" href="style.css" />
	</head>

	<body>
	<div id="root"></div>
	<script src="https://fb.me/react-0.14.3.js"></script>
	<script src="https://fb.me/react-dom-0.14.3.js"></script>
	<script src="script.js"></script>
	</body>

	</html>
	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>
	<a href={this.state.html_url} >< img src = {
	this.state.avatar_url
	}
	width = "80" /></a>
	< h2 >
	{this.state.name}
	</h2>
	<div>
	<div>

	<label>Member since: {this.state.created_at}</label>
	</div>
	<div>
	<label>Location: {this.state.location} </label>
	</div>
	<div>
	<label>Email: {this.state.email} </label>
	</div>
	<div>
	<label>Hireable:{this.state.hireable} </label>
	</div>

	</div>
	<ul>
	<li>
	<label>public repos:</label><a href= {this.state.repos_url} > {this.state.public_repos} </a>
	</li>
	<li>
	<label>public Gists:</label> {this.state.public_gists}

	</li>
	<li>
	<label>Followers:</label> {this.state.followers}

	</li>
	</ul>
	<div id="bio">
	{this.state.bio}
	</div>
	<hr/>
	</div>
	);
	}
	});

	var Form = React.createClass({
	handleSubmit: function(e){
	e.preventDefault();
	var loginInput = React.findDOMNode(this.refs.login);
	if(loginInput.value.length >= 3 ){
	this.props.addCard(loginInput.value);
	}

	loginInput.value ='';

	},
	render: function() {
	return ( <div>
	<form onSubmit={this.handleSubmit}>
	<input placeholder="Github Username" ref = "login"/>
	<button> Search </button>
	</form>
	</div>
	);
	}
	});

	var Main = React.createClass({
	getInitialState: function(){
	return {logins: ['mithereal']};
	},
	addCard: function(logintoadd){
	this.setState({logins: this.state.logins.concat(logintoadd)});
	},
	render: function() {
	var cards = this.state.logins.map(function(login){
	return (<Card login={login} />);
	});
	return ( <div>
	<Form addCard={this.addCard} />
	{cards}
	</div>
	);
	}
	});

	React.render( <Main /> , document.getElementById("root"));