React
0. Введение
0.1. Термины и определения
0.2. Использованные источники
1. Правила именования файлов
2. Форматирование
3. Использование технологии
3.1. Styled Components
3.1.1. Использовать для обращения к компоненту класс в качестве селектора
Использовать для обращения к компоненту класс в качестве селектора вместо названия тега.
3.1.2. [Не автоматизировано] Выносить определение атрибутов тэга в отдельную константу
Выносить определение атрибутов тэга в отделюную константу для более лучшего форматирования
``typescript jsx // Плохо export const ButtonRoot = styled.button.attrs<Props>({ type: (props: Props) => props.isSubmit && 'submit' })<Props>
padding: 0.44rem 1.72rem; `;
3.2.2. [Не автоматизировано] Правила именования для обработчков
Использовать следующий формат для описания обработчика в комментарии: Handler for <действие> on [что-то] [дополнительное описание]
3.2.3. [Не автоматизировано] Порядок в определении свойств
Использовать следующие приоритеты:
Обязательные свойства
Необязательные свойства
Обязательные свойства с callback
Необязательные свойства с callback
В каждом пункте приоритеризация в зависимости от значимости свойства.
3.3. Template
3.3.1. [Не автоматизировано] Вынесение частей шаблона, которая показывается по условию в отдельную функцию
Если у нас есть условие для отрисовки блока и блок занимает больше одной строки, то его необходимо вынести в отдельную функцию.
```typescript jsx // Плохо
{this.props.children} { hasContent && {this.props.title &&{this.props.title}} {this.props.subtitle &&{this.props.subtitle}}{this.props.description} {this.props.icon &&{this.props.icon}} }
b. Не делать дополнительных переносов внутри фигурных скобок для фрагмента, где выводятся вложенные компоненты.
```typescript jsx // Плохо { this.props.items.map(item => ( )) }
4. Naming convention
4.1. [Non-automated] Naming of connected and non-connected
The main goal we want to achieve using this rule is semantic component names across the project. We mean we want to outline semantic in lieu of technical details of implementation of the component. So we do not want change code-consumer (for instance, some component of screen) if we change technical details inside our component.
4.1.1. [Non-automated] Usual name for component we use in component-consumer
a. If component do not use redux and it is used without redux, we should name it like we usually do, without any additional suffixes and prefixes.
b. If component use redux and it is component we get as the result of redux connect
and use in other components as semantic component, we should name it like we usually do, without any additional suffixes and prefixes.
4.1.2. [Non-automated] Add suffix for connected component
If we use component-container as component in code-consumer, we should name our presentational component (component we wrap with connect
) with suffix Raw
.
4.2. [Non-automated] Do not use plurals in component name
Component name should contain singular words, not plurals.
Last updated