### 3.2. Props
#### 3.2.1. Обработчики по умолчанию
Использовать обработчик по умолчанию в `defaultProps` вместо проверки
существования обработчика:
```typescript
// Плохо
private onBurgerBtnClicked(): void {
if (this.props.onBurgerBtnClicked) {
this.props.onBurgerBtnClicked();
}
}
// Хорошо
static defaultProps = {
onBurgerBtnClicked: () => {}
};
3.2.2. [Не автоматизировано] Правила именования для обработчков
Использовать следующий формат для описания обработчика в комментарии: Handler for <действие> on [что-то] [дополнительное описание]
// Плохо/** * Callback is invoked when user presses burger button. */ onBurgerBtnClick?: () =>void;/** * Invoked after user presses burger button. */ onBurgerBtnClick?: () =>void;// Хорошо/** * Handler for click on burger button. */ onBurgerBtnClick?: () =>void;
3.2.3. [Не автоматизировано] Порядок в определении свойств
Использовать следующие приоритеты:
Обязательные свойства
Необязательные свойства
Обязательные свойства с callback
Необязательные свойства с callback
В каждом пункте приоритеризация в зависимости от значимости свойства.
#### 3.3.2. \[Не автоматизировано\] Для jsx использовать общие правила оформления шаблонов
Если правило явно не переопределяется специальным правилом для оформления шаблонов (jsx)
в react-приложении, то использовать [общие правила оформления шаблонов](templates.md).
#### 3.3.3. \[Не автоматизировано\] Списки
a. Не выносить список в отдельную функцию или компонент, если компонент условно небольшой.
В качестве ориентира для "небольшой" использовать те же критерии, что для декомпозиции
любого фрагмента кода.
```typescript jsx
// Плохо
class Component {
render() {
return (
<CardListRoot>{this.getCards()}</CardListRoot>
)
}
private getCards(): ReactNode[] {
return this.props.items.map(item => (
<CardContainer key={item.title}>
<Card {...item} onEdit={this.props.onCardEdit} onAction={this.props.onAction}/>
</CardContainer>
));
}
}
// Хорошо
class Component {
render() {
return (
<CardListRoot>
{this.props.items.map(item => (
<CardContainer key={item.title}>
<Card {...item} onEdit={this.props.onCardEdit} onAction={this.props.onAction}/>
</CardContainer>
))}
</CardListRoot>
)
}
}
b. Не делать дополнительных переносов внутри фигурных скобок для фрагмента, где выводятся вложенные компоненты.
```typescript jsx // Плохо { this.props.items.map(item => ( )) }
### 3.4. Redux
### 3.4.1. \[Automated: prefer-separate-component-file\] Put redux `connect`, `mapStateToProps` and `mapDispatchToProps` into separate file
We should put container-component and related functions (`mapStateToProps` and `mapDispatchToProps`)
in separate file to separate view logic and logic that prepare data (props) for view.
Also we can test view and logic separately.
```typescript
// Bad
// result-check.ts
const mapStateToProps = (state, ownProps) => {
//...
};
const mapDispatchToProps = dispatch => ({
// ...
});
class ResultCheckRaw extends PureComponent {
// ...
}
export const ResultCheck = connect(mapStateToProps, mapDispatchToProps)(ResultCheckRaw);
// Good
// result-check.presentation.ts
export class ResultCheckRaw extends PureComponent {
// ...
}
// result-check.container.ts
import {ResultCheckRaw} from '../presentation';
const mapStateToProps = (state, ownProps) => {
//...
};
const mapDispatchToProps = dispatch => ({
// ...
});
export const ResultCheck = connect(mapStateToProps, mapDispatchToProps)(ResultCheckRaw);
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.
