Интеграцию API в проект React можно легко осуществить, достигнув простой структуры проекта. Давайте посмотрим, как интегрировать API в проект React.

Мы будем создавать приложение для отображения текущих курсов и конвертера валют с использованием Frankfurter API https://www.frankfurter.app/.

Вы можете использовать любой API, я нашел этот в списке здесь: GitHub — public-apis/public-apis: общий список бесплатных API для использования

Давайте начнем с настройки проекта с помощью create-react-app.

Это инициализирует новое приложение React с именем forex-app, запустит локальный сервер разработки на порту 3000 и откроет URL-адрес http://localhost:3000 в браузере по умолчанию.

Мы будем использовать следующий дизайн для нашего пользовательского интерфейса: (многие его части)
Mobile App Foreign Currency Rates and Convertor by Tim on Dribbble

Дизайн предлагает использовать флаги стран для символов валюты.

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

Структура ответа API для Rates выглядит следующим образом:

Для приведенного выше ответа следующий компонент React отобразит ставки:

И помимо списка, нам понадобится компонент для выбора предпочитаемой валюты и установки базовой суммы для конвертации. За это будет отвечать следующий компонент:

Давайте попробуем собрать вышеупомянутые компоненты с некоторыми фиктивными данными:

Теперь, чтобы получить ставки из API, мы будем использовать выборку, и следующая функция будет обрабатывать все запросы GET:

Со всеми необходимыми частями мы интегрируем вызов API с функцией getData в компоненте App со следующей функцией, и он будет связан для обновления состояния в компоненте:

И мы будем использовать хук React useEffect для выполнения начального вызова выборки:

Это вызовет API для ставок с выборкой при первом вызове. Но мы хотим получить ставки для любого изменения валюты.

Поскольку мы уже обновляем состояние в обработчике изменений select, нам просто нужно это сделать; валюта от государства; зависимость useEffect.

Таким образом, любые изменения в зависимости вызовут повторное выполнение хука useEffect. Следующий код сделает это:

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

Вы можете поиграть с кодом и демоверсией по следующим ссылкам:

Репозиторий Github

Демо

Вывод

Здесь мы увидели следующее:

  • Запуск приложения React с помощью приложения create-реагировать
  • Использование хуков для поддержания состояния с помощью useState
  • Использование fetch в проекте React
  • useEffect для реагирования на изменения состояния и выполнения запросов к API

Как вы вызываете API в своем проекте React?

Дайте мне знать в комментариях 💬 или в Твиттере на @patelpankaj и @time2hack

Если вы нашли эту статью полезной, пожалуйста, поделитесь ею с другими 🗣

Подпишитесь на блог, чтобы получать новые статьи прямо на почту.

Кредиты

Первоначально опубликовано на https://time2hack.com 11 мая 2020 г.