React 19 Приложение "События"

Space of React

требуется вход

Войдите, чтобы смотреть видео

Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.

Войти Создать аккаунт — бесплатно

Закончили урок?

Войдите, чтобы отмечать прогресс

Войти

Урок

React 19 Приложение "События" — УрокСтраница со всеми событиями — React 19 Приложение "События" | Max Roslow | Space of React

Блок ошибки

Компонент для вывода текста ошибки с возможностью передать дополнительные CSS-классы через className.

client/src/components/error-retry-block.tsx


import { cn } from "@/lib/utils"

type Props = {
    message: string
    className?: string
}

export function ErrorRetryBlock({
    message,
    className
}: Props) {
    return (
        <div className={cn("flex flex-col gap-2", className)}>
            <p className="text-sm text-desctructive">
                { message }
            </p>
        </div>
    )
}

Состояния страницы событий

Условный рендеринг состояний загрузки, ошибки и пустого списка событий. В React для таких случаев обычно разделяют loading, error и empty state отдельно.

client/src/pages/events/all/page.tsx


{ showInitialLoading ? 'Загрузка...' : null }

{
    error ? (
        <ErrorRetryBlock className="mb-4