एक रिएक्टर डेवलपर के लिए जीवन को आसान बनाने वाले 4 पुस्तकालय

इस लेख में मैं चार पुस्तकालयों के बारे में बात करूंगा जो आपके जीवन को आसान बना देंगे। कम से कम मुझे उम्मीद है

1) नैनोइड

जीथब लिंक
यह एक छोटी सी लाइब्रेरी है जिसमें केवल एक फ़ंक्शन है - एक अद्वितीय आईडी जनरेट करना। यह कई मामलों में उपयोगी हो सकता है, जैसे पात्रों के यादृच्छिक अनुक्रमों के किसी भी अन्य जनरेटर। निर्विवाद फायदे: सादगी और छोटे आकार - 143 बाइट्स ।

बेशक, यदि आप उपयोग करते हैं, उदाहरण के लिए, लॉश, तो आप यूनिकआईड () विधि का उपयोग कर सकते हैं।
उपयोग यथासंभव सरल है:

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

युपीडी:
कभी भी रिएक्ट लिस्ट में कुंजी के साथ सूचियों या किसी अन्य डुप्लिकेट तत्वों के लिए नैनोइड () का उपयोग न करें। चूंकि यदि आप इस पद्धति का उपयोग करते हैं, तो हर बार जब आप रिएक्ट घटक को अपडेट करते हैं, तो यह सोचता है कि सभी तत्व नए हैं और उन्हें फिर से प्रस्तुत करेंगे, जो प्रदर्शन पर बहुत बुरा प्रभाव डालेगा और आम तौर पर कुंजी का अर्थ विरोधाभास करेगा।

कुंजी पर अधिक: reactjs.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' 

मेरे लिए व्यक्तिगत रूप से, किसी भी रिएक्ट एप्लिकेशन में इस लाइब्रेरी की आवश्यकता है। बेशक, जब तक मुझे एक अधिक सुविधाजनक उपकरण नहीं मिल जाता।

3) फॉर्मिक और यूप

जीथब (लिंक) से लिंक करें
Github (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; 

कोड सरल है, मैंने इसे टिप्पणियों के साथ प्रदान किया है, इसलिए मुझे लगता है कि कोई प्रश्न नहीं होना चाहिए।
यदि वे उत्पन्न हुए हैं, तो गिटहब रिपॉजिटरी में उत्कृष्ट दस्तावेज हैं, आप टिप्पणियों में सवाल भी पूछ सकते हैं।

यह अंत है। मुझे पता है कि रूपों के साथ काम करने के लिए कई उत्कृष्ट पुस्तकालय हैं, कुछ आपको सबसे अच्छे लगते हैं, कुछ सबसे खराब। मैंने यहां अपनी व्यक्तिगत राय व्यक्त की।

आशा है कि यह लेख किसी को भी हो सकता है आप उपयोगी पुस्तकालयों के अपने उदाहरण टिप्पणियों में लिख सकते हैं, मुझे कुछ नया सीखने में खुशी होगी।