react-getting-started-github

index.html

<div id="root"></div>

react-getting-started-github.markdown

react-getting-started-github

from tutorial

A Pen by Sia Karamalegos on CodePen.

License.

script.babel

var Card = React.createClass({
  getInitialState: function(){
    return {};
  },
  
  componentDidMount: function(){
    var component = this;
    $.ajax({
      url: "https://api.github.com/users/" + this.props.login,
      method: 'GET',
      success: 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(event){
    event.preventDefault();
    var loginInput = ReactDOM.findDOMNode(this.refs.login);
    this.props.addCard(loginInput.value);
    loginInput.value = '';
  },
  render: function(){
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" placeholder="github username" 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"));

scripts

<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>