Тестовое задание 3 Jan 2024
hamal - учебный репозиторий про внутренности React, переписанный в интерактивный логбук из 28 образцов
- React 18
- React Router 6
- styled-components
- CRA
- SCSS
- OKLCH
- Responsive
- Accessible
Учебный репозиторий, который был одной неоформленной страницей с десятком React-демок, все в один захардкоженный фиолетовый, с блокирующими alert()-диалогами, багами дубликатов id в тудушках и кнопкой логина, которую хедер никогда не замечал. Переписан и расширен в 'Bench Notes' - 28 живых категоризированных 'образцов' (базовые и concurrent-хуки, паттерны HOC и render-prop, внешний стор, порталы, error boundary, жизненный цикл класса рядом с его useEffect-двойником) на собственной OKLCH-системе в духе лабораторного журнала, с починенными реальными багами и полным проходом по доступности и адаптивности. Ejected Create React App, React 18, styled-components.
Задача
Превратить разросшуюся неоформленную свалку React-демок - один захардкоженный цвет, блокирующие alert-ы, реальные баги состояния и логин, который не доходил до хедера - в цельный, исчерпывающий и по-настоящему интерактивный справочник по React на практике, не отказываясь от стека ejected Create React App.
Подход
Сохранить сборку ejected CRA и React 18, но переписать UI целиком вокруг одного модуля дизайн-системы и фирменной 'карточки-образца', поднять auth в контекст, чтобы общее состояние действительно распространялось, и починить каждый реальный баг (монотонные id тудушек, useRef вместо createRef в рендере, live-region вместо alert(), секундомер без NaN). Затем расширить каталог примерно с одиннадцати демок до двадцати восьми, сгруппированных по категориям, каждая - реально работающая демонстрация, и добавить полный уровень доступности и проход адаптивности от 390 до 1440.
Результат
Bench Notes: 28 категоризированных живых React-образцов на OKLCH-системе светлой/тёмной темы в духе лабораторного журнала (Space Grotesk и JetBrains Mono, нумерованные моноширинные регистрационные шапки, masonry-каталог, scroll-reveal и кастомный favicon), с починенными багами общего состояния и тудушек, реальным уровнем доступности и проходом адаптивности от 390 до 1440. Ejected Create React App, React 18, React Router 6 и styled-components, на собственном сервере Hetzner за Caddy.