Show your code Saturday: код-рев’ю #13

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Коментар редакції. Show your code Saturday — це інтерактивна рубрика, у якій кожен охочий може поділитися власним проєктом, написавши про нього в коментарях. А ми натомість щосуботи обираємо найцікавіший і розповідатимемо детальніше.

Сьогодні ми хочемо поділитися з вами роботою користувачи Andrii Yevchenko.

Наш активний учасник спільноти Максим Рудний зробив код-рев’ю проєкту! Тож далі передаємо слово Максиму 👇

Дисклеймер: я не є автором коду і не знаю причин реалізації будь-якої частини коду таким чином, як це є. Стиль написання коду без ознайомлення з Code Style та Code Convention проєкту не можу критикувати, може це так було задумано.

Сьогоднішній проєкт мені дуже сподобався. Нарешті у нас нема NextJS, TypeScript та Tailwind, які уже стали якимось неофіційним стандартом. Проєкт написаний на чистому React + Vite, стилізація — SCSS.

Хоч автор і каже що він початківець, але в коді використовує декілька цікавих React дизайн-патернів, про які зараз і поговоримо.

Патерн Compound Components

Компонент Form побудований за допомогою Compound Components.

Інші компоненти використовують контекст форми наступним чином:

Я б і не згадав про цей патерн, який автор не об’єднав його з іншим патерном.

Namespace Components

Також його ще називають Static Properties Pattern. Його суть полягає в тому, що головний компонент (в цьому випадку FormComponent) експортується разом із підкомпонентами як статичні властивості цього компонента. В коді виглядає це наступним чином:

Про переваги та недоліки я розповідаю у відео.

Стилізація компонентів

Для стилізації використовується SCSS, що є прийнятним варіантом, а от BEM (Block, Element, Modifier) тут уже зайвий. За всі роки роботи з React практично не бачив використання BEM з React, адже він максимально не підходить до компонентної архітектури. Гляньмо на наступний компонент:

import './ControlPanel.scss';

export const ControlPanel = ({ title, children }) => {
  return (
    <div className="control-panel">
      <h2 className="control-panel__title">{title}</h2>
      {children}
    </div>
  );
};

А стилі для цього компоненту виглядають ось так:

.control-panel {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
  margin-bottom: 1rem;
  // border-top: 4px solid #00000030;
  border-bottom: 4px solid #00000030;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  @media screen and (max-width: 430px) {
    gap: 1rem;
    flex-direction: column;
  }
  &__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00000030;
    text-shadow: 3px 3px 15px #00000030;
  }
  &__buttons {
    display: flex;
    gap: 1rem;
    > * {
      font-size: 1.2rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-color: transparent;
      box-shadow: 3px 3px 15px 0px #00000030;
      border-radius: 0.5rem;
      border: 3px solid #00000030;
      padding: 0.5rem;
      color: #00000030;
      &:active {
        transform: translate(1px, 1px);
      }
    }
  }
  &__play {
    color: #fff;
    border: 3px solid #fff;
  }
  &__result {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    background-color: #00000030;
    box-shadow: 3px 3px 15px 0px #00000030;
    border-radius: 0.5rem;
    border: 3px solid transparent;
    padding: 0.5rem 2rem;
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 600;
    @media screen and (max-width: 495px) {
      order: 3;
    }
  }
}

В компоненті у нас є лише 2 класи: control-panel та control-panel__title. Все решта буде в {children}. Ми не маємо ні найменшого явлення, що там має бути. А от стилів у нас описано для безлічі елементів, таких як control-panel__play, control-panel__result, control-panel__buttons. Виходить що стилі є, а елементів — нема.

Якщо у вас є позитивний досвід використання BEM з React — поділіться.

Висновок

Окремо хочу відзначити ReadMe проєкту. Автор постарався все детально і якісно описати. Рідкісне явище на наших оглядах.

Якщо цікавий чи корисний огляд — підписуйтесь на мій YouTube або слідкуйте за спільнотою в Telegram. Там ще більше корисних матеріалів.