Как писать понятный код на React: 9 советов

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

В этой статье я собрал некоторые советы, которые помогут писать более понятный код. Советы касаются разработки с использованием React, тем не менее, советы применимы и к другим библиотекам.

1 Определяйте пропсы компонента

prop-types используется для проверки типов в режиме реального времени. Если в компонент передаются пропсы неверного типа (например, вместо числа передаётся строка) или не передаются обязательные пропсы, в консоли браузера появится предупреждение.

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

2 Используйте displayName

Строковое свойство displayName используется для отладки.

Обычно, если для отладки используется React developer tools, в дереве будут отображаться компоненты с именами, которые зависят от имени класса.

Но если в проекте используются разные компоненты с одинаковыми именами, будет полезно использовать displayName.

3 Настройте линтер

Линтер позволяет избежать типовых ошибок и помогает поддерживать единый стиль программирования в рамках одного проекта.

4 Ревью собственного кода

После внесения изменений в код зачастую не терпится отправить pull-request. Но лучше не спешить и провести ревью собственного кода.

5 Первый вариант кода не всегда лучший

Большинство разработчиков знают, что первая версия кода или программы не всегда сделана на отлично. После публикации первого варианта рекомендуется проанализировать его и выявить недостатки. 

Если требуется сохранить обратную совместимость, лучше покрыть код тестами, чтобы сэкономить время на ручном тестировании и поисках багов.

6 Делите код на мелкие части

Разделение больших функций и компонентов на более мелкие позволяет сделать их более пригодными для повторного использования. Ревью и тестирование одного большого файла всегда сложнее, чем нескольких небольших. 

7 Именование файлов

Имя файла, неожиданно, должно соответствовать его предназначению. 

Например, Article — хорошее название, но слишком обобщённое, ведь это может быть как телом статьи, так и элементом в списке статей. 

Также плохо называть компоненты в зависимости от их расположения на странице: ArticleLeft, ArticleTop т. д.

Лучше всего в таком случае добавлять в название компонента его предназначение: ArticleItem, ArticleBody и т. д,

8 Тестируйте код

Автоматические тесты позволяют убедиться, что код работает. Чем больше различных сценариев будет протестировано, тем надёжнее код. 

После разработки кода может показаться, что он работает, но важно проверять ещё и крайние случаи. И если код будет меняться, то тесты помогут выявить ошибки, которые были допущены в ходе переписывания кода.

Также протестированный код вызывает большее доверие со стороны других разработчиков, а это важно при разработке открытых проектов.

Для unit-тестов для React-компонентов я использую Jest, для интеграционных тестов — Nightwatch.