React JS: Получение погоды через API

Создание компонентов

Создадим три компонента:

Form.js: Компонент формы для ввода города. Его код аналогичен компоненту Info из предыдущего урока, за исключением названия класса:

class Form extends React.Component {
  render() {
    return (
      <div>
        Компонент с формой
      </div>
    );
  }
}

WeatherInfo.js: Компонент для отображения информации о погоде. Код аналогичен предыдущему, с изменением названия класса:

class WeatherInfo extends React.Component {
  render() {
    return (
      <div>
        Компонент с погодной информацией
      </div>
    );
  }
}

Главный компонент: Объединяет Form и WeatherInfo. Импортируем созданные компоненты и используем их:

// ... импорт компонентов Form и WeatherInfo ...

// ... внутри главного компонента ...
<Form />
<WeatherInfo />

Работа с API OpenWeatherMap

Для получения данных о погоде используем API сервиса OpenWeatherMap ([ссылка на сайт](ссылка заменена на placeholder)). Необходима регистрация и получение API ключа. После регистрации, скопируйте ключ и добавьте его в проект:

const API_KEY = 'YOUR_API_KEY'; // Замените на свой ключ

Пример URL для получения данных о погоде в Киеве:

https://api.openweathermap.org/data/2.5/weather?q=Kyiv&appid=YOUR_API_KEY&units=metric

Замените YOUR_API_KEY на свой ключ и Kyiv на нужный город.

Получение и обработка данных

В компоненте WeatherInfo создадим асинхронный метод getWeather:

getWeather = async () => {
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`; // city - переменная с названием города
  const response = await fetch(apiUrl);
  const data = await response.json();
  console.log(data); // Для проверки
};

Метод использует fetch для запроса к API и response.json() для преобразования ответа в JSON. Вывод данных в консоль — временная мера для проверки. Отображение данных на странице будет рассмотрено в следующем уроке.

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