Tproger: Типичные ошибки джунов, использующих React

Об основных ошибках junior-разработчиков, использующих React. На чем сыпятся джуны, и как с этим жить? Перевод статьи «Mistakes Junior React Developers Make» от наших коллег из практики Frontend «Рексофт».

Прямые манипуляции с DOM

Такого рода ошибка встречается особенно часто среди разработчиков, которые только пересели с jQuery.

Писали ли вы такой код?

В чем же проблема?

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

Что же такого плохого в прямых манипуляциях DOM?

Любое веб-приложение на самом деле строится на состоянии и его управлении. Есть прямая зависимость между сложностью ПО и состоянием, которое его описывает. Если ваше приложение совмещает состояния DOM и React, то сложность его поддержки вырастет очень быстро.

Возможное решение

Обратим внимание на то, как мы используем React состояние для обновления атрибута className в нашем компоненте, и, как следствие, мы избавились от document.querySelector. Отлично!

Не следить за ресурсами

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

Заметили, как мы добавили слушатель события, но не позаботились о том, чтобы удалить его в конце?

Это может привести к утечкам памяти и трудноуловимым проблемам в будущем. Лучшим решением считается удаление подписчиков перед тем, как наш компонент будет удален из DOM.

Взглянем на решение ниже:

Отказ от тестов (или их недостаточное количество)

Если бы мне давали по рублю за каждый проект, который я просмотрел и где единственным тестом был тот, что является по умолчанию в create-react-app, я не писал бы эту статью. А, наверное, потягивал сейчас дайкири где-нибудь на пляже.

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

Может быть, заглушки сбивают их с толку? Или они испытывают сложности с тем, что следует тестировать и что нет?

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

Так как же протестировать данную форму?

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

  1. Пользователь вводит свои данные.
  2. Пользователь нажимает на кнопку подтверждения.
  3. Пользователь перенаправляется на страничку «home».

Это и есть все то, что нам нужно протестировать.

Ниже я написал один из тест-кейсов для данного компонента. Можете ли вы предложить какие-нибудь еще сценарии, которые было бы полезно протестировать?

Непонимание Webpack

Некоторые из младших разработчиков, с которыми я работал, знали, как использовать, но не понимали, как работает Webpack. Они использовали только лишь с основной кодовой базой проекта и считали, что все остальное «работает просто потому что». Они не копали глубже, не выясняли, как именно CSS и ES6, который они пишут, трансформируется и объединяется в то, что в конечном итоге используется клиентским браузером.

Я рекомендую каждому React-разработчику выделить время и построить простой шаблонный проект. Вместо того, чтобы каждый раз полагаться на create-react-app и NextJS, разберитесь, как современные инструменты сборки JavaScript работают вместе. Это улучшит ваше понимание своей работы и, как следствие, сделает вас более эффективным разработчиком, особенно при решении проблем со сборкой.

Отметим, что мнение наших коллег не во всем совпадает с мнением автора оригинальной статьи.

Источник: https://tproger.ru/translations/mistakes-junior-react-developers-make/

ЕЩЕ НОВОСТИ