Разработка простого интерфейса блога в React

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

Основной компонент блога (BlogApp):

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ArticleList from './ArticleList';
import Article from './Article';

const BlogApp = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    // Загрузка статей с сервера
    fetchArticles();
  }, []);

  const fetchArticles = async () => {
    try {
      const response = await fetch('https://api.example.com/articles');
      const data = await response.json();
      setArticles(data);
    } catch (error) {
      console.error('Error fetching articles:', error);
    }
  };

  return (
    <Router>
      <div>
        <h1>Blog</h1>
        <Switch>
          <Route path="/" exact>
            <ArticleList articles={articles} />
          </Route>
          <Route path="/articles/:id">
            <Article articles={articles} />
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

export default BlogApp;

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

import React from 'react';
import { Link } from 'react-router-dom';

const ArticleList = ({ articles }) => {
  return (
    <ul>
      {articles.map(article => (
        <li key={article.id}>
          <Link to={`/articles/${article.id}`}>{article.title}</Link>
        </li>
      ))}
    </ul>
  );
};

export default ArticleList;

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

import React from 'react';
import { useParams } from 'react-router-dom';

const Article = ({ articles }) => {
  const { id } = useParams();
  const article = articles.find(article => article.id === parseInt(id));

  if (!article) {
    return <p>Article not found</p>;
  }

  return (
    <div>
      <h2>{article.title}</h2>
      <p>{article.content}</p>
    </div>
  );
};

export default Article;

В этом примере мы используем React Router для управления маршрутами приложения. Компонент BlogApp определяет маршруты для списка статей и отдельной статьи. Компонент ArticleList отображает список статей с ссылками на отдельные статьи, а компонент Article отображает содержимое отдельной статьи.