Простой пример приложения React: получение информации о пользователях GitHub через API

Очень простой пример формы, которая принимает имя пользователя GitHub, и как только она получает событие отправить , она запрашивает у API GitHub информацию о пользователе и печатает их.

Этот код создает повторно используемый компонент Card . Когда вы вводите имя в поле ввода , управляемое компонентом Формы , это имя привязывается к его состоянию .

Когда При нажатии кнопки Добавить карточку форма ввода очищается путем очистки Имени пользователя состояния Форма компонент.

В этом примере, в дополнение к React, используется библиотека Axios. Это хорошая полезная и легкая библиотека для обработки сетевых запросов. Добавьте его в настройки пера в Codepen или установите локально с помощью npm install axios .

Выход

Код

Мы начинаем с создания компонента Card , который будет отображать наше изображение и детали, собранные с GitHub. Он получает свои данные через реквизит, используя

• реквизит.аватар_url аватар пользователя
• аватар пользователя имя пользователя

• реквизит.блог URL-адрес веб-сайта пользователя

Мы создаем список этих компонентов, которые будут переданы родительским компонентом в cards реквизите в Список карт , который повторяет его с помощью map() и выводит список карт:

const CardList = props => (
  

    {props.cards.map(card => (
      
    ))}
  
)

Родительским компонентом является приложение, которое хранит массив карты в своем собственном состоянии, управляемом с помощью состояния использования() Крючок:

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

  return (
    

      
    
  )
}

Круто! Теперь у нас должен быть способ запросить у GitHub подробную информацию об одном имени пользователя. Мы сделаем это с помощью компонента Form , где мы управляем нашим собственным состоянием ( имя пользователя ), и мы запрашиваем у GitHub информацию о пользователе, использующем их общедоступные API, через Аксиос :

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

  handleSubmit = event => {
    event.preventDefault()

    axios.get(`https://api.github.com/users/${username}`).then(resp => {
      props.onSubmit(resp.data)
      setUsername('')
    })
  }

  return (
    

       setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      Add card
    
  )
}

Когда форма отправлена, мы вызываем событие handleSubmit , а после сетевого вызова вызываем props.onSubmit передача родительского ( Приложения ) данные, которые мы получили с GitHub.

Мы добавляем его в Приложение , передавая метод добавления новой карты в список карт, добавляем новую карту , как ее onSubmit реквизит:

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

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

  return (
    

      

      
    
  )
}

Наконец мы визуализируем приложение:

ReactDOM.render(, document.getElementById('app'))

Вот полный исходный код нашего маленького приложения React:

const { useState } = React

const Card = props => {
  return (
    

      
      

        
{props.name}
        
{props.blog}
      
    
  )
}

const CardList = props => 
{props.cards.map(card => )}

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

  handleSubmit = event => {
    event.preventDefault()

    axios
      .get(`https://api.github.com/users/${username}`)
      .then(resp => {
        props.onSubmit(resp.data)
        setUsername('')
      })
  }

  return (
    

       setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      Add card
    
  )
}

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

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

  return (
    

      

      
    
  )
}

ReactDOM.render(, document.getElementById('app'))

Проверьте это на Codepen по адресу https://codepen.io/flaviocopes/pen/oJLyeY

Оригинал: “https://flaviocopes.com/react-example-githubusers/”