В этой статье я расскажу о четырех библиотеках, которые сделают вашу жизнь проще. По крайней мере, я на это надеюсь
1) Nanoid
Ссылка на github
Это маленькая библиотека, которая имеет всего одну функцию — генерация уникального id. Она может быть полезна в массе случаев, как любой другой генератор случайных последовательностей символов. Неоспоримые плюсы: простота и крошечный размер — 143 байта.
Конечно, если вы используете, к примеру, lodash, то вы можете использовать метод uniqueId().
Использование максимально просто:
import nanoid from 'nanoid' size = 8 id = nanoid(size) //cjF38yYc
UPD:
НИКОГДА не используйте nanoid() для индексации списков или любых других повторяющихся элементов с помощью key в ReactJS. Так как если использовать этот метод, каждый раз при обновлении компонента React будет думать, что все элементы новые и будет их перерендерить, что очень плохо скажется на производительность и вообще противоречит смыслу key.
Подробнее о key: reactjs.org/docs/lists-and-keys.html#keys
Еще подробнее о key: habr.com/company/hh/blog/352150
Пример очень плохого использования nanoid:
import nanoid from 'nanoid' import React from 'react' const ListDrinks = props=>{ const drinks = ['rum','bear','vodka'] return( <ul> {drinks.map((values)=>{ //Вот так делать нельзя! return( <li key={nanoid(8)}>{values}</li> ) })} </ul> ) } export default ListDrinks
Пример нормального использования nanoid:
import React, { Component } from 'react'; import nanoid from 'nanoid' class InputWithLabel extends Component { constructor(props){ super(props) this.id = nanoid() } render() { return ( <div> <label htmlFor={this.id}>My label</label> <input id={this.id} type="text"/> </div> ); } } export default InputWithLabel;
То, как делать нельзя я узнал от добрых людей в комментариях, за что им отдельное, большое спасибо!
2) Classnames
Ссылка на github
Эта библиотека для простого условного объединения имен классов. Пользоваться ей не намного сложнее, чем предыдущей библиотекой.
Пример простого использования:
import cn from 'classnames' cn('menu','active')//'menu active' let isActive = true cn('menu',{'active':isActive})//'menu active' isActive = false cn('menu',{'active':isActive})//'menu'
Лично для меня эта библиотека является обязательной в любом React-приложении. Конечно, до того момента, пока я не найду более удобный инструмент.
3) Formik и Yup
Ссылка на github(Formik)
Ссылка на github(Yup)
В разговоре об упрощении чего-либо в React нельзя не упомянуть работу с формами. Наверное, каждый начинающий React-developer в один прекрасный момент понимал, как он ненавидит работу с формами. Когда приходит это понимание, стоит незамедлительно искать спасительную пилюлю.
Для меня этой пилюлей стали Formik и Yup.
Formik — библиотека, помогающая работать с формами. Она упрощает получение данных из формы, валидацию данных, вывод сообщений об ошибках и многое другое.
Yup — библиотека, которая является валидатором для модели, которую мы сами и создаем с помощью Yup.
Для сколько-нибудь полного описания этой связки нужна отдельная статья, но я попытаюсь показать с высоты птичьего полета, что они из себя представляют.
Код примера можно запустить тут: Пример
Первым делом создадим схему:
import * as Yup from "yup"; const BasicFormSchema = Yup.object().shape({ email: Yup.string() //Проверяем, корректный ли адрес. //Если нет, то выводится сообщение в скобках .email("Invalid email address") //не сабмитим, если поле не заполнено .required("Required"), username: Yup.string() //минимальная длина - 2 символа .min(2, "Must be longer than 2 characters") //максимальная длина - 20 символов .max(20, "Nice try, nobody has a first name that long") .required("Required"), password: Yup.string() .min(8, "Must be longer than 8 characters") .required("Required") }); export default BasicFormSchema;
В коде выше мы определили схему, которая по сути — объект. Она имеет три поля: email, username и password. Каждому из полей мы определили некоторые проверки.
Одним из способов использования Formik является элемент <Formik/>, который имеет множество разных свойств, один из которых render.
import React from "react"; import { Formik, Field, Form } from "formik"; import BasicFormSchema from "./BasicFormSсhema"; const SignUp = () => ( <div className="container"> <h1>Sign up</h1> <Formik //инициализируем значения input-ов initialValues={{ email: "", username: "", password: "" }} //подключаем схему валидации, которую описали выше validationSchema={BasicFormSchema} //определяем, что будет происходить при вызове onsubmit onSubmit={values => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); }, 500); }} //свойство, где описывыем нашу форму //errors-ошибки валидации формы //touched-поля формы, которые мы "затронули", //то есть, в которых что-то ввели render={({ errors, touched }) => ( <Form className="form-container"> <label htmlFor="email">Email</label> <Field name="email" placeholder="mtarasov777@gmail.com" type="email" /> {//если в этом поле возникла ошибка и //если это поле "затронуто, то выводим ошибку errors.email && touched.email && <div className="field-error">{errors.email}</div>} <label htmlFor="username">Username</label> <Field name="username" placeholder="snapoak" type="text" /> {errors.username && touched.username && ( <div className="field-error">{errors.username}</div> )} <label htmlFor="password">Password</label> <Field name="password" placeholder="123456qwe" type="password" /> {errors.password && touched.password && ( <div className="field-error">{errors.password}</div> )} <button type="submit">Submit</button> </Form> )} /> </div> ); export default SignUp;
Код простой, я снабдил его комментариями, поэтому, думаю, вопросов возникнуть не должно.
Если же они возникли, то в ГитХаб репозитории имеется отличная документация, также можете задавать вопросы в комментариях.
Вот и конец. Я знаю, что есть много отличных библиотек, для работы с формами, какие-то кажутся вам лучшими, какие-то худшими. Я выразил тут личное мнение.
Надеюсь, что эта статья кому-нибудь может. Можете писать свои примеры полезных библиотек в комментарии, буду рад узнать что-то новое.
