Возвращение к основам: Получение данных в React

С возвращением, друзья!

В этой статье мы рассмотрим одну из основ работы с React.

Это получение данных из внешнего источника и использование их в нашем приложении.

С учетом сказанного, давайте приступим к делу!

Настройка сцены

Предположим, что наша задача — получить данные из внешнего API и отобразить их на странице. Мы будем делать это, используя только React и встроенные функции JavaScript. Никаких внешних библиотек не потребуется.

Вы можете спросить, зачем это делать, ведь существуют утилиты, которые могут ускорить этот процесс.

Причина двоякая. Во-первых, чаще всего мы становимся слишком зависимыми от абстракций, которые не позволяют нам увидеть, как все работает в целом. Во-вторых, для целей этой статьи мы будем использовать только то, что предоставляет нам ванильный JS.

Кроме того, возвращение к основам всегда полезно, когда мы хотим углубить наши знания и лучше понять то, что, как нам кажется, мы знаем.

Теперь перейдем к деталям.

Получение данных

Мы собираемся получить данные из API и представить их на странице. Первое, что нам нужно, — это конечная точка API, к которой мы можем обратиться.

Что мы можем использовать, чего мы не использовали раньше?

Хм…

Как насчет того, чтобы использовать API Рика и Морти?

Мы получим данные о персонажах и это то, что мы собираемся отобразить на странице.

Если вы прочитаете документацию, то обнаружите, что конечная точка, которую мы ищем, имеет такой вид.

Если мы сделаем GET-запрос, то получим объект с некоторыми метаданными и ожидаемыми нами данными о символах.

Что-то вроде этого…

Итак, массив результатов — это то, что нас в основном интересует. Именно его мы и сохраним в качестве данных для отображения на странице.

Теперь давайте создадим функцию, из которой мы будем получать эти данные. Для этого мы будем использовать Fetch API (помните, что внешние библиотеки не нужны).

Теперь у нас будет что-то вроде этого:

function getRickAndMortyData() {
  const apiUrl = `https://rickandmortyapi.com/api/character`;

  fetch(apiUrl)
    .then(res => res.json())
    .then(data => {
        console.log(data.results)
    })
    .catch(error => console.error("The error was:" + error))

}
Вход в полноэкранный режим Выход из полноэкранного режима

Это работает как основа для получения данных из API. Теперь мы хотим получить эти данные и отобразить их на странице. Здесь нам на помощь приходит React.

Отображение данных

Сначала мы создадим разметку для страницы.

У нас будет заголовок и раздел, в котором будут отображаться данные о персонажах.

Для начала что-то вроде этого.

<header>
  <h1>Rick and Morty characters
</header>
<main>
  <ul>
    <li>Rick</li>
    <li>Morty</li>
    <!-- ...more characters -->
  </ul>
</main>
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь мы улучшим нашу предыдущую функцию с помощью некоторых возможностей React. Например, при вызове API мы сохраним результаты в состоянии, чтобы использовать их в случае необходимости.

Если вы давно используете React, то помните, что раньше у нас были компоненты Class, в которых мы задавали начальное состояние, а затем выполняли вызовы API в функции componentDidMount.

Но с введением хуков нам больше не нужно использовать эти компоненты класса. Функция getRickAndMortyData теперь может оставаться обычной функцией.

Единственные изменения, которые нам понадобятся, это введение хуков для установки состояния и обработки вызовов API. Поэтому мы изменим ее соответствующим образом.

function getRickAndMortyData() {
  const [info, setInfo] = React.useState({ 
    characters: [] 
  });

  const apiUrl = `https://rickandmortyapi.com/api/character`;

  React.useEffect(() => {
    fetch(apiUrl)
      .then(res => res.json())
      .then(data => {
        setInfo({ characters: data.results })
      })
      .catch(error => console.error("The error was:" + error))
  }, []);

  return info;
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Далее мы возьмем текущую разметку и улучшим ее с помощью создания компонентов. Один для заголовка, другой для символов.

Первый — компонент Header, который может выглядеть примерно так.

function Header() {
  return (
    <header>
      <h1>Rick and Morty characters</h1>
    </header>
  )
}
Войти в полноэкранный режим Выход из полноэкранного режима

Затем компонент Characters, который будет перечислять символы, полученные от API.

function Characters({ characters }) {
  return (
    <ul>
      {characters.map((character) => (
        <li key={character.id}>
          <img src={character.image}            
               alt="character picture" />
          <label>{character.name}</label>
        </li>
      ))}
    </ul>
  )
}
Вход в полноэкранный режим Выход из полноэкранного режима

После этого нам остается только использовать их в разметке, передавая нужные данные, которые будут отображаться.

Таким образом, компонент App будет выглядеть следующим образом.

function App() {
  const data = getRickAndMortyData();

  return (
    <>
      <Header />
      <main>
        <Characters characters={data.characters} />
      </main>
    </>  
  )
}
Вход в полноэкранный режим Выход из полноэкранного режима

Собираем все вместе

Установив все эти компоненты на место, вы увидите, что символы теперь отображаются в виде списка, в котором их сначала всего 20.

Если вы посмотрите документацию, то увидите, что ответ от API уже приходит постранично.

В объекте info, содержащем метаданные, есть информация о количестве страниц и ссылки на следующую и предыдущую страницы (если они существуют).

Зная это, не составит труда реализовать кнопку «следующая страница», которая выведет следующие 20 символов в списке.

Хотя, это то, что вы можете реализовать в качестве дополнительного задания для этого конкретного упражнения. Мы не будем расширять эту статью реализацией этой функциональности.

Завершение

Оформление этого упражнения зависит от вас, вы можете сделать его таким, как вам нравится.

Лично я сделал его очень минималистичным с помощью этих нескольких строк CSS.

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

ul {
  list-style-type: none;
}

li {
  display: flex;
  flex-direction: column;
}

li img {
  height: 130px;
  width: 130px;
  align-self: center;
}

li label {
  margin-bottom: 1rem;
  font-size: 18px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

А вот codepen с рабочей версией этого приложения.

Вот и все. Простое приложение React, которое получает некоторые данные из внешнего API, а затем отображает их на странице. Никаких других библиотек не требуется. Просто ванильный JavaScript.

«Смотрите, мама, никаких библиотек!»


Вот и все для этой статьи. Большое спасибо за прочтение. Надеюсь, она была достаточно информативной и понятной для вас.
Если у вас есть вопросы или предложения по этой статье. Присылайте их мне!

Берегите себя и до встречи в следующей статье.

Оцените статью
Procodings.ru
Добавить комментарий