15 रिएक्ट बेस्ट प्रैक्टिस आपको 2020 में फॉलो करने की जरूरत है

रिएक्ट बेस्ट प्रैक्टिस


यदि आप अत्यधिक इंटरएक्टिव उपयोगकर्ता इंटरफ़ेस के निर्माण में लगे एक फ्रंटएंड डेवलपर हैं, तो आपको अपने टूलकिट में सबसे अधिक संभावना है। अपने रिएक्ट-संचालित कृतियों पर काम करते समय, आपको रिएक्ट सर्वोत्तम प्रथाओं के अनुरूप चीजों को करने के लिए सावधान रहना चाहिए। यह आपके कोड को बेहतर व्यवस्थित रखने में मदद करेगा.

जैसा कि आप जानते हैं, रिएक्ट फेसबुक द्वारा बनाई गई एक लाइब्रेरी है और यह कई दिलचस्प घटकों के साथ एकीकरण की अनुमति देता है। वास्तव में, कोई भी डेवलपर अपने स्वयं के घटक बना सकता है और उन्हें समुदाय के लिए सुलभ बना सकता है.

आज हम विषय को आगे बढ़ाते हैं और आपको दिखाते हैं रिएक्ट सर्वोत्तम प्रथाओं का सबसे मौलिक:

Contents

Small 1. घटकों को छोटा और कार्य-विशिष्ट रखें

जैसा कि हम सभी जानते हैं, रिएक्ट के साथ, बहुत सारे घटक होना संभव है जो कई कार्यों को निष्पादित करते हैं। लेकिन घटकों को डिजाइन करने का एक बेहतर तरीका उन्हें छोटा रखना है, ताकि एक घटक एक फ़ंक्शन से मेल खाता हो। आदर्श रूप से, एक एकल घटक को आपके पृष्ठ के एक विशिष्ट बिट को प्रस्तुत करना चाहिए या किसी विशेष व्यवहार को संशोधित करना चाहिए। इसके कई फायदे हैं:

  • फ़ंक्शन-विशिष्ट घटक स्टैंडअलोन हो सकते हैं, जो परीक्षण और रखरखाव को आसान बनाता है.
  • प्रत्येक छोटे घटक का कई परियोजनाओं में पुन: उपयोग किया जा सकता है.
  • सामान्य कार्यों को निष्पादित करने वाले घटक समुदाय को उपलब्ध कराए जा सकते हैं.
  • छोटे घटकों के साथ, प्रदर्शन अनुकूलन को लागू करना आसान है.
  • छोटे घटकों को अपडेट करना आसान है.
  • बड़े घटकों को कठिन प्रदर्शन करना पड़ता है और बनाए रखना मुश्किल हो सकता है.

एक संक्षिप्त घटक बनाने और कई फ़ंक्शन-विशिष्ट घटक बनाने के बीच का संतुलन संगठन से संगठन में भिन्न हो सकता है। आखिरकार, आपके पास जितने चाहें उतने घटक हो सकते हैं, और उन्हें किसी भी तरह से पुनः प्राप्त कर सकते हैं, आप उसी अंतिम परिणाम को प्राप्त करना चाहते हैं.

♻️ 2. पुन: प्रयोज्यता महत्वपूर्ण है, इसलिए न्यूनतम आवश्यक नए घटकों का निर्माण जारी रखें

एक फ़ंक्शन = एक घटक के नियम से चिपककर, आप घटकों के पुन: प्रयोज्य में सुधार कर सकते हैं। इसका मतलब यह है कि आपको किसी फ़ंक्शन के लिए एक नया घटक बनाने का प्रयास करना चाहिए अगर उस फ़ंक्शन के लिए पहले से ही एक घटक मौजूद है.

अपनी परियोजना में या किसी भी संख्या में परियोजनाओं के घटकों का पुन: उपयोग करके, न केवल आप निरंतरता प्राप्त करेंगे, आप समुदाय के लिए भी योगदान करेंगे.

दूसरी ओर, यदि कोई भी घटक विशाल, अस्पष्ट और बनाए रखने में मुश्किल हो जाता है, तो उसे आवश्यक रूप से कई अन्य घटकों में विभाजित करना बेहतर होता है.

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

वर्ग IconButton React.Component {का विस्तार करता है
[…]
प्रस्तुत करना() {
वापसी (

);
}
}

�� 3. डुप्लिकेट कोड को समेकित करें – अपने कोड को डीआरवाई करें

सभी कोड के लिए एक सामान्य नियम यह है कि इसे यथासंभव संक्षिप्त और संक्षिप्त रखें.

यह यहाँ भी अलग नहीं है, क्योंकि रिएक्ट सर्वोत्तम प्रथाओं में भी आपको कोड को संक्षिप्त और सटीक रखने के निर्देश हैं। दोहराव से बचने के लिए ऐसा करने का एक तरीका है – खुद को न दोहराएं (DRY).

आप पैटर्न और समानता के लिए कोड की जांच करके इसे प्राप्त कर सकते हैं। यदि आपको कोई मिल जाता है, तो संभव है कि आप दोहराव को खत्म करने के लिए कोड दोहरा रहे हों और इसमें गुंजाइश हो। सबसे अधिक संभावना है, थोड़ा पुनर्लेखन इसे और अधिक संक्षिप्त बना सकता है.

यह रिएक्ट में पुन: प्रयोज्य सिद्धांत पर बहुत निर्भर करता है। मान लें कि आप ऐसे कई बटन जोड़ना चाहते हैं जिनमें आइकन होते हैं, प्रत्येक बटन के लिए मार्कअप जोड़ने के बजाय, आप बस ऊपर दिखाए गए IconButton घटक का उपयोग कर सकते हैं। तुम भी एक सरणी में सब कुछ मानचित्रण द्वारा आगे जा सकते हैं.

const बटन = [‘facebook’, ‘twitter’, ‘youtube’];

वापसी (

{
बटन.मैप ((बटन) =)> {
वापसी (

);
})
}

);

�� 4. जावास्क्रिप्ट में CSS डालिए

जब आप किसी प्रोजेक्ट पर काम करना शुरू करते हैं, तो एक ही SCSS फ़ाइल में सभी CSS शैलियों को रखना एक आम बात है। एक वैश्विक उपसर्ग का उपयोग किसी भी संभावित नाम टकराव को रोकता है। हालाँकि, जब आपका प्रोजेक्ट बढ़ता है, तो यह समाधान संभव नहीं है.

कई लाइब्रेरी हैं जो आपको JS में CSS लिखने में सक्षम बनाती हैं. EmotionJS तथा आकर्षक जेएस पुस्तकालयों में दो सबसे लोकप्रिय सीएसएस हैं.

यहां अपनी परियोजना में EmotionJS का उपयोग करने का एक उदाहरण है। EmotionJS आपके उत्पादन के लिए पूरी CSS फाइलें तैयार कर सकता है। सबसे पहले, npm का उपयोग करके EmotionJS स्थापित करें.

npm स्थापित – save @ भावना / कोर

इसके बाद, आपको अपने एप्लिकेशन में EmotionJS आयात करना होगा.

‘@ भावना / कोर’ से {jsx} आयात करें

आप नीचे दिए गए स्निपेट में दिखाए गए तत्व के गुण सेट कर सकते हैं:

आज्ञा देना घटक = सहारा => {
वापसी (

)
}

यहाँ पूरा करने के लिए लिंक है EmotionJS के प्रलेखन.

�� 5. टिप्पणी केवल जहाँ आवश्यक हो

केवल आवश्यक होने पर कोड को टिप्पणी संलग्न करें। यह न केवल रिएक्ट सर्वोत्तम प्रथाओं को ध्यान में रखते हुए, यह एक ही समय में दो उद्देश्यों को भी पूरा करता है:

  • यह कोड को नेत्रहीन रूप से अव्यवस्थित रखेगा.
  • आप टिप्पणी और कोड के बीच संभावित टकराव से बचेंगे, यदि आप बाद में किसी समय बिंदु पर कोड को बदलने के लिए होते हैं.

�� 6. फ़ंक्शन के बाद घटक का नाम दें

फ़ंक्शन के बाद एक घटक को नाम देना एक अच्छा विचार है जो इसे निष्पादित करता है ताकि यह आसानी से पहचानने योग्य हो.

उदाहरण के लिए, ProductTable – यह घटक क्या करता है यह तुरंत बताता है। दूसरी ओर, यदि आप कोड की आवश्यकता के आधार पर घटक का नाम देते हैं, तो यह आपको भविष्य के समय पर भ्रमित कर सकता है.

एक अन्य उदाहरण, एक घटक अवतार को नाम देना बेहतर है, ताकि इसका उपयोग कहीं भी किया जा सके – लेखकों, उपयोगकर्ताओं या टिप्पणियों के लिए। इसके बजाय, यदि हम इसके उपयोग के संदर्भ में घटक AuthorAvatar का नाम देते हैं, तो हम उस घटक की उपयोगिता को सीमित नहीं करेंगे.

इसके अलावा, फ़ंक्शन के बाद एक घटक का नामकरण समुदाय के लिए इसे अधिक उपयोगी बनाता है क्योंकि इसकी खोज होने की अधिक संभावना है.

Itals 7. घटक नामों के लिए राजधानियों का उपयोग करें

यदि, अधिकांश लोगों की तरह, आप JSX (एक जावास्क्रिप्ट एक्सटेंशन) का उपयोग कर रहे हैं, तो आपके द्वारा बनाए गए घटकों के नाम अपरकेस अक्षरों से शुरू होने की आवश्यकता है। उदाहरण के लिए, आप सेलेक्टबटन के बजाय SelectButton के रूप में घटकों का नाम देंगे, या मेनू के बजाय मेनू। हम ऐसा इसलिए करते हैं ताकि JSX उन्हें डिफ़ॉल्ट HTML टैग्स से अलग पहचान दे सके.

पहले रिएक्ट संस्करणों ने कस्टम नामों से उन्हें अलग करने के लिए सभी अंतर्निहित नामों की एक सूची को बनाए रखा। लेकिन जैसे-जैसे सूची को निरंतर अद्यतन करने की आवश्यकता थी, कि स्क्रैप किया गया और राजधानियां आदर्श बन गईं.

यदि JSX आपकी पसंद की भाषा नहीं है, तो आप लोअरकेस अक्षरों का उपयोग कर सकते हैं। हालाँकि, यह आपके प्रोजेक्ट से परे घटकों के पुन: प्रयोज्य को कम कर सकता है.

�� 8. दूसरे नामकरण सम्मेलनों का ध्यान रखें

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

यदि आप एक ऐसा फ़ंक्शन बनाना चाहते हैं जो फ़ॉर्म सबमिट करता है, तो आपको SubmitForm को ऊपरी ऊंट के मामले में सबमिट करना चाहिए, इसके बजाय submitForm, submit_form या submit_form के बजाय। ऊपरी ऊंट मामले को आमतौर पर पास्कल केस कहा जाता है। यहाँ एक और है उदाहरणों की सूची पास्कल मामले में चर और फ़ंक्शन नाम.

�� 9. रेंडरिंग से स्टेटफुल पहलुओं को अलग करें

प्रतिक्रिया में घटक स्टेटफुल या स्टेटलेस हो सकते हैं। राज्य के घटक घटक की स्थिति के बारे में जानकारी संग्रहीत करते हैं और आवश्यक संदर्भ प्रदान करते हैं। इसके विपरीत, स्टेटलेस घटकों की कोई स्मृति नहीं होती है और यह UI के अन्य भागों को संदर्भ नहीं दे सकता है। वे केवल मूल घटक से प्रॉप्स (इनपुट्स) प्राप्त करते हैं और आपको JSX तत्व लौटाते हैं। वे स्केलेबल और पुन: प्रयोज्य हैं, और जावास्क्रिप्ट में शुद्ध फ़ंक्शन के समान हैं.

प्रतिक्रियात्मक सर्वोत्तम प्रथाओं में से एक आपके स्टेटफुल डेटा-लोडिंग लॉजिक को आपके रेंडरिंग स्टेटलेस लॉजिक से अलग रखना है। उस डेटा को प्रदर्शित करने के लिए डेटा को लोड करने के लिए एक स्टेटफुल कंपोनेंट और दूसरा स्टेटलेस कंपोनेंट होना बेहतर है। यह घटकों की जटिलता को कम करता है.

बाद के प्रतिक्रिया संस्करणों में v16.8 की एक नई विशेषता है – रिएक्ट हुक, जो स्टेटफुल फ़ंक्शन-संबंधित घटकों को लिखते हैं। यह अंततः वर्ग-आधारित घटकों की आवश्यकता को समाप्त कर सकता है.

उदाहरण के लिए, आपका ऐप माउंट पर कुछ डेटा ला रहा है। आप जो करना चाहते हैं, वह मुख्य घटक में डेटा का प्रबंधन करता है और जटिल रेंडर कार्य को सहारा के रूप में एक उप-घटक को सौंपता है.

” ./RenderTable ‘से रेंडरटेबल आयात करें;

क्लास टेबल का विस्तार
राज्य = {लोडिंग: सच};

प्रस्तुत करना() {
const {लोडिंग, टेबलडाटा} = this.state;
लोड हो रहा है? :;
}

घटकडिमाउंट () {
fetchTableData ()। तब (टेबलडाटा =)> {
this.setState ({लोडिंग: गलत, टेबलडैट});
};
}
}

Exec 10. कोड अपेक्षित रूप से निष्पादित होना चाहिए और परीक्षण योग्य होना चाहिए

वास्तव में, इस नियम के स्पष्टीकरण की आवश्यकता नहीं है। आपके द्वारा लिखा गया कोड अपेक्षित रूप से व्यवहार करना चाहिए, और आसानी से और जल्दी परीक्षण योग्य होना चाहिए। एक .test प्रत्यय के साथ स्रोत फ़ाइलों के समान अपनी परीक्षण फ़ाइलों को नाम देना एक अच्छा अभ्यास है। तब परीक्षण फ़ाइलों को खोजना आसान होगा.

अपने रिएक्ट कोड का परीक्षण करने के लिए आप JEST का उपयोग कर सकते हैं.

Related 11. किसी एक घटक से संबंधित सभी फाइलें एकल फ़ोल्डर में होनी चाहिए

किसी भी एक घटक से संबंधित सभी फाइलें एक ही फ़ोल्डर में रखें, जिसमें स्टाइलिंग फाइलें भी शामिल हैं.

यदि किसी विशेष घटक द्वारा केवल किसी छोटे घटक का उपयोग किया जाता है, तो यह इन छोटे घटकों को उस घटक फ़ोल्डर में एक साथ रखने के लिए समझ में आता है। पदानुक्रम तब समझना आसान होगा – बड़े घटकों का अपना फ़ोल्डर होता है और उनके सभी छोटे हिस्से उप-फ़ोल्डरों में विभाजित होते हैं। इस तरह, आप आसानी से किसी अन्य प्रोजेक्ट में कोड निकाल सकते हैं या जब चाहें कोड को संशोधित भी कर सकते हैं.

उदाहरण के लिए, फॉर्म घटक के लिए, सीएसएस फाइलें, आइकन, चित्र, परीक्षण और फॉर्म से संबंधित किसी भी अन्य उप-घटक जैसे सभी टुकड़ों को एक ही फ़ोल्डर में रहना चाहिए। यदि आप फ़ाइलों को समझदारी से नाम देते हैं, और संबंधित फ़ाइलों को तार्किक रूप से एक साथ रखते हैं, तो आपको बाद में उन्हें खोजने में कोई कठिनाई नहीं होगी.

Like 12. बिट जैसे उपकरण का उपयोग करें

रिएक्ट सर्वोत्तम प्रथाओं में से एक जो आपके सभी रिएक्ट घटकों को व्यवस्थित करने में मदद करता है, जैसे उपकरणों का उपयोग बिट.

ये उपकरण कोड को बनाए रखने और पुन: उपयोग करने में मदद करते हैं। इसके अलावा, यह कोड को खोज योग्य बनने में मदद करता है, और निर्माण घटकों में टीम के सहयोग को बढ़ावा देता है। इसके अलावा, कोड को परियोजनाओं में समन्‍वयित किया जा सकता है.

Ipp 13. स्निपेट पुस्तकालयों का उपयोग करें

कोड स्निपेट आपको सबसे अच्छे और सबसे हालिया वाक्य रचना के साथ बनाए रखने में मदद करते हैं। वे आपके कोड को अपेक्षाकृत बग मुक्त रखने में मदद करते हैं, इसलिए यह रिएक्ट सर्वोत्तम प्रथाओं में से एक है जिसे आपको याद नहीं करना चाहिए.

कई स्निपेट लाइब्रेरी हैं जिनका आप उपयोग कर सकते हैं, जैसे, ईएस 7 रिएक्ट, रेडक्स, जेएस स्निपेट्स, आदि.

✍️ 14. सभी कोड के लिए परीक्षण लिखें

किसी भी प्रोग्रामिंग भाषा में, पर्याप्त परीक्षण यह सुनिश्चित करता है कि आपकी परियोजना में जोड़ा गया कोई भी नया कोड मौजूदा कोड के साथ अच्छी तरह से एकीकृत है और मौजूदा कार्यक्षमता को नहीं तोड़ता है। आपके द्वारा बनाए गए किसी भी नए घटक के लिए परीक्षण लिखना एक अच्छा विचार है। एक अच्छे अभ्यास के रूप में, आपको सभी प्रासंगिक परीक्षणों को रखने के लिए अपने घटक की निर्देशिका के भीतर एक __Test__ निर्देशिका बनानी चाहिए.

आप मोटे तौर पर React में दो भागों में परीक्षण विभाजित कर सकते हैं: एक React ऐप का उपयोग करते हुए घटकों की कार्यक्षमता का परीक्षण करना, और एक बार ब्राउज़र में रेंडर करने पर आपके पूर्ण अनुप्रयोग पर परीक्षण। आप बाद की श्रेणी में परीक्षणों के लिए क्रॉस ब्राउज़र परीक्षण उपकरण का उपयोग कर सकते हैं.

पूर्व के लिए, आप एक जावास्क्रिप्ट परीक्षण धावक का उपयोग कर सकते हैं, जेस्ट प्रतिक्रिया घटकों का परीक्षण करने के लिए jsdom का उपयोग करके HTML DOM का अनुकरण करना। जबकि पूरी तरह से सटीक परीक्षण केवल एक वास्तविक डिवाइस पर एक ब्राउज़र में संभव है, जेस्ट आपकी परियोजना के विकास के चरण के दौरान वास्तविक परीक्षण वातावरण का एक अच्छा अनुमान प्रदान करता है।.

�� 15. लाइनिंग नियमों का पालन करें, बहुत लंबी लाइनें तोड़ दें

लाइनिंग एक ऐसी प्रक्रिया है जिसमें हम एक प्रोग्राम चलाते हैं जो संभावित त्रुटियों के लिए कोड का विश्लेषण करता है.

अधिकतर, हम इसका उपयोग भाषा-संबंधी मुद्दों के लिए करते हैं। लेकिन यह कई अन्य मुद्दों को भी स्वचालित रूप से ठीक कर सकता है, विशेष रूप से कोड शैली। अपने रिएक्ट कोड में लिंटर का उपयोग करना आपके कोड को अपेक्षाकृत त्रुटि- और बग-मुक्त रखने में मदद करता है.

रिएक्ट सर्वोत्तम प्रथाओं पर अंतिम शब्द

मुझे उम्मीद है कि रिएक्ट सर्वोत्तम प्रथाओं की यह सूची आपको अपनी परियोजनाओं को सही रास्ते पर लाने में मदद करने वाली है, और सड़क पर बाद में किसी भी संभावित समस्याओं से बचने के लिए।.

यदि आपके पास कोई प्रतिक्रिया-संबंधी प्रश्न हैं, तो नीचे टिप्पणी में उन्हें प्रस्तुत करने के लिए स्वतंत्र महसूस करें.

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

आंद्रेई Bicicuș द्वारा कोड उदाहरण। शोमिक दैत्यारी द्वारा सामग्री अद्यतन

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map