hw4

[emworks]

Задача

https://github.com/two-devs-teaching/hse-web-programming-2025/tree/main/hw/hw-4-react

Что сделано

Проект полностью переписан на React.

Весь ранее реализованный функционал, включая адаптивную вёрстку, был проверен вручную после рефакторинга.

Демо

https://emworks.github.io/flickmate/feature/hw4/

Чеклист

• Задание: переписать свой веб-проект на React.

Критерии выполненного задания:

• Проект написан полностью на React (то есть нет прямых обращений к DOM, всё реализовано инструментами библиотеки)
• Код разбит на компоненты, компоненты вынесены в отдельные файлы / директории
  • JS-классы, ранее использовавшиеся для отрисовки UI, переделаны в React-компоненты
  • Компоненты вынесены в отдельные файлы и директории
  • Выделены компоненты общего назначения (PageHeader, ContentWrapper и т.д.)
  • Структура папок изменена из MVC в React-like (views->components и т.д.)
• В коде использованы модульные стили
  • *.module.css файлы находятся рядом с компонентами
  • глобальные стили (common.css и др.) сознательно оставлены в css-файлах, т.к. не являются модульными
• В коде использованы хуки (как минимум, useState для сохранения внутреннего состояния)
  • useState для хранения локального состояния (выбранный фильм, сообщения чата, текущее сообщение, открыта ли модалка)
  • useEffect для побочных эффектов (подгрузка фильма, синхронизация с Broadcast Channel и localStorage, автоскролл чата)
  • useRef для работы с DOM-элементами через React (например, <dialog> и скролл чата).
  • Логика работы с браузерными API и рядом других функций вынесена в кастомные хуки-обёртки (useLocalStorage, useMessageChannel, useCurrentUser) для удобного повторного использования

Дополнительно (не было в задании):

• Реализован Single Page Application с клиентским роутингом, т.е. переход между страницами происходит на стороне клиента без перезагрузки (react-router-dom)
• Приложение задеплоено (gh-pages)
  • Ограничение: в текущей реализации с BrowserRouter + GitHub Pages прямой переход по URL или обновление страницы на любом маршруте кроме / приведёт к 404, потому что сервер отдаёт только статические файлы
• Добавлены подробные JS-доки и комментарии

[vsovgir]

• Читаемость и понятность кода. Понятные имена слоев и компонентов, компоненты небольшие и делают одну задачу (MovieList, MovieModal, MovieWatch, Player, Chat, Layout) + хочу отметить комментарии, которые хорошо помогают понять логику.
• Отсутствие ошибок. Если нажать на кнопку "Смотреть вместе", то в консоли появляется ошибка, хотя само видео из Youtube запускается хорошо.

• Модульность и переиспользуемость кода. Работа со слоями (adapters, hooks, services) + Layout переиспользует компоненты.
• Соответствие стандартам форматирования и кодирования
• Соответствие требованиям задания
• • Проект написан полностью на React
• • Код разбит на компоненты, компоненты вынесены в отдельные файлы / директории. Есть components, pages, hooks, и т.д.
• • В коде использованы модульные стили. У каждого компонента есть index.module.css.
• • В коде использованы хуки. useState есть в Home и Watch, а также отдельные хуки в hooks.

[lyaplyap]

Ревью дз по react

Общие комментарии:

• 👍

Итого: 10/10