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

Space of React

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

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

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

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

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

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

Войти

Урок

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

Активные состояния навигации

Определение активного пункта меню по текущему pathname: создание события, мои события и все события. Для таких проверок часто используют useLocation().pathname и сравнение через === или startsWith(). stackoverflow

client/src/components/app-sidebar/app-sidebar-nav.tsx


const pathname = useLocation().pathname;

const isCreate = pathname === '/events/new'
const isMy = pathname.startsWith('/events/my')
const isAll = 
    pathname === '/events' ||
    (pathname.startsWith('/events/')) &&
         pathname !== '/events/new' &&
          !pathname.startsWith('/events/my')

Инициалы пользователя

Хелпер для получения инициалов из имени пользователя: две буквы для одного слова или первая буква имени и фамилии для нескольких слов. Такой подход часто используют для аватаров без изображения.

client/src/lib/utils.ts


export function getUserInitials(name: string) {
  const parts = name.trim().split(/