Страницы

Эта директория содержит компоненты страниц приложения. Каждая страница представляет собой отдельный маршрут в приложении.

Структура

pages/
├── HomePage.jsx              # Главная страница
├── MediaPage.jsx            # Страница медиа
├── ProfilePage.jsx          # Страница профиля
├── ReviewsPage.jsx          # Страница рецензий
├── SearchPage.jsx           # Страница поиска
├── SettingsPage.jsx         # Страница настроек
└── admin/                   # Административные страницы
    ├── DashboardPage.jsx    # Панель управления
    ├── MediaPage.jsx        # Управление медиа
    ├── UsersPage.jsx        # Управление пользователями
    └── ReviewsPage.jsx      # Управление рецензиями

Описание страниц

HomePage

Главная страница приложения:

Отображает популярный контент
Показывает последние рецензии
Предоставляет быстрый доступ к основным функциям
Включает статистику платформы

MediaPage

Страница с информацией о медиа:

Детальная информация о медиа
Список рецензий
Возможность оставить рецензию
Похожие медиа

ProfilePage

Страница профиля пользователя:

Информация о пользователе
История рецензий
Достижения
Настройки профиля

ReviewsPage

Страница с рецензиями:

Список рецензий
Фильтрация и сортировка
Возможность создания рецензии
Лайки и комментарии

SearchPage

Страница поиска:

Поиск по медиа
Фильтры и категории
Результаты поиска
Быстрый доступ к найденному

SettingsPage

Страница настроек:

Настройки профиля
Настройки приложения
Уведомления
Безопасность

admin/

Административные страницы:

DashboardPage: Общая статистика и управление
MediaPage: Управление медиаконтентом
UsersPage: Управление пользователями
ReviewsPage: Модерация рецензий

Использование

Импортируйте страницу в маршрутизатор:

import HomePage from '../pages/HomePage';

Добавьте маршрут:

<Route path="/" element={<HomePage />} />

Лучшие практики

Разделяйте логику и представление
Используйте контексты для глобального состояния
Реализуйте ленивую загрузку для больших страниц
Обрабатывайте состояния загрузки и ошибок
Оптимизируйте производительность
Следуйте принципам доступности

Пример структуры страницы

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { getMediaById } from '../services/pocketbaseService';

const MediaPage = () => {
  const { id } = useParams();
  const { user } = useAuth();
  const [media, setMedia] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchMedia = async () => {
      try {
        const data = await getMediaById(id);
        setMedia(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchMedia();
  }, [id]);

  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage message={error} />;
  if (!media) return <NotFound />;

  return (
    <div className="container mx-auto px-4 py-8">
      <MediaHeader media={media} />
      <MediaContent media={media} />
      <ReviewsSection mediaId={media.id} />
    </div>
  );
};

export default MediaPage;

4.7 KiB Raw Blame History Unescape Escape