Web hw4

[vsovgir]

PR содержит два коммита: первый -- с правками html, css, js после ревью второго дз, второй -- непосредственно переписанный проект на React.

Чек-лист соответствия критериям:

• Проект написан полностью на React. В проекте нет прямых обращений к DOM для рендера элементов, а всё взаимодействие с интерфейсом осуществляется через React-компоненты и хуки.
• Код разбит на компоненты, компоненты вынесены в отдельные файлы / директории. Все элементы интерфейса распределены по отдельным компонентам (Cards, Modal, Intro, Header, Stats, Feedback, ScrollToTopButton), и каждый компонент хранится в своей папке внутри /src/components/.
• В коде использованы модульные стили. Для каждого компонента применяются CSS-модули (ComponentName.module.css).
• В коде использованы хуки. В компонентах, например в Modal.jsx, применяется хук useEffect, который используется для подписки на события клавиатуры и управления жизненным циклом компонента.

Также дополнительно были внесены следующие изменения:

• Убраны кнопки «Подробнее», взамен модальное окно открывается по клику на фото как сотрудника, так и экспоната.
• В модальных окнах были убраны кнопки «Закрыть», вместо них были добавлены крестики в правом верхнем углу окна.
• В блоке Intro была добавлена кнопка «Отзывы» для скролла к разделу «Отзывы».
• Добавлена кнопка скролла наверх.
• В блоке Feedback был улучшен ввод отзыва в поле: при достижении границ формы текст переносится на следующую строку, добавлена опция переноса строки по кнопкам ctrl+enter и отправка отзыва по enter. Сами отзывы теперь также отображаются с переносами, если достигают границ экрана. Дополнительно отзыв можно удалить (добавлен крестик).
• Улучшена адаптивность по сравнению с проектом на hmtl+css+js.

[lyaplyap]

Ревью дз по React

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

• Классно, что при использовании метода map в jsx-разметке не забываем прокидывать проп key во все дочерние компоненты
• В коде остались артефакты бойлерплейта (ассеты и стили vite), в реальном проекте лучше держать кодовую базу максимально чистой
• Некоторую сложную логику лучше вынести в отдельные хуки, так удастся упростить читаемость компонентов

Соответствие критериям

• Проект написан польностью на React (то есть нет прямых обращений к DOM, всё реализовано инструментами библиотеки) [ok]
• Код разбит на компоненты, компоненты вынесены в отдельные файлы / директории [ok]
• В коде использованы модульные стили [ok]
• В коде использованы хуки (как минимум, useState для сохранения внутреннего состояния) [mostly ok]

Итого: 9

[semyonbos]

Читаемость и понятность кода
Хочу отметить использование синтаксиса React и JSX. Компоненты имеют осмысленные названия (Modal, Feedback, Cards), что сразу отражает их назначение. Логика разделена на небольшие функции с четкой ответственностью: управление состоянием через хуки, рендеринг через декларативный JSX. Однако в некоторых местах (например, в Cards.jsx) данные захардкожены внутри компонента, что немного затрудняет их модификацию. В любом случае, код легко воспринимается даже без глубокого знания контекста.

Отсутствие ошибок
В коде отсутствуют критические ошибки, синтаксис корректен, зависимости правильно подключены.

Модульность и переиспользуемость кода
Код демонстрирует отличную модульность: каждый компонент вынесен в отдельный файл, стили изолированы через CSS Modules. Логика данных (например, информация о сотрудниках и экспонатах) вынесена в отдельный файл modalsData.js. Компоненты Cards и Modal спроектированы для переиспользования с разными типами данных. Однако некоторые компоненты (например, Cards) содержат захардкоженные массивы, что снижает их гибкость.

Соответствие стандартам форматирования и кодирования
Код соответствует современным стандартам форматирования: используются ES6+ синтаксис, деструктуризация, стрелочные функции. Настроен ESLint с конфигурацией для React, что обеспечивает соблюдение стиля. Именование переменных и функций следует camelCase, компоненты названы с заглавной буквы. Стили организованы через CSS Modules, что соответствует принятым практикам изоляции стилей в React-приложениях.

Соответствие требованиям задания
Проект полностью соответствует всем критериям задания. Во-первых, он написан полностью на React без прямых DOM-манипуляций. Во-вторых, код разбит на логические компоненты с отдельными файлами. В-третьих, используются модульные стили через CSS Modules. В-четвертых, активно применяются хуки (useState, useEffect, useRef) для управления состоянием и побочными эффектами. Дополнительно реализованы современные практики: доступность, работа с localStorage, плавная прокрутка.