4 bibliothèques facilitant la vie d'un développeur React

Dans cet article, je parlerai de quatre bibliothèques qui vous faciliteront la vie. Au moins, je l'espère

1) Nanoïde

Lien Github
Il s'agit d'une petite bibliothèque qui n'a qu'une seule fonction - générer un identifiant unique. Il peut être utile dans de nombreux cas, comme tout autre générateur de séquences aléatoires de caractères. Avantages incontestables: simplicité et petite taille - 143 octets .

Bien sûr, si vous utilisez, par exemple, lodash, vous pouvez utiliser la méthode uniqueId ().
L'utilisation est aussi simple que possible:

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

UPD:
N'utilisez JAMAIS nanoid () pour indexer des listes ou tout autre élément en double avec clé dans ReactJS. Puisque si vous utilisez cette méthode, chaque fois que vous mettrez à jour le composant React, il pensera que tous les éléments sont nouveaux et les rendra à nouveau, ce qui aura un très mauvais effet sur les performances et contredira généralement la signification de key.

Plus d'informations sur la clé: reactjs.org/docs/lists-and-keys.html#keys
Plus de détails sur la clé: habr.com/company/hh/blog/352150

Un exemple d'une très mauvaise utilisation du nanoïde:

 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 exemple d'utilisation normale de nanoïde:

 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; 

J'ai appris à le faire de bonnes personnes dans les commentaires, pour lesquels ils sont séparés, merci beaucoup!

2) Noms de classe

Lien Github
Cette bibliothèque sert à l'union conditionnelle simple des noms de classe. Son utilisation n'est pas beaucoup plus difficile que la bibliothèque précédente.

Exemple d'utilisation 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' 

Pour moi personnellement, cette bibliothèque est requise dans toute application React. Bien sûr, jusqu'à ce que je trouve un outil plus pratique.

3) Formik et Yup

Lien vers github (Formik)
Lien vers github (Yup)
En parlant de simplifier quelque chose dans React, vous ne pouvez pas vous empêcher de mentionner l'utilisation de formulaires. Chaque développeur React débutant a probablement compris à quel point il détestait travailler avec des formulaires. Lorsque cette compréhension vient, il vaut la peine de chercher immédiatement une pilule d'économie.

Pour moi, cette pilule était Formik et Yup.

Formik est une bibliothèque qui vous aide à travailler avec des formulaires. Il facilite la récupération de données à partir d'un formulaire, la validation de données, l'affichage de messages d'erreur, etc.

Yup est une bibliothèque qui est un validateur pour un modèle que nous créons nous-mêmes en utilisant Yup.

Pour une description quelque peu complète de ce groupe, un article séparé est nécessaire, mais j'essaierai de montrer à vol d'oiseau ce qu'ils sont.

Un exemple de code peut être exécuté ici: Exemple

Créez d'abord un diagramme:

 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; 

Dans le code ci-dessus, nous avons défini un circuit, qui est essentiellement un objet. Il a trois champs: email, nom d'utilisateur et mot de passe. Nous avons déterminé quelques vérifications pour chacun des champs.

Une façon d'utiliser Formik est l'élément <Formik />, qui possède de nombreuses propriétés différentes, dont l'une est le rendu .

 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; 

Le code est simple, je l'ai fourni avec des commentaires, donc je pense qu'il ne devrait pas y avoir de questions.
S'ils sont apparus, le référentiel GitHub a une excellente documentation, vous pouvez également poser des questions dans les commentaires.

C'est la fin. Je sais qu'il existe de nombreuses excellentes bibliothèques pour travailler avec des formulaires, certaines vous semblent les meilleures, d'autres les pires. J'ai exprimé mon opinion personnelle ici.

J'espère que cet article peut tout le monde. Vous pouvez écrire vos exemples de bibliothèques utiles dans les commentaires, je serai heureux d'apprendre quelque chose de nouveau.