6 лучших практик для React-разработчика

6 лучших практик для React-разработчика

React дает разработчику большую свободу действий, но большая сила требует большой ответственности.

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

Очень важно уже в начале обучения взять на вооружение лучшие практики программирования на React и следовать им, вырабатывая хороший стиль. В этой статье вы найдете целых 6 практик, которые вы должны опробовать как можно скорее, если еще не сделали этого.

1. Тестирование

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

Но возрадуйтесь – нет ничего проще, чем тестирование проектов React. Вот тест, который проверяет правильность отображения компонента заголовка:

Вам понадобится две минуты, чтобы написать его. А в перспективе он сэкономит вам часы разработки. Для тестирования React-проектов обычно используются библиотеки react-testing-library и jest.

Если вы используете утилиту create-react-app и не пишете тесты, то у вас нет ни малейшего оправдания. Ведь вся инфраструктура уже настроена за вас – нужно только взять и написать ваш первый тест.

Начните практиковать тестирование как можно раньше, в будущем вы будете очень рады этому.

2. Структура папок и файлов

Новичку в React непросто разобраться с большим количеством файлов.

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

Выглядит логично, но по мере роста проекта найти нужный файл будет все труднее.

Гораздо полезнее организовывать файлы по фичам: все, что относится к юзеру, в одну папку, к продуктам – в другую:

Теперь намного проще перемещаться по дереву файлов в поиске нужной функциональности.

3. Styled-components

Существует много способов использовать стили в вашем веб-проекте: от нативного CSS до разнообразных препроцессоров вроде SASS, предлагающих удобный синтаксический «сахар». Однако все эти подходы предполагают отделение стилей от компонентов и затрудняют их повторное использование.

Если вам не нравится засорение JSX-разметки атрибутами className и хочется более абстрактного взаимодействия со стилями, обратите внимание на библиотеку styled-components. Она позволяет объявлять стили как отдельные компоненты и поддерживать код более чистым.

Styled-components поддерживает пропсы, благодаря этому удобнее работать с условными стилями.

4. Функциональные компоненты

Классовые компоненты в React постепенно умирают, все активное сообщество перешло на компоненты-функции. Если вы еще не приняли на вооружение эту хорошую практику, то давно пора сделать это.

Хуки React – это возможно самое лучшее, что есть в библиотеке, так что используйте их на всю катушку.

5. Библиотеки для обработки форм

Обработка форм, вероятно, самая распространенная функция большинства веб-приложений. И самая нудная и болезненная. Если вы используете ванильный метод onChange , то прекрасно понимаете это.

К счастью, для React создано много хороших утилитарных библиотек, в том числе и для обработки и валидации форм. Например, Formik и react-hook-form. Нет никаких причин не использовать их. Простая декларативная обработка форм – мечта любого веб-разработчика.

6. Линтер и форматирование кода

Этот пункт относится не только к React, но и к программированию в целом.

Чтобы ваш код был чистым и аккуратным, используйте инструменты автоматического форматирования и проверки – ESlint и Prettier. Они могут не только выровнять все отступы, но и обнаружить распространенные ошибки и опечатки, которые вы могли не заметить, и в целом экономят много времени и нервов.