Разработка приложения для отображения списка новостей в React

Для разработки приложения для отображения списка новостей в React мы можем использовать внешний источник данных, такой как API новостей, и создать компоненты для загрузки и отображения новостей. Давайте начнем с создания основного компонента новостей и компонента для загрузки данных из API.

Основной компонент новостей (NewsApp):

import React, { useState, useEffect } from 'react';
import NewsList from './NewsList';

const NewsApp = () => {
  const [news, setNews] = useState([]);
  const [loading, setLoading] = useState(true);

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

  const fetchNews = async () => {
    try {
      const response = await fetch('https://api.example.com/news');
      const data = await response.json();
      setNews(data);
      setLoading(false);
    } catch (error) {
      console.error('Error fetching news:', error);
      setLoading(false);
    }
  };

  return (
    <div>
      <h1>News App</h1>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <NewsList news={news} />
      )}
    </div>
  );
};

export default NewsApp;

Компонент для отображения списка новостей (NewsList):

import React from 'react';

const NewsList = ({ news }) => {
  return (
    <ul>
      {news.map(article => (
        <li key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.description}</p>
          <a href={article.url}>Read more</a>
        </li>
      ))}
    </ul>
  );
};

export default NewsList;

В этом примере мы используем хук useEffect, чтобы загрузить новости из внешнего источника.