Прогноз погоды с помощью React JS

Для начала запустите следующий код в своем терминале

$ create-react-app weather_app

После этого запустите следующие две строки в своем терминале:

$ cd weather_app

$ npm start

Это позволит вам увидеть обновление вашего приложения React в реальном времени на локальном сервере.

Затем откройте свой проект и удалите содержимое по умолчанию, с которым поставляется App.js.

Вот структура папок.

Я использую OpenWeatherMap API для данных о погоде, Semantic UI React и Значки погоды для значков.

По умолчанию мы будем показывать прогноз текущего местоположения. Чтобы получить текущее местоположение

Этот API предоставит вам широту, долготу, страну, город текущего местоположения.

Теперь, когда у вас есть местоположение, нам нужно получить информацию о погоде.

Для этого я использовал OpenWeatheropeAPI. Я проведу вас через этапы получения ключа API и использования API.

2. Перейдите на https://home.openweathermap.org/api_keys и получите api_key.

OpenWeatherapi предоставляет множество услуг.

1 . Нам нужен прогноз на сегодня и ближайшие 7 дней.

2. Нам нужна температура следующих 24 часов.

Существует API, который предоставит оба ONE-CAll-API.

const url = `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&appid=${api_key}`

мы получим ежедневные данные за 8 дней и почасовые данные за следующие 48 часов.