React дает разработчику большую свободу действий, но большая сила требует большой ответственности, — пишет сайт proglib.io в своем переводе статьи «6 Regrets I Have As a React Developer».
Для новых разработчиков, которые еще не знают, что и как, нет четкого руководства к действию. Им сложно разобраться в инструментах и паттернах, в результате они решают одни и те же проблемы десятками разных способов – и обычно не самыми лучшими из возможных.
Очень важно уже в начале обучения взять на вооружение лучшие практики программирования на 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:
- тестирование;
- грамотная файловая структура проекта;
- использование функциональных компонентов;
- и перекладывание всех рутинных задач на автоматизированные инструменты.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]