一個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

免費下載我的反應手冊


更多反應教程：


在線技術維基！