БЭМ

Запуск

npm i
npm start

Приложение построено на базе react-create-app --scripts-version=react-scripts-ts
Верстка разделена на независимые компоненты в папке /Components. Для позиционирования компонентов, используются миксы с классами родителя.

export const Nav: React.SFC<INavProps> = ({ className, ... }) => (
    <ul className={ cnNav(null, [className]) }>
        ...
    </ul>
);

Пакет @bem-react/classname используется в каждом компоненте.
Пакет @bem-react/core замечательно показал себя при выборе компонента для опциональных данных карточки /Components/Card/CardData. В родителе передаю все возможные параметры в , а компонент при помощи композиции и условий определяет какой компонент необходимо рендерить.
Пакет @bem-react/di используется для разделения компонентов Header и Footer по платформам в учебных целях. Пробовал разделить остальные компоненты, это дало отрицательные результаты т.к. стили всех модификаций будут мержится при импорте. Однако, разделение будет иметь смысл при настройке вебпака на сборке бандлов под определенную платформу.

Платформа определяется при помощи пакета device-detector (рекомендовано в лекции) в index.tsx

Есть отличия в верстке по сравнению с базовой версией. Сделано в сторону упрощения, т.к. задание в первую очередь на использование заданных технологий

Отсутствует кнопка Expand ("клювик") на карточках при наведении.
Отсутствует sidebar с навигацией в мобильной версии
Баги отображения иконок на карточках (рекомендуются Blink-браузеры (Chrome, Яндекс))