Примеры использования API в реальных приложениях

Использование API в приложениях ReactJS позволяет обмениваться данными с сервером и сторонними сервисами, улучшая функциональность и динамичность вашего приложения. В этой статье мы рассмотрим несколько примеров использования API в реальных ReactJS-приложениях.

Приложение для поиска погоды

Приложение для поиска погоды может использовать сторонний API, такой как OpenWeatherMap, для получения информации о погоде в определенном городе. Вот пример компонента для отображения погоды с использованием Axios:

import React, { useState } from 'react';
import axios from 'axios';

function WeatherSearch() {
  const [city, setCity] = useState('');
  const [weather, setWeather] = useState(null);

  const fetchWeather = async () => {
    const response = await axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`
    );
    setWeather(response.data);
  };

  return (
    <div>
      <input
        type="text"
        value={city}
        onChange={(e) => setCity(e.target.value)}
      />
      <button onClick={fetchWeather}>Поиск</button>
      {weather && (
        <div>
          <h3>{weather.name}</h3>
          <p>Температура: {Math.round(weather.main.temp - 273.15)}°C</p>
        </div>
      )}
    </div>
  );
}

export default WeatherSearch;

Приложение для просмотра новостей

Для создания приложения для просмотра новостей вы можете использовать API, такой как News API, чтобы получать актуальные новости по различным темам. Пример компонента для отображения списка новостей:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function NewsList() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    const fetchNews = async () => {
      const response = await axios.get(
        `https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY`
      );
      setArticles(response.data.articles);
    };

    fetchNews();
  }, []);

  return (
    <div>
      {articles.map((article, index) => (
        <div key={index}>
          <h3>{article.title}</h3>
          <p>{article.description}</p>
          <a href={article.url}>Читать далее</a>
        </div>
      ))}
    </div>
  );
}

export default NewsList;

Приложение для поиска фильмов

Приложение для поиска фильмов может использовать API, такой как The Movie Database (TMDb) API, для получения информации о фильмах, актерах и других сведений. Вот пример компонента для поиска и отображения списка фильмов с использованием Axios:

import React, { useState } from 'react';
import axios from 'axios';

function MovieSearch() {
  const [query, setQuery] = useState('');
  const [movies, setMovies] = useState([]);

  const searchMovies = async () => {
    const response = await axios.get(
      `https://api.themoviedb.org/3/search/movie?api_key=YOUR_API_KEY&query=${query}`
    );
    setMovies(response.data.results);
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <button onClick={searchMovies}>Поиск</button>
      <div>
        {movies.map((movie) => (
          <div key={movie.id}>
            <h3>{movie.title}</h3>
            <p>Рейтинг: {movie.vote_average}</p>
            <p>Дата выпуска: {movie.release_date}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default MovieSearch;

В данном примере мы создаем компонент MovieSearch, который позволяет пользователю вводить запрос и выполнять поиск фильмов с использованием TMDb API. При успешном получении ответа от сервера, мы отображаем список найденных фильмов с их названиями, рейтингами и датами выпуска.

Приложение для отслеживания криптовалют

Приложение для отслеживания криптовалют может использовать API, такой как CoinGecko API, для получения информации о курсах криптовалют, их рыночной капитализации и других сведений. Вот пример компонента для отображения списка популярных криптовалют с использованием Axios:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function CryptoTracker() {
  const [coins, setCoins] = useState([]);

  useEffect(() => {
    const fetchCoins = async () => {
      const response = await axios.get(
        'https://api.coingecko.com/api/v3/search/trending'
      );
      setCoins(response.data.coins);
    };

    fetchCoins();
  }, []);

  return (
    <div>
      <h2>Топ популярных криптовалют:</h2>
      {coins.map((coin) => (
        <div key={coin.item.id}>
          <h3>{coin.item.name} ({coin.item.symbol.toUpperCase()})</h3>
          <p>Текущая цена: ${coin.item.market_data.current_price.usd.toFixed(2)}</p>
          <p>Рыночная капитализация: ${coin.item.market_data.market_cap.usd.toLocaleString()}</p>
        </div>
      ))}
    </div>
  );
}

export default CryptoTracker;

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

Добавить комментарий

Back to top button