5 основных библиотек для вашего следующего приложения React
Что мне больше всего нравится в React, так это то, что нет единого способа создания приложения. Вы, как разработчик, должны выбирать библиотеки, которые хотите использовать, и шаблоны, которым хотите следовать. Это дает вам неограниченную свободу для создания вашего приложения по-своему.
Тем не менее, большинство приложений, которые я делаю, для работы или для личных проектов, начинаются с одних и тех же библиотек.
Мы могли бы создавать наши приложения, используя React и ни одну из этих библиотек. Мы могли бы сделать все с нуля. Ничто не мешает нам создать приложение с нулевыми внешними зависимостями.
Но, используя удивительный вклад сообщества React, мы можем тратить больше времени на обеспечение ценности для наших пользователей и меньше времени на изобретения колеса.
1. Formik
Давайте смотреть правде в глаза. Почти все веб-приложения имеют формы. И формы это сложная вещь, чтобы делать их правильно. Нет ничего более разочаровывающего для пользователя, чем форма, которая не работает правильно или сбрасывается после проверки ошибок, оставляя мне возможность вводить всю мою информацию еще раз. Ключ к хорошему пользовательскому опыту в ваших веб-приложениях - убедиться, что вы правильно делаете формы.
Что это означает?
- Поля формы должны иметь проверку на стороне клиента.
- В поле не должно отображаться сообщение об ошибке до тех пор, пока оно не будет «затронуто» пользователем или пока форма не будет отправлена.
- Состояние формы не должно быть «утеряно» или «сброшено» при неправильном представлении
- Форма должна обрабатывать асинхронную (на стороне сервера) проверку после отправки формы.
Если бы мы кодировали компонент, который обрабатывает все это самостоятельно, это было бы довольно сложно. Нам нужно было бы отслеживать все значения формы, нам также нужно было бы отслеживать состояние «касания» всех полей формы, и нам нужно было бы отслеживать «ошибки».
Нам также необходимо построить логику для отправки формы. И все это должно быть достаточно общим, чтобы мы могли использовать его во всем приложении. Мы не хотим перестраивать это в нашей форме входа в систему, в нашей форме регистрации, в нашей форме адреса и т.д.
Вместо того, чтобы создавать его самостоятельно, давайте использовать популярную библиотеку из сообщества React.
Formik - это библиотека Джареда Палмера, которая позволяет легко создавать формы в React.
2. Downshift
Вы можете спросить себя, зачем использовать внешнюю библиотеку для создания чего-то простого, например, раскрывающегося списка или выбора ввода?
Да - создать компонент, который открывается или закрывается на основе щелчка мышью, довольно просто.
Трудно сделать выпадающий список, который будет доступен и пригоден для большого числа интернет-пользователей, которые полагаются на программы чтения с экрана. Трудно заставить его работать должным образом для пользователей клавиатуры.
Вот почему я люблю использовать Downshift.
3. CSS-Modules и
Когда я начинаю новый проект React, я обычно выбираю CSS-модули. Поддержка встроена в приложение create-react-app, поэтому легко начать работу. Конечно, я мог бы избежать зависимости, следуя БЭМ, но тогда мне нужно было бы научиться использовать БЭМ 😉. CSS-Модули дают мне предсказуемый CSS без суеты.
В сочетании с CSS-модулями я люблю использовать Classnames. Как часто вы пишете такой код?
const className = 'button ' + props.hasError ? 'error' : '';
return (
);
С Classnames мы можем упростить и написать это так.
const Button = props => (
);
И мы можем даже объединить это с CSS-модулями, как ниже.
import styles from './Button.module.css';
const Button = props => (
);
Разве это не прекрасно? Scoped, легко написать CSS. Там нет ничего лучше.
4. Библиотеки тестирования
Тестирование экономит мне так много времени. Когда я работаю над сложной функцией или компонентом, между дизайном, продуктом и разработкой всегда есть взаимодействие. Дизайнер может запросить визуальные или пользовательские изменения. Продукт может запрашивать изменения UX. Я постоянно возвращаюсь назад, реорганизую и обновляю поведение компонента.
Убедившись, что мой компонент или функция должным образом протестированы, я могу гарантировать, что этот рефакторинг не позволит регрессиям проникнуть в кодовую базу. Это экономит мне бесчисленные часы в ручном тестировании и помогает мне работать быстрее и с большей уверенностью.
Когда дело доходит до тестирования приложения React, есть один золотой стандарт: testing-library/react. Теперь он встроен в приложение create-react-app, поэтому приступить к работе очень просто.
С помощью react-testing-library мы можем тестировать наши компоненты с точки зрения пользователя.
Что это значит? Давайте проиллюстрируем это на практическом примере.
В следующем примере я написал тест для простой формы регистрации. Он просит пользователей предоставить свое имя, адрес электронной почты и пароль. Это все обязательные поля. Если что-либо пропущено, то форма должна отображать ошибку при отправке.
import { render, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SignupForm } from "./Form";
describe("SignupForm", () => {
it("should show an error when password is omitted", () => {
const rendered = render(Как вы можете видеть, сначала SignupForm мы визуализируем с помощью react-testing-library.
Затем мы вводим наши name и email.
Далее нажимаем кнопку отправки.
Наконец, мы видим assert, что в документе есть сообщение «Please input your password».
Как видите, все в этом тесте основано на том, как пользователь взаимодействует с формой. Мы могли бы реорганизовать форму для использования различных входных данных, чтобы разделить ее на несколько react компонентов, и все это без нарушения наших тестов.
Когда я запускаю новое приложение React, я всегда устанавливаю эти библиотеки. Я пишу меньше шаблонов и могу быстрее принести пользу своим пользователям.
