⚛ 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:

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