4 библиотеки, упрощающие жизнь React-разработчика

image

В этой статье я расскажу о четырех библиотеках, которые сделают вашу жизнь проще. По крайней мере, я на это надеюсь

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; 

Код простой, я снабдил его комментариями, поэтому, думаю, вопросов возникнуть не должно.
Если же они возникли, то в ГитХаб репозитории имеется отличная документация, также можете задавать вопросы в комментариях.

Вот и конец. Я знаю, что есть много отличных библиотек, для работы с формами, какие-то кажутся вам лучшими, какие-то худшими. Я выразил тут личное мнение.

Надеюсь, что эта статья кому-нибудь может. Можете писать свои примеры полезных библиотек в комментарии, буду рад узнать что-то новое.

FavoriteLoadingДобавить в избранное
Posted in Без рубрики

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *