Un ejemplo de aplicación simple de React: obtenga información de los usuarios de GitHub a través de la API

Ejemplo muy simple de un formulario que acepta un nombre de usuario de GitHub y una vez que recibe unsubmitevento, solicita a la API de GitHub la información del usuario y la imprime.

Ejemplo muy simple de un formulario que acepta un nombre de usuario de GitHub y una vez que recibe unsubmitevento, solicita a la API de GitHub la información del usuario y la imprime.

Este código crea un reutilizableTarjetacomponente. Cuando ingresa un nombre en elinputcampo gestionado por elFormulariocomponente, este nombre esligado a su estado.

CuandoAgregar tarjetase pulsa, el formulario de entrada se borra borrando eluserNameestado deFormulariocomponente.

El ejemplo utiliza, además de React, la biblioteca Axios. Es una biblioteca agradable, útil y liviana para manejar solicitudes de red. Agréguelo a la configuración del Pen en Codepen, o instálelo localmente usandonpm install axios.

Producción

The React example output

Código

Empezamos creando elCardcomponente, el que mostrará nuestra imagen y detalles tal como se recopilaron de GitHub. Obtiene sus datos a través de accesorios, usando

  • props.avatar_urlel avatar del usuario
  • props.nameel nombre de usuario
  • props.blogla URL del sitio web del usuario

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

Creamos una lista de esos componentes, que serán pasados por un componente padre en elcardsapoyo aCardList, que itera sobre él usandomap()y genera una lista de tarjetas:

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

El componente principal es la aplicación, que almacena elcardsmatriz en su propio estado, gestionada mediante eluseState()Gancho:

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

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

¡Fresco! Debemos tener una forma ahora de pedirle a GitHub los detalles de un solo nombre de usuario. Lo haremos usando unFormcomponente, donde gestionamos nuestro propio estado (username), y le pedimos a GitHub información sobre un usuario que usa sus API públicas, a través deAxios:

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

Cuando se envía el formulario, llamamos alhandleSubmitevento, y después de la llamada de la red llamamosprops.onSubmitpasando al padreApp) los datos que obtuvimos de GitHub.

Lo agregamos aApp, pasando un método para agregar una nueva tarjeta a la lista de tarjetas,addNewCard, como suonSubmitapuntalar:

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

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

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

Finalmente renderizamos la aplicación:

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

Aquí está el código fuente completo de nuestra pequeña aplicación 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’))

Compruébalo en Codepen enhttps://codepen.io/flaviocopes/pen/oJLyeY

Descarga mi gratisReact Handbook


Más tutoriales de react: