A simple React application example: Get GitHub user information through API

A very simple example of a form that accepts GitHub usernames, and after receiving GitHub usernamessubmitEvent, it will ask the GitHub API for user information and print it out.

A very simple example of a form that accepts GitHub usernames, and after receiving GitHub usernamessubmitEvent, it will ask the GitHub API for user information and print it out.

This code creates a reusablecardingredient. When you areinputFields managed byformComponent, this name isBound to its state.

WhenAdd cardPress to clear the input box to clear the input form.userNamestatusformingredient.

In addition to React, this example also uses the Axios library. This is a very useful and lightweight library for handling network requests. Add it to Codepen’s "Pen" settings, or usenpm install axios.

Output

The React example output

Code

We first createCardComponent, it will display our images and detailed information collected from GitHub. It gets data through props and uses

  • props.avatar_urlprofile picture
  • props.nameusername
  • props.blogUser website URL

    const Card = props => {
    return (
    <div style={{ margin: '1em' }}>
      <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} />
      <div>
        <div style={{ fontWeight: 'bold' }}>{props.name}</div>
        <div>{props.blog}</div>
      </div>
    </div>
    )
    }
    

We have created a list of these components, these lists will be in the parent componentcardsstand byCardList, Iterate usingmap()And output a list of cards:

const CardList = props => (
  <div>
    {props.cards.map(card => (
      <Card {...card} />
    ))}
  </div>
)

The parent component is App, it storescardsThe array is used in its own stateuseState()hook:

const App = () => {
  const [cards, setCards] = useState([])

return ( <div> <CardList cards={cards} /> </div> ) }

Cool! We must now have a way to ask GitHub for the details of a single username. We will useFormComponents in which we manage our state (username) And ask GitHub to provide information about users using its public API in the following ways:Axios:

const Form = props => {
  const [username, setUsername] = useState('')

handleSubmit = event => { event.preventDefault()

<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">`https://api.github.com/users/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">username</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>).<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">resp</span> =&gt; {
  <span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">onSubmit</span>(<span style="color:#a6e22e">resp</span>.<span style="color:#a6e22e">data</span>)
  <span style="color:#a6e22e">setUsername</span>(<span style="color:#e6db74">''</span>)
})

}

return ( <form onSubmit={handleSubmit}> <input type=“text” value={username} onChange={event => setUsername(event.target.value)} placeholder=“GitHub username” required /> <button type=“submit”>Add card</button> </form> ) }

After submitting the form, we willhandleSubmitEvent, after the network call, we callprops.onSubmitThrough parents (App) The data we got from GitHub.

We add it toApp, Pass a method to add a new card to the card list,addNewCard, Just like itonSubmitpillar:

const App = () => {
  const [cards, setCards] = useState([])

addNewCard = cardInfo => { setCards(cards.concat(cardInfo)) }

return ( <div> <Form onSubmit={addNewCard} /> <CardList cards={cards} /> </div> ) }

Finally, we render the application:

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

This is the complete source code of our little React application:

const { useState } = React

const Card = props => { return ( <div style={{ margin: ‘1em’ }}> <img alt=“avatar” style={{ width: ‘70px’ }} src={props.avatar_url} /> <div> <div style={{ fontWeight: ‘bold’ }}>{props.name}</div> <div>{props.blog}</div> </div> </div> ) }

const CardList = props => <div>{props.cards.map(card => <Card {…card} />)}</div>

const Form = props => { const [username, setUsername] = useState(’’)

handleSubmit = event => { event.preventDefault()

<span style="color:#a6e22e">axios</span>
  .<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">`https://api.github.com/users/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">username</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>)
  .<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">resp</span> =&gt; {
    <span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">onSubmit</span>(<span style="color:#a6e22e">resp</span>.<span style="color:#a6e22e">data</span>)
    <span style="color:#a6e22e">setUsername</span>(<span style="color:#e6db74">''</span>)
  })

}

return ( <form onSubmit={handleSubmit}> <input type=“text” value={username} onChange={event => setUsername(event.target.value)} placeholder=“GitHub username” required /> <button type=“submit”>Add card</button> </form> ) }

const App = () => { const [cards, setCards] = useState([])

addNewCard = cardInfo => { setCards(cards.concat(cardInfo)) }

return ( <div> <Form onSubmit={addNewCard} /> <CardList cards={cards} /> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

View on Codepenhttps://codepen.io/flaviocopes/pen/oJLyeY

Download mine for freeResponse Handbook


More response tutorials: