Необхідно зробити верстку шаблону з figma

Необхідно зробити верстку цього шаблону (https://www.figma.com/file/mtvR5KQGfO6FtSVmLQdU0Z/Paintit-moodboard?type=design&node-id=0%3A1&t=0af8dqwrBiwrC0fY-1). Будемо перевіряти за google page speed і за цими 10 пунктами:

1. Компонентний підхід: Розділяйте програму на маленькі, незалежні компоненти. Кожен компонент повинен бути відповідальним лише за свою власну логіку та уявлення.

2. Одноманітність стилю коду: одноманітність стилю коду у всьому проекті. Використання стандартів та посібників, таких як JavaScript Style Guide та ESLint для автоматичної перевірки та підтримки однаковості.

3. Використання строгого режиму: Вмикаємо строгий режим (strict mode) у програмі React, щоб виявляти потенційні проблеми та попередження під час розробки.

4. Використання функціональних компонентів: Якщо це можливо, використовуйте функціональні компоненти замість класових компонентів. Вони простіші, мають кращу продуктивність і можуть використовувати нові можливості, такі як хуки.

5. Поділ компонентів на файли: Розділіть компоненти на окремі файли, щоб полегшити їх розуміння та повторне використання. Тримайте кожен компонент у окремому файлі з відповідним ім'ям.

6. Пропси (props): Передавайте дані та функції через пропси між компонентами, щоб забезпечити чистоту та передбачуваність потоку даних у вашому додатку.

7. Використання ключів (keys): Під час роботи зі списками компонентів завжди вказуйте унікальний ключ (key) для кожного елемента списку. Це допомагає React оптимізувати оновлення компонентів та покращити продуктивність.

8. Використання чистих функцій: При написанні логіки компонентів намагайтеся створювати чисті функції, які не мають побічних ефектів і повертають однаковий результат для тих самих вхідних даних.

9. Декомпозиція компонентів: Якщо компонент стає занадто складним, розділіть його на кілька дрібніших компонентів. Це допомагає покращити читаність, тестованість та перевикористання коду.

10. Використання PropTypes або TypeScript: Для забезпечення типізації та запобігання помилкам під час розробки рекомендується використовувати PropTypes або TypeScript для перевірки типів пропсів та стану компонентів.

Головне: це код, який легко читається, розуміється та підтримується. Він дотримується принципів модульності, однаковості стилю, поділу відповідальності та ефективної організації компонентів та логіки застосування.