Share This
Связаться со мной
Крути в низ
Categories
//6 лучших практик для React-разработчика

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

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

6 luchshih praktik dlja react razrabotchika 710324c - 6 лучших практик для React-разработчика

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

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

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

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

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

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

         it('checks if the title component is in the document', () => {     expect(screen.getByText('Title')).toBeInTheDocument() })     

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

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

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

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

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

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

         |-store   |--actions     |---UserAction.js     |---ProductAction.js     |---OrderAction.js   |--reducers     |---UserReducer.js     |---ProductReducer.js     |---OrderReducer.js     

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

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

         |-store   |--user     |---UserAction.js     |---UserReducer.js   |--product         |---ProductAction.js     |---ProductReducer.js   |--order         |---OrderAction.js     |---OrderReducer.js     

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

3. Styled-components

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

         // внутри jsx-файла <button className="btn-submit">  <button/>   // внутри css-файла .btn-submit {  }     

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

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

         const Button = styled.button`   font-size: 1em;   margin: 1em;   padding: 0.25em 1em;   border-radius: 3px; `;     

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

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

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

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

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

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

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

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

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

***

Итак, самые лучшие практики разработки на React:

  • тестирование;
  • грамотная файловая структура проекта;
  • использование функциональных компонентов;
  • и перекладывание всех рутинных задач на автоматизированные инструменты.

  • 21 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

Связаться со мной
Close