⚛ 6 лучших практик для React-разработчика
Лучшие практики и инструменты для разработки на 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:
- тестирование;
- грамотная файловая структура проекта;
- использование функциональных компонентов;
- и перекладывание всех рутинных задач на автоматизированные инструменты.