src/App.js - master - esiart/project1

src/App.js
63 строки2 KB
aleksey
Мой первый коммит
19 фев 2025, 22:40
19 фев 2025, 22:40d20331b
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';  // Импортируем стили

const App = () => {
  const [articles, setArticles] = useState([]);
  const [category, setCategory] = useState('general');
  const [loading, setLoading] = useState(false);

  const apiKey = '62aa3deb44e34b92bf9f7bf6c3ca0f20'; // Ваш API-ключ

  // Функция для получения новостей
  const fetchNews = async () => {
    setLoading(true);
    try {
      const response = await axios.get(`https://newsapi.org/v2/top-headlines?category=${category}&apiKey=${apiKey}`);
      setArticles(response.data.articles);
    } catch (error) {
      console.error('Error fetching news:', error);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchNews();
  }, [category]);

  return (
    <div className="App">
      <header>
        <h1 className="title">Новости по миру</h1>
      </header>

      <nav className="categories">
        <button onClick={() => setCategory('business')} className="category-btn">Бизнес</button>
        <button onClick={() => setCategory('sports')} className="category-btn">Спорт</button>
        <button onClick={() => setCategory('technology')} className="category-btn">Технологии</button>
        <button onClick={() => setCategory('general')} className="category-btn">Общие</button>
      </nav>

      {loading && <p className="loading">Загрузка...</p>}

      <main className="news-list">
        {articles.length > 0 ? (
          articles.map((article, index) => (
            <div key={index} className="news-item">
              <img src={article.urlToImage} alt={article.title} className="news-image" />
              <div className="news-content">
                <h3 className="news-title">{article.title}</h3>
                <p className="news-description">{article.description}</p>
                <a href={article.url} target="_blank" rel="noopener noreferrer" className="news-link">Читать далее</a>
              </div>
            </div>
          ))
        ) : (
          <p className="no-news">Новостей не найдено.</p>
        )}
      </main>
    </div>
  );
};

export default App;