4 bibliotecas que hacen la vida más fácil para un desarrollador de React

En este artículo hablaré sobre cuatro bibliotecas que te harán la vida más fácil. Al menos eso espero

1) nanoide

Enlace de Github
Esta es una pequeña biblioteca que tiene una sola función: generar una identificación única. Puede ser útil en muchos casos, como cualquier otro generador de secuencias aleatorias de caracteres. Ventajas indiscutibles: simplicidad y pequeño tamaño: 143 bytes .

Por supuesto, si usa, por ejemplo, lodash, puede usar el método uniqueId ().
El uso es lo más simple posible:

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

UPD:
NUNCA use nanoid () para indexar listas o cualquier otro elemento duplicado con clave en ReactJS. Dado que si usa este método, cada vez que actualice el componente React, pensará que todos los elementos son nuevos y los volverá a representar, lo que tendrá un efecto muy negativo en el rendimiento y, en general, contradirá el significado de la clave.

Más sobre la clave: reactjs.org/docs/lists-and-keys.html#keys
Más detalles sobre la clave: habr.com/company/hh/blog/352150

Un ejemplo de un uso muy pobre del 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 

Un ejemplo 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; 

Aprendí cómo hacerlo de buena gente en los comentarios, por lo que están separados, ¡muchas gracias!

2) nombres de clase

Enlace de Github
Esta biblioteca es para la unión condicional simple de nombres de clase. Usarlo no es mucho más difícil que la biblioteca anterior.

Ejemplo de uso simple:

 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 mí personalmente, esta biblioteca es necesaria en cualquier aplicación React. Por supuesto, hasta que encuentre una herramienta más conveniente.

3) Formik y Yup

Enlace a github (Formik)
Enlace a github (Sí)
Al hablar sobre la simplificación de algo en React, no puede evitar mencionar trabajar con formularios. Probablemente todos los desarrolladores principiantes de React en un momento entendieron cómo odia trabajar con formularios. Cuando llegue este entendimiento, vale la pena buscar inmediatamente una píldora de ahorro.

Para mí, esta píldora era Formik y Yup.

Formik es una biblioteca que te ayuda a trabajar con formularios. Facilita la recuperación de datos de un formulario, la validación de datos, la visualización de mensajes de error y más.

Yup es una biblioteca que valida un modelo que nosotros mismos creamos usando Yup.

Para una descripción algo completa de este grupo, se necesita un artículo separado, pero intentaré mostrar a simple vista cuáles son.

Aquí se puede ejecutar un código de ejemplo: Ejemplo

Primero, crea un 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; 

En el código anterior, definimos un circuito, que es esencialmente un objeto. Tiene tres campos: correo electrónico, nombre de usuario y contraseña. Determinamos algunos controles para cada uno de los campos.

Una forma de usar Formik es el elemento <Formik />, que tiene muchas propiedades diferentes, una de las cuales es render .

 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; 

El código es simple, lo proporcioné con comentarios, así que creo que no debería haber preguntas.
Si han surgido, entonces el repositorio de GitHub tiene una excelente documentación, también puede hacer preguntas en los comentarios.

Este es el final. Sé que hay muchas bibliotecas excelentes para trabajar con formularios, algunas te parecen las mejores, otras las peores. Expresé mi opinión personal aquí.

Espero que este artículo pueda alguien. Puedes escribir tus ejemplos de bibliotecas útiles en los comentarios, estaré encantado de aprender algo nuevo.