Интеграцию 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
вместе с обработчиками изменений для обновления суммы в состоянии:
Вы можете поиграть с кодом и демоверсией по следующим ссылкам:
Вывод
Здесь мы увидели следующее:
- Запуск приложения React с помощью приложения create-реагировать
- Использование хуков для поддержания состояния с помощью
useState
- Использование
fetch
в проекте React useEffect
для реагирования на изменения состояния и выполнения запросов к API
Как вы вызываете API в своем проекте React?
Дайте мне знать в комментариях 💬 или в Твиттере на @patelpankaj и @time2hack
Если вы нашли эту статью полезной, пожалуйста, поделитесь ею с другими 🗣
Подпишитесь на блог, чтобы получать новые статьи прямо на почту.
Кредиты
- Фото Ferenc Almasi на Unsplash
- Иконки из Icon8 через Lunacy
Первоначально опубликовано на https://time2hack.com 11 мая 2020 г.