一個React簡單的應用示例:通過API獲取GitHub用戶信息

表單的非常簡單的示例,該表單接受GitHub用戶名,並在收到GitHub用戶名後submit事件,它會向GitHub API詢問用戶信息,並打印出來。

表單的非常簡單的示例,該表單接受GitHub用戶名,並在收到GitHub用戶名後submit事件,它會向GitHub API詢問用戶信息,並打印出來。

這段代碼創建了可重用的卡片成分。當您在input由...管理的字段形式組件,此名稱是綁定到其狀態

什麼時候新增卡按下,清除輸入框清除輸入形式。userName的狀態形式成分。

該示例除了使用React之外,還使用了Axios庫。這是一個很好的有用且輕量級的庫,用於處理網絡請求。將其添加到Codepen的“筆”設置中,或使用npm install axios

輸出

The React example output

代碼

我們首先創建Card組件,它將顯示從GitHub收集的我們的圖像和詳細信息。它通過道具獲取數據,使用

  • props.avatar_url用戶頭像
  • props.name用戶名
  • props.blog用戶網站網址

    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>
    )
    }
    

我們創建了這些組件的列表,這些列表將由父組件在cards支持CardList,使用對其進行迭代map()並輸出一張卡片清單:

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

父組件是App,它存儲cards陣列以自己的狀態使用useState()鉤:

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

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

涼爽的!我們現在必須有一種方法可以向GitHub詢問單個用戶名的詳細信息。我們將使用Form組件,我們在其中管理自己的狀態(username),並通過以下方式要求GitHub提供有關使用其公共API的用戶的信息: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> ) }

提交表單後,我們將handleSubmit事件,在網絡通話後,我們致電props.onSubmit通過父母(App)我們從GitHub獲得的數據。

我們將其添加到App,傳遞一種將新卡添加到卡列表的方法,addNewCard, 就像它一樣onSubmit支柱:

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'))

這是我們的小React應用程序的完整源代碼:

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’))

在Codepen上查看https://codepen.io/flaviocopes/pen/oJLyeY

免費下載我的反應手冊


更多反應教程: