4 bibliotecas facilitando a vida de um desenvolvedor do React

Neste artigo, falarei sobre quatro bibliotecas que facilitarão sua vida. Pelo menos espero que sim

1) Nanoid

Link do Github
Esta é uma pequena biblioteca que possui apenas uma função - gerando um ID exclusivo. Pode ser útil em muitos casos, como qualquer outro gerador de seqüências aleatórias de caracteres. Vantagens indiscutíveis: simplicidade e tamanho minúsculo - 143 bytes .

Obviamente, se você usar, por exemplo, lodash, poderá usar o método uniqueId ().
O uso é o mais simples possível:

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

UPD:
NUNCA use nanoid () para indexar listas ou quaisquer outros elementos duplicados com a chave no ReactJS. Como se você usar esse método, toda vez que atualizar o componente React, ele pensará que todos os elementos são novos e os renderizará novamente, o que terá um efeito muito ruim no desempenho e geralmente contradiz o significado da chave.

Mais sobre a chave: reactjs.org/docs/lists-and-keys.html#keys
Mais detalhes sobre a chave: habr.com/company/hh/blog/352150

Um exemplo de um uso muito pobre de nanoide:

 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 

Um exemplo de uso normal de nanoide:

 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; 

Eu aprendi como fazer isso com pessoas boas nos comentários, pelos quais eles são separados, muito obrigado!

2) Nomes de classe

Link do Github
Esta biblioteca é para união condicional simples de nomes de classe. Usá-lo não é muito mais difícil que a biblioteca anterior.

Exemplo de uso simples:

 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' 

Para mim, pessoalmente, essa biblioteca é necessária em qualquer aplicativo React. Claro, até encontrar uma ferramenta mais conveniente.

3) Formik e Yup

Link para o github (Formik)
Link para o github (Yup)
Ao falar sobre simplificar algo no React, você não pode deixar de mencionar o trabalho com formulários. Provavelmente, todo desenvolvedor iniciante do React, em um ponto, entendeu como ele odeia trabalhar com formulários. Quando esse entendimento chegar, vale a pena procurar imediatamente uma pílula de economia.

Para mim, esta pílula foi Formik e Yup.

Formik é uma biblioteca que ajuda você a trabalhar com formulários. Isso facilita a recuperação de dados de um formulário, a validação de dados, a exibição de mensagens de erro e muito mais.

Yup é uma biblioteca que é um validador para um modelo que nós mesmos criamos usando o Yup.

Para uma descrição um tanto completa desse grupo, é necessário um artigo separado, mas tentarei mostrar de um olho de pássaro o que eles são.

Um código de exemplo pode ser executado aqui: Example

Primeiro, crie um diagrama:

 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; 

No código acima, definimos um circuito, que é essencialmente um objeto. Possui três campos: email, nome de usuário e senha. Determinamos algumas verificações para cada um dos campos.

Uma maneira de usar o Formik é o elemento <Formik />, que possui muitas propriedades diferentes, uma das quais é renderizada .

 import React from "react"; import { Formik, Field, Form } from "formik"; import BasicFormSchema from "./BasicFormShema"; 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; 

O código é simples, eu forneci comentários, então acho que não deve haver perguntas.
Se eles surgiram, o repositório do GitHub possui uma documentação excelente, você também pode fazer perguntas nos comentários.

Esse é o fim Eu sei que existem muitas bibliotecas excelentes para trabalhar com formulários, algumas parecem as melhores, outras as piores. Eu expressei minha opinião pessoal aqui.

Espero que este artigo possa alguém. Você pode escrever seus exemplos de bibliotecas úteis nos comentários. Ficarei feliz em aprender algo novo.