4 perpustakaan membuat hidup lebih mudah untuk pengembang Bereaksi

Pada artikel ini saya akan berbicara tentang empat perpustakaan yang akan membuat hidup Anda lebih mudah. Setidaknya saya harap begitu

1) Nanoid

Tautan Github
Ini adalah perpustakaan kecil yang hanya memiliki satu fungsi - menghasilkan id unik. Ini dapat berguna dalam banyak kasus, seperti generator urutan karakter acak lainnya. Keunggulan yang tak terbantahkan: kesederhanaan dan ukuran mungil - 143 byte .

Tentu saja, jika Anda menggunakan, misalnya, lodash, maka Anda dapat menggunakan metode uniqueId ().
Gunakan sesederhana mungkin:

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

UPD:
JANGAN PERNAH menggunakan nanoid () untuk mengindeks daftar atau elemen duplikat lainnya dengan kunci di ReactJS. Karena jika Anda menggunakan metode ini, setiap kali Anda memperbarui komponen Bereaksi, ia akan berpikir bahwa semua elemen adalah baru dan akan merendernya lagi, yang akan memiliki efek yang sangat buruk pada kinerja dan umumnya bertentangan dengan makna kunci.

Lebih lanjut tentang kunci: reactjs.org/docs/lists-and-keys.html#keys
Lebih detail tentang kunci: habr.com/company/hh/blog/352150

Contoh penggunaan nanoid yang sangat buruk:

 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 

Contoh penggunaan normal 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; 

Saya belajar bagaimana melakukannya dari orang-orang baik di komentar, yang mana mereka terpisah, terima kasih banyak!

2) Nama Kelas

Tautan Github
Perpustakaan ini adalah untuk penyatuan kondisional nama kelas. Menggunakannya tidak jauh lebih sulit dari perpustakaan sebelumnya.

Contoh penggunaan sederhana:

 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' 

Bagi saya pribadi, perpustakaan ini diperlukan dalam aplikasi Bereaksi apa pun. Tentu saja, sampai saya menemukan alat yang lebih nyaman.

3) Formik dan Yup

Tautan ke github (Formik)
Tautan ke github (Yup)
Dalam berbicara tentang menyederhanakan sesuatu di Bereaksi, Anda tidak bisa tidak menyebutkan bekerja dengan formulir. Mungkin setiap pemula Bereaksi-pengembang pada satu titik mengerti bagaimana ia benci bekerja dengan formulir. Ketika pemahaman ini datang, ada baiknya segera mencari pil tabungan.

Bagi saya, pil ini adalah Formik dan Yup.

Formik adalah perpustakaan yang membantu Anda bekerja dengan formulir. Ini membuatnya mudah untuk mengambil data dari formulir, memvalidasi data, menampilkan pesan kesalahan, dan banyak lagi.

Yup adalah perpustakaan yang merupakan validator untuk model yang kami buat sendiri menggunakan Yup.

Untuk deskripsi yang agak lengkap tentang gerombolan ini, diperlukan artikel terpisah, tetapi saya akan mencoba menunjukkan dari mata burung apa itu.

Contoh kode dapat dijalankan di sini: Contoh

Pertama, buat diagram:

 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; 

Dalam kode di atas, kita mendefinisikan sebuah sirkuit, yang pada dasarnya adalah sebuah objek. Ini memiliki tiga bidang: email, nama pengguna dan kata sandi. Kami menentukan beberapa cek untuk masing-masing bidang.

Salah satu cara untuk menggunakan Formik adalah elemen <Formik />, yang memiliki banyak properti berbeda, salah satunya adalah 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; 

Kodenya sederhana, saya berikan komentar, jadi saya pikir tidak boleh ada pertanyaan.
Jika sudah muncul, maka repositori GitHub memiliki dokumentasi yang sangat baik, Anda juga dapat mengajukan pertanyaan di komentar.

Inilah akhirnya. Saya tahu bahwa ada banyak perpustakaan yang bagus untuk bekerja dengan formulir, beberapa di antaranya bagi Anda adalah yang terbaik, beberapa yang terburuk. Saya menyatakan pendapat pribadi saya di sini.

Semoga artikel ini bisa siapa saja. Anda dapat menulis contoh perpustakaan yang bermanfaat di komentar, saya akan senang mempelajari sesuatu yang baru.