cyberdoge / mercury-test-task-react Goto Github PK

Из ревью ТЗ при отборе на стажировку:

Код гораздо лучше читается, когда он отформатирован в едином стиле: отступы, максимальная длина строки, тип кавычек и т.д.

На своих проектах мы используем инструмент Prettier https://prettier.io/
Попробуй применить этот инструмент в своей работе со стандартной конфигурацией.

Код стоит выделять в компонент не только по признаку того, что он делает (форма авторизации и профиль профиль пользователя). Компонент это "строительный материал" интерфейсов, позволяющий "собирать" экраны приложений в едином стиле.

Иногда набор таких компонентов называют UI Kit. По сути это такой HTML++, который из коробки красивый.

Например, такой код легко читается, но выглядит плохо.
Стандартный внешний вид html элементов очень далек от того, что мы привыкли видеть в веб приложениях

<form>
  <input type="email" placeholder="E-mail" />
  <input type="password" placeholder="Password" />
  <button>Login<button>
</form>

React позволяет нам сделать собственный набор элементов, который не будет уступать в читаемости, но исправит внешний вид:

<Form>
  <Input type="email" placeholder="E-mail" />
  <Input type="password" placeholder="Password" />
  <Button>Login<Button>
</Form>

Компоненты Form, Input и Button — это как раз компоненты, которые можно объединить в UI Kit. С помощью этих же компонентов можно создать, например, форму регистрации и она будет выглядеть в том же стиле.

При создании различных админок для проектов мы часто используем Material UI. Выбирая названия свойств для собственных компонентов или для собственного UI Kit можно ориентироваться на API компонентов Material UI.

https://material-ui.com/ru/components/buttons/

Преимущества компонентного подхода в том, что мы можем рассматривать компонент как отдельный самодостаточный элемент интерфейса. Чтобы этого достичь, стили компонента должны быть обособлены друг от друга. Т.е. стили компонента А должны использоваться явно только внутри компонента А.

В этом хорошо помогает БЭМ. Блок из БЭМа = компоненту в React. Стили компонента следует держать в CSS файле в одной папке с самим компонентом. При это внутри этого CSS файла должны быть только классы, которые относятся к текущему блоку;

Из документации БЭМ:

Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Можно заменить слово "блок" на "компонент" и пользоваться этим правилом. В твоей работе меня смущает название CentralBlock