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

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

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

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

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

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

1. Типы
2. Константы
3. Функции
4. Компоненты
5. Стили

4. Объявление типов\n

5. Объявление констант\n

6. Объявление функций\n

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

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

8. Объявление и экспорт основного (и единственного) класса компонента с приставкой _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

9. Объявление и экспорт основного класса компонента без приставки _raw, с присвоением _raw класса, при необходимости, обернутого в HOC.

   export const App = connect(mstp)(App_raw)

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

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