Структура кода компонента в файле.md

Структура кода компонента

Последовательно, согласно нумерации.

\n - перенос строки

import * as React from 'react'
Импорты из сторонних библиотек\n
Локальные импорты по абсолютным путям
Локальные импорты по относительным путям путям\n

При этом каждая группа импортов должна соблюдать внутреннюю последовательность:

Типы

Константы

Функции

Компоненты

Стили

Объявление типов\n
Объявление констант\n
Объявление функций\n
Объявление стилизованных компонентов (styled-components)\n

Следует объявлять от вложенных к верхнеуровневым компонентам, т.к. в последних вложенные компоненты могуть использоваться как селекторы
Объявление и экспорт основного (и единственного) класса компонента с приставкой _raw

_raw - сырой компонент необходим для тестирования

Наполнение компонента:
1. Объявление статических полей static
2. Объявление приватных полей #
3. Объявление свойств state = {}
4. Объявление конструктора (только при необходимости)
5. Объявление методов getState() { return this.state }
6. Объявление методов-обработчиков handleClick = event => {}
  
  но нужно помнить, что они будут транспилированны в начало конструктора
  
  последовательность должна соответствовать сценарию использования, т.е. сначала onChange, потом onSubmit
7. render() {}
Заметка: Пример дополнительных правил для eslint:
```
react/sort-comp:
  - warn
  -
    order:
      - static-methods
      - constructor
      - lifecycle
      - /^(get|set)(?!(InitialState$|State$|DefaultProps$|ChildContext$)).+$/
      - getters
      - setters
      - /^on.+$/
      - /^handle.+$/
      - everything-else
      - /^render.+$/
      - render
```
Объявление и экспорт основного класса компонента без приставки _raw, с присвоением _raw класса, при необходимости, обернутого в HOC.

export const App = connect(mstp)(App_raw)

При этом файл не должен быть более 200 строк. Когда количество строк кода в файле переваливает за 100 - 150 - стоит задуматься о разбиение его на модули.

Стоит избегать использования renderAnything методов, а выносить такие части кода в отдельные компоненты. Это позволит обособить и делигировать часть props и логики, сделав код менее связанным и более понятным.

MaxGraey/Структура кода компонента в файле.md

Структура кода компонента