React fetch example

index.html

<div id="app"></app>

react-fetch-example.markdown

React fetch example

A Pen by Fair Weerapat on CodePen.

License.

script.babel

class App extends React.Component {
  
  constructor(props){
    super(props);
    this.state = {
      repos: []
    };
  }
  
  handleSearch = (user) =>{
    let url = 'https://api.github.com/users/'+user+'/repos';
 fetch(url).
  then(response => response.json()).then((repos) => {
      console.log(repos);
      console.log(repos.length);
      this.setState({
        repos: repos
      });
    });
  };
  
  render(){
    return (
      <div className="app-container">
        <h3>React fetch example</h3>
        <SearchBar handleSubmit={this.handleSearch} />
        <RepoList repos={this.state.repos}/>
      </div>
    )
  }
}

class SearchBar extends React.Component {
  constructor(props) {
    super(props);
  }
    
  handleSubmit = (event) => {
    event.preventDefault();
    const text = event.target.text.value;
    this.props.handleSubmit(text);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          name="text"
          className="form-control"
          type="text"
          placeholder="Type github user and press ENTER"
        />
      </form>
    );
  }
}


class RepoList extends React.Component {

  render(){
    var rows = [];
      this.props.repos.map((repo,index) => rows.push(<RepoItem key={index} repo={repo} />))
    return (
      <div className="list-group">
        {rows}
      </div>
    )
  }
}
RepoList.defaultProps = {
  repos: []
};

class RepoItem extends React.Component {
  render(){
    return (
        <a href="#" className="list-group-item list-group-item-action flex-column align-items-start">
    <div className="d-flex w-100 justify-content-between">
      <h5 className="mb-1">{this.props.repo.name}</h5>
      <small>{new Date(Date.parse(this.props.repo.created_at)).toLocaleDateString()}</small>
    </div>
    <p className="mb-1">{this.props.repo.description}</p>
    <small>{this.props.repo.html_url}</small>
  </a>
    )
  }
}

ReactDOM.render(<App/>,document.getElementById('app'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

style.css

body {
  background: #538cb5;	
}
.app-container {
  background: #fff;	
  max-width: 480px;
  margin: 60px auto;
  padding: 40px 25px;
}

h3 {
  color: #538cb5;
}
input {
  margin: 20px 0;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />