4 مكتبات تجعل الحياة أسهل لمطور التفاعل

في هذه المقالة سأتحدث عن أربع مكتبات من شأنها أن تجعل حياتك أسهل. على الأقل آمل ذلك

1) نانويد

رابط جيثب
هذه مكتبة صغيرة لها وظيفة واحدة فقط - إنشاء معرف فريد. يمكن أن يكون مفيدًا في كثير من الحالات ، مثل أي مولد آخر لتسلسلات الأحرف العشوائية. مزايا لا تقبل الجدل: البساطة والحجم الصغير - 143 بايت .

بالطبع ، إذا كنت تستخدم ، على سبيل المثال ، Lodash ، فيمكنك استخدام طريقة uniqueId ().
الاستخدام بسيط قدر الإمكان:

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

تحديث:
لا تستخدم أبدًا nanoid () لفهرسة القوائم أو أي عناصر مكررة أخرى بمفتاح في ReactJS. نظرًا لأنك إذا استخدمت هذه الطريقة ، في كل مرة تقوم فيها بتحديث مكون React ، فسيعتقد أن جميع العناصر جديدة وستعيد تقديمها ، مما سيكون له تأثير سيئ جدًا على الأداء ويتناقض بشكل عام مع معنى المفتاح.

المزيد عن المفتاح: responsejs.org/docs/lists-and-keys.html#keys
مزيد من التفاصيل حول المفتاح: habr.com/company/hh/blog/352150

مثال على الاستخدام السيئ للغاية للنانو:

 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 

مثال على الاستخدام العادي للنانو:

 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; 

لقد تعلمت كيف أفعل ذلك من الصالحين في التعليقات ، التي هم منفصلون عنها ، شكرًا جزيلاً!

2) أسماء الفصول

رابط جيثب
هذه المكتبة مخصصة للوحدة المشروطة البسيطة لأسماء الفئات. استخدامه ليس أكثر صعوبة من المكتبة السابقة.

مثال بسيط للاستخدام:

 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' 

بالنسبة لي شخصياً ، هذه المكتبة مطلوبة في أي تطبيق React. بالطبع ، حتى أجد أداة أكثر ملاءمة.

3) فورميك ويوب

رابط إلى جيثب (فورميك)
رابط إلى github (Yup)
في الحديث عن تبسيط شيء ما في React ، لا يسعك إلا أن تذكر العمل مع النماذج. ربما فهم كل مبتدئ مفاعل تفاعل في مرحلة ما كيف يكره العمل مع النماذج. عندما يأتي هذا الفهم ، يجدر البحث على الفور عن حبوب منع الحمل.

بالنسبة لي ، كانت هذه حبوب منع الحمل Formik و Yup.

Formik هي مكتبة تساعدك في العمل مع النماذج. يجعل من السهل استرداد البيانات من نموذج ، والتحقق من البيانات ، وعرض رسائل الخطأ ، والمزيد.

Yup هي مكتبة مدققة لنموذج أنشأناه نحن أنفسنا باستخدام Yup.

للحصول على وصف كامل إلى حد ما لهذه المجموعة ، هناك حاجة إلى مقال منفصل ، لكني سأحاول أن أري من عين الطائر ما هي.

يمكن تشغيل رمز مثال هنا: مثال

أولاً ، قم بإنشاء رسم تخطيطي:

 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; 

في الكود أعلاه ، حددنا دائرة ، وهي في الأساس كائن. لها ثلاثة مجالات: البريد الإلكتروني واسم المستخدم وكلمة المرور. حددنا بعض الشيكات لكل من الحقول.

إحدى طرق استخدام Formik هي عنصر <Formik /> ، الذي له العديد من الخصائص المختلفة ، أحدها يتم تقديمه .

 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; 

الرمز بسيط ، لقد زودته بالتعليقات ، لذلك أعتقد أنه لا ينبغي أن تكون هناك أسئلة.
إذا نشأت ، فإن مستودع GitHub لديه وثائق ممتازة ، يمكنك أيضًا طرح الأسئلة في التعليقات.

هذه هي النهاية. أعلم أن هناك العديد من المكتبات الممتازة للعمل مع النماذج ، بعضها يبدو الأفضل بالنسبة لك ، وبعضها الأسوأ. لقد عبرت عن رأيي الشخصي هنا.

أتمنى أن هذه المقالة يمكن لأي شخص. يمكنك كتابة أمثلة للمكتبات المفيدة في التعليقات ، ويسعدني أن أتعلم شيئًا جديدًا.