Created
December 13, 2015 20:47
-
-
Save mithereal/a7d2e23f4e06ef310f94 to your computer and use it in GitHub Desktop.
Search Github Cards via React.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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")); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment