4 Bibliotheken erleichtern einem React-Entwickler das Leben

In diesem Artikel werde ich über vier Bibliotheken sprechen, die Ihnen das Leben erleichtern. Zumindest hoffe ich es

1) Nanoid

Github Link
Dies ist eine kleine Bibliothek, die nur eine Funktion hat - das Generieren einer eindeutigen ID. Es kann in vielen Fällen nützlich sein, wie jeder andere Generator zufälliger Zeichenfolgen. Unbestreitbare Vorteile: Einfachheit und winzige Größe - 143 Bytes .

Wenn Sie beispielsweise lodash verwenden, können Sie natürlich die uniqueId () -Methode verwenden.
Die Bedienung ist so einfach wie möglich:

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

UPD:
Verwenden Sie NIEMALS nanoid (), um Listen oder andere doppelte Elemente mit dem Schlüssel in ReactJS zu indizieren. Wenn Sie diese Methode verwenden, wird jedes Mal, wenn Sie die React-Komponente aktualisieren, davon ausgegangen, dass alle Elemente neu sind, und sie werden neu gerendert, was sich sehr negativ auf die Leistung auswirkt und im Allgemeinen der Bedeutung des Schlüssels widerspricht.

Weitere Informationen zu key: reactjs.org/docs/lists-and-keys.html#keys
Weitere Details zum Schlüssel: habr.com/company/hh/blog/352150

Ein Beispiel für eine sehr schlechte Verwendung von 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 

Ein Beispiel für die normale Verwendung von 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; 

Ich habe es von guten Leuten in den Kommentaren gelernt, für die sie getrennt sind. Vielen Dank!

2) Klassennamen

Github Link
Diese Bibliothek dient zur einfachen bedingten Vereinigung von Klassennamen. Die Verwendung ist nicht viel schwieriger als die vorherige Bibliothek.

Einfaches Anwendungsbeispiel:

 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' 

Für mich persönlich ist diese Bibliothek in jeder React-Anwendung erforderlich. Natürlich, bis ich ein bequemeres Werkzeug finde.

3) Formik und Yup

Link zum Github (Formik)
Link zu Github (Yup)
Wenn Sie über die Vereinfachung von etwas in React sprechen, müssen Sie die Arbeit mit Formularen erwähnen. Wahrscheinlich hat jeder React-Entwickler-Anfänger irgendwann verstanden, wie er es hasst, mit Formularen zu arbeiten. Wenn dieses Verständnis kommt, lohnt es sich, sofort nach einer Sparpille zu suchen.

Für mich war diese Pille Formik und Yup.

Formik ist eine Bibliothek, mit der Sie mit Formularen arbeiten können. Es macht es einfach, Daten aus einem Formular abzurufen, Daten zu validieren, Fehlermeldungen anzuzeigen und vieles mehr.

Yup ist eine Bibliothek, die ein Validator für ein Modell ist, das wir selbst mit Yup erstellen.

Für eine etwas vollständige Beschreibung dieses Bündels wird ein separater Artikel benötigt, aber ich werde versuchen, aus der Vogelperspektive zu zeigen, was sie sind.

Hier kann ein Beispielcode ausgeführt werden: Beispiel

Erstellen Sie zunächst ein Diagramm:

 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; 

Im obigen Code haben wir eine Schaltung definiert, die im Wesentlichen ein Objekt ist. Es hat drei Felder: E-Mail, Benutzername und Passwort. Wir haben für jedes Feld einige Prüfungen festgelegt.

Eine Möglichkeit, Formik zu verwenden, ist das <Formik /> -Element, das viele verschiedene Eigenschaften aufweist, von denen eine das Rendern ist .

 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; 

Der Code ist einfach, ich habe ihn mit Kommentaren versehen, daher denke ich, dass es keine Fragen geben sollte.
Wenn sie aufgetreten sind, verfügt das GitHub-Repository über eine hervorragende Dokumentation. Sie können auch Fragen in den Kommentaren stellen.

Dies ist das Ende. Ich weiß, dass es viele ausgezeichnete Bibliotheken für die Arbeit mit Formularen gibt, einige scheinen Ihnen die besten, andere die schlechtesten zu sein. Ich habe hier meine persönliche Meinung geäußert.

Hoffe dieser Artikel kann jeder. Sie können Ihre Beispiele für nützliche Bibliotheken in den Kommentaren schreiben, ich werde mich freuen, etwas Neues zu erfahren.