Ví dụ về ứng dụng React đơn giản: tìm nạp thông tin người dùng GitHub qua API

Ví dụ rất đơn giản về biểu mẫu chấp nhận tên người dùng GitHub và khi nó nhận đượcsubmitsự kiện, nó yêu cầu API GitHub cho thông tin người dùng và in chúng.

Ví dụ rất đơn giản về biểu mẫu chấp nhận tên người dùng GitHub và khi nó nhận đượcsubmitsự kiện, nó yêu cầu API GitHub cho thông tin người dùng và in chúng.

Mã này tạo ra mộtThẻthành phần. Khi bạn nhập tên vàoinputlĩnh vực được quản lý bởiHình thứcthành phần, tên này làràng buộc với trạng thái của nó.

Khi nàoThêm thẻđược nhấn, biểu mẫu đầu vào được xóa bằng cách xóauserNametrạng thái củaHình thứcthành phần.

Ngoài React, ví dụ này còn sử dụng thư viện Axios. Đó là một thư viện nhẹ và hữu ích để xử lý các yêu cầu mạng. Thêm nó vào cài đặt Pen trong Codepen hoặc cài đặt cục bộ bằng cách sử dụngnpm install axios.

Đầu ra

The React example output

Chúng tôi bắt đầu bằng cách tạoCard, thành phần sẽ hiển thị hình ảnh và thông tin chi tiết của chúng tôi như được thu thập từ GitHub. Nó lấy dữ liệu của nó thông qua đạo cụ, sử dụng

  • props.avatar_urlhình đại diện của người dùng
  • props.nametên người dùng
  • props.blogURL trang web của người dùng

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

Chúng tôi tạo danh sách các thành phần đó, danh sách này sẽ được chuyển bởi thành phần mẹ trongcardschống đỡCardList, lặp lại trên đó bằng cách sử dụngmap()và xuất ra danh sách các thẻ:

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

Thành phần chính là Ứng dụng, lưu trữcardsmảng ở trạng thái riêng của nó, được quản lý bằng cách sử dụnguseState()Móc:

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

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

Mát mẻ! Bây giờ chúng ta phải có cách để yêu cầu GitHub cung cấp thông tin chi tiết của một tên người dùng. Chúng tôi sẽ làm như vậy bằng cách sử dụngFormthành phần, nơi chúng tôi quản lý trạng thái của chính mình (username) và chúng tôi yêu cầu GitHub cung cấp thông tin về một người dùng sử dụng các API công khai của họ, thông quaAxios:

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

Khi biểu mẫu được gửi, chúng tôi gọihandleSubmitsự kiện và sau cuộc gọi mạng, chúng tôi sẽ gọiprops.onSubmittruyền cha mẹ (App) dữ liệu chúng tôi nhận được từ GitHub.

Chúng tôi thêm nó vàoApp, chuyển một phương thức để thêm một thẻ mới vào danh sách các thẻ,addNewCard, như của nóonSubmitchống đỡ:

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

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

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

Cuối cùng, chúng tôi kết xuất ứng dụng:

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

Đây là mã nguồn đầy đủ của ứng dụng React nhỏ của chúng tôi:

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

Kiểm tra nó trên Codepen tạihttps://codepen.io/flaviocopes/pen/oJLyeY

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: