Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <script src="https://fb.me/react-15.1.0.js"></script>
    <script src="https://fb.me/react-dom-15.1.0.js"></script>
    
    <div id="app">
    </div>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.3/immutable.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
 
class Main extends React.Component {
    constructor( props ){
        super( props );
        this.state = {
            fetching : false,
            repos : {}
        };
        this.getGitHubRepo = this.getGitHubRepo.bind( this );
    }
    getGitHubRepo( user ){
        this.setState({ fetching : true });
        console.log( "form submitted!", user );
        axios.get( user )
            .then(( response ) => {
                console.log( "response =>", response );
            })
            .catch(( error ) => {
                console.log( "error => ", error );
            });
    }
    render(){
        return(
            <div className = "appContainer">
                <InputForm getGitHubRepo = { this.getGitHubRepo } />
            </div>
        );
    }
}
​
​
​
class InputForm extends React.Component{
    constructor( props ){
        super( props );
        this.state = {
            inputValue : "",
        };
        this.recordInput = this.recordInput.bind( this );
    }
    recordInput( e ){
        this.setState({ inputValue : e.target.value });
    }
    render(){
        let getPath = `https://api.github.com/${this.state.inputValue}`;
        return(
            <form onSubmit = {() => this.props.getGitHubRepo( getPath )}>
                <label htmlFor = "user_input">
                    Github Username
                </label>
                <input id = "user_input"
                         type = "input"
                         onChange = { this.recordInput } />
                <input type = "submit" value = "get repos" />
            </form>
        );
    }
}
​
​
ReactDOM.render( <Main />, document.getElementById( "app" ));
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers