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

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

1) Nanoid

Ссылка на github
Это маленькая библиотека, которая имеет всего одну функцию — генерация уникального id. Она может быть полезна в массе случаев, но самый, пожалуй, очевидный — keys для списков каких-либо элементов. Неоспоримые плюсы: простота и крошечный размер — 143 байта.

Использование максимально просто:

import nanoid from 'nanoid'
size = 8
id = nanoid(size) //cjF38yYc

Пример индексации списка:

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

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;

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

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

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

Автор: snapoak

Источник