Требования по написанию и организации кода в тестовом задании

Организация кода:

• писать код максимально читаемым и понятным, соблюдая принципы: KISS, YAGNI;
• выносить повторяющиеся части кода в отдельные функции, соблюдая принцип DRY;
• соблюдать принципы SOLID, для того, чтобы программный код был более чистым и гибким;
• избегать инлайн функций (это функция, объявленная непосредственно в коде JSX компонента, она обычно используется в качестве обработчика событий или для передачи - данных из родительского компонента в дочерний), т.к могут возникнуть проблемы с читаемостью, расширяемостью и оптимизацией компонентов и функций;
• давать понятные имена функциям и переменным, для того, чтобы код был более понятным и читаемым для других разработчиков и для вас в будущем;
• деструктуризировать код (извлекать значения из объекта или массива в отдельные переменные), для упрощения передачи props в компоненты, уменьшения объема кода;
• избегать написания громоздких компонентов, разделять функционал на модули, т.к это упростит понимание и переиспользование кода;
• использовать чистые функции внутри компонента;
• не оставлять закомментированный код, в случае, если нужно что-то запомнить, можно создать документ с примерами кода, также не оставлять console.log;
• стрелочный вид функций является более предпочтительным, т.к такая запись обладает более удобным и компактным синтаксисом;
• избегать props drilling (передача props через большое количество компонентов вниз по дереву), в таком случае можно воспользоваться Context Api или стейт менеджерами, но для небольших проектов может быть избыточно;
• использовать оптимизацию для улучшения производительности и увеличения скорости работы программы;
• избегать использования index в качестве ключа при рендеринге компонентов, стоит использовать уникальные идентификаторы для каждого элемента списка;
• для переиспользования логики, можно использовать пользовательские хуки, компоненты высшего порядка, render-props;
• для предотвращения рендеринга компонентов использовать null;
• для условного рендеринга компонентов можно использовать логический оператор &&;
• все пакеты должны быть правильно установлены: dependencies, devDependencies, peerDependencies;
• придерживаться единого стиля написания во всем приложении;
• подключить в конфигурации eslint пакет airnbnb;
• соблюдать порядок импортов, для этого подключить eslint-plugin-simple-import-sort.

Организация процесса:

• тестовое задание необходимо разделить на задачи и занести их в ClickUp;
• необходимо использовать для реализации приложения концепцию git-flow;
• подключить Conventional Commits и подключить pre-commit.

Требования к стилям:

• выносить стили в отдельные файлы (в таком коде будет проще разобраться и внести правки. Для каждого компонента должна быть своя папка со стилями);
• оптимизация изображений (это поможет уменьшить их вес и увеличит скорость загрузки сайта);
• использовать styled-components или препроцессоры (это позволит расширить функционал CSS, что упростит написание кода);
• не использовать инлайн стили (такие стили сложнее поддерживать и почти невозможно переопределить);
• не использовать !important (так код будет сложнее поддерживать);
• использовать общую тему для стилей, где будут вынесены значения: width, height, padding, color, font-size, font-family, font-weight, z-index, border-radius(объект со стилями должен передаваться в ThemeProvider);
• придерживаться одних единиц измерения для padding, width, height и т.д;
• придерживаться одного стиля написания цветов(HEX или RGBA).