10 युक्तियाँ कैसे एक प्रो की तरह अपने ReactJS कोड बनाने के लिए

हम में से कई, फ्रंटएंड डेवलपर्स, जेएस डेवलपर्स और रिएक्ट करने वाले डेवलपर्स की टीमों में काम करते हैं जिसमें विभिन्न कौशल स्तर वाले डेवलपर्स शामिल हैं। हमारे कोड को बेहतर बनाने के लिए सबसे अच्छा तरीका है GOOD QUALITY CODE REVIEW - लेकिन ऐसा नहीं है कि हम जांचते हैं कि क्या सभी काम करते हैं, बल्कि यह भी पता चलता है कि हमारे कॉलेजों ने इस परिणाम को कैसे बनाया - इसलिए हमें स्वच्छ कोड का आश्वासन देना होगा।

क्यों? यह आसान है - यदि आपकी टीम 5 व्यक्ति तक गिना जाता है, तो यह पूछना आसान है कि यह कैसे काम करता है। लेकिन अगर आपकी टीम बहुत बड़ी है या कई गतिशील परिवर्तन हैं, तो यह अच्छी गुणवत्ता कोड हमें और दूसरे डेवलपर्स को इसे समझने में मदद करता है, और निश्चित रूप से आप एक पीआरओ की तरह महसूस कर सकते हैं;

मैंने 10 सर्वश्रेष्ठ अभ्यास किए हैं, जो मुझे और मेरी टीम को हमारे रिएक्ट प्रोजेक्ट्स में कोड की गुणवत्ता में सुधार करने में मदद करते हैं। यह सुझाव आम तौर पर ES6 कार्यक्षमता पर आधारित होते हैं, लेकिन हम हमेशा उनका उपयोग नहीं करते हैं। उनके लिए देखो, और यह भी उपयोग करने के लिए स्वतंत्र महसूस हो रहा है !!

1. क्लास कंपोनेंट्स वीएस फंक्शन कंपोनेंट्स

हम सभी बहुत खुश हैं, कि ES6 में वर्ग समर्थन लागू किया गया था - मुझे यह पसंद है! प्रतिक्रिया में हम we React.Component ’नामक साधारण वर्ग का विस्तार करके एक घटक बना सकते हैं। वहां हमारे पास सरल राज्य प्रबंधन के तरीके, घटकों की घटनाओं का समर्थन आदि है। कभी-कभी यह बहुत अधिक होता है जिसकी हमें आवश्यकता होती है, लेकिन हम जानते हैं कि हम इसका उपयोग कर सकते हैं।

आयात प्रतिक्रिया, 'घटक' 'प्रतिक्रिया' से
वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    

हैलो {this.props.text} लौटाएं   } }

लेकिन प्रतिक्रिया विकास में कई डेवलपर्स भूल जाते हैं कि हम कैसे कार्यात्मक घटक का उपयोग करके एक घटक बना सकते हैं, जो कि एक पैरामीटर - प्रॉप्स के साथ एक फ़ंक्शन हो सकता है।

'प्रतिक्रिया' से आयात प्रतिक्रिया
const MyComponent = (props) => 

नमस्ते {props.text}

लेकिन इस दो घटकों का उपयोग समान दिखता है!

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

ठीक है - इसलिए जब हम क्लास कंपोनेंट्स का इस्तेमाल कर सकते हैं और जब फंक्शनल कंपोनेंट का? नियम बहुत आसान है - जब आप इस फोन का उपयोग कर रहे हैं, तो यह पूरी तरह से अलग नहीं है - हमारे पास घटक का उपयोग करें!

काफी आसान? हाँ! आपको स्केच से घटकों को कार्यात्मक घटक की तरह लिखना शुरू करें। जब आप देखते हैं कि आपको राज्यों की तरह कुछ का उपयोग करने या अपने घटक में कुछ बदलावों का पता लगाने की आवश्यकता है - जैसे कि कंपोनेंटमाउंट () आदि। तब आप इसे क्लास कंपोनेंट में बदल सकते हैं।

जब आप इस बारे में सोचते हैं कि किस प्रकार का घटक उपयोग करता है, तो आप एक पीआरओ की तरह बन जाते हैं!

2. "यदि" घटक टेम्पलेट में कथन

नीचे देखें ... क्या आप जानते हैं कि यदि इस कथन की इस पद्धति में क्या गलत है?

{ए> बी? : null}

यदि स्थिति असंगत है तो रिएक्ट अशक्त होगा। हम्म ... यह ठीक है - मैं नहीं देख रहा हूँ इसलिए कोई समस्या नहीं है ... नहीं !!!

यह शून्य अभी भी आपके DOM में मौजूद है, इसलिए यदि आप सभी बच्चों को सूची से लेना चाहते हैं या nth- बच्चों के लिए कॉल करना चाहते हैं, तो यह null गिना जाएगा !!!

उपाय?

{a> b && }

इतना आसान, इतना सुरुचिपूर्ण। पेशेवर की तरह!

3. फंक्शन बाइंडिंग

मैं ES6 प्यार करता हूँ! मैं तीर का सामना प्यार करता हूँ !!! लेकिन अगर आप समझते हैं कि वे वास्तव में कैसे काम करते हैं, तो प्रतिक्रिया में उनका उपयोग करना बहुत आसान है। उनके बारे में और अधिक (यहां)। बहुत कम समय में तीर के कार्य को उनके प्रत्यक्ष माता-पिता से एक गुंजाइश मिलती है, जिसे घोषित किया गया था।

मैं फंक्शन बाइंडिंग के संदर्भ में क्यों बात कर रहा हूं? क्योंकि आपको कोड क्लीनर बनाने के लिए बहुत आसान ट्रिक है। मानक फ़ंक्शन बाइंडिंग इवेंट जैसा दिखता है:

वर्ग MyComponent घटक बढ़ाता है {
  कंस्ट्रक्टर (प्रॉप्स) {
    सुपर (सहारा)
    this.clickHander = this.clickHander.bind (यह)
  }
  clickHander (e) {
    e.preventDefault ();
    अलर्ट ('हैलो' + this.props.text)
  }
  प्रस्तुत करना() {
    वापसी  
  }
}

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

क्या मैं इसे आसान बना सकता हूं? बेशक!!! एरो फंक्शन द्वारा क्योंकि यह उनके प्रत्यक्ष माता-पिता से एक गुंजाइश प्राप्त करता है, कि घोषणा की गई थी (ऊपर से प्रतिलिपि)।

वर्ग MyComponent घटक बढ़ाता है {
  clickHander = (e) => {
    अलर्ट ('हैलो' + this.props.text)
  }
 प्रस्तुत करना() {
    वापसी  
  }
}

आसान, तेज और एक समर्थक की तरह लग रहा है !!!!

** जरूरी **

यदि आप इस संरचना का उपयोग करना चाहते हैं - याद रखें कि अभी यह प्रयोगधर्मी है, इसलिए हमें इसे ट्रांसफ़ॉर्म-क्लास-प्रॉपर्टी का उपयोग करके बैबेल द्वारा अनुवाद करना होगा, जो कि क्रिएट-रिएक्शन-ऐप में मानक है। यहाँ संदर्भ

4. छोटे प्रॉपर और राज्य

एक और चीज जो हम ईएस 6 से उपयोग कर सकते हैं, लेकिन हम भूल गए - विनाशकारी। कई कोड समीक्षाओं में हम देख सकते हैं कि विशाल वस्तुएं छोटे भागों के लिए नष्ट हो जाती हैं।

...
var चौड़ाई = this.props.myObject.width,
    ऊँचाई = this.props.myObject.height,
    color = this.props.myObject.color;
...

यह बहुत लंबा है, और लचीला समाधान नहीं है। उस होशियार को नष्ट करने का बहुत आसान तरीका है।

...
var {चौड़ाई, ऊँचाई, रंग} = this.props.myObject;
...

जब हम ऑब्जेक्ट की कुंजी की तरह एक ही नाम के साथ परिवर्तनशील होना चाहते हैं तो काफी आसान है।

हम इसे प्रतिक्रिया में कैसे उपयोग कर सकते हैं?

आयात प्रतिक्रिया, 'घटक' 'प्रतिक्रिया' से
वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    {नाम, आयु} = this.props दें
    वापसी 

मेरा नाम {नाम} है। मैं {आयु} वर्ष का हूं।   } }

या फ़ंक्शन घटक के साथ

'प्रतिक्रिया' से आयात प्रतिक्रिया
const MyComponent = ({नाम, आयु}) => 

मेरा नाम {name} है। मैं {आयु} वर्ष का हूं।

एक और उदाहरण? जब आप प्रॉप्स या राज्यों की बड़ी संरचना का उपयोग करते हैं।

आयात प्रतिक्रिया, 'घटक' 'प्रतिक्रिया' से
वर्ग MyComponent घटक बढ़ाता है {
  राज्य = {
    टीम: [
      {
        व्यक्ति: {
          बुनियादी जानकारी: {
            नाम: 'मिशाल',
            उम्र: 27
          }
        }
      }
    ]
  }
  प्रस्तुत करना() {
    {{नाम, उम्र} = this.props.team [0] .person.basicInfo
    
    वापसी 

मेरा नाम {नाम} है। मैं {आयु} वर्ष का हूं।   } }

आसान? आसान! और एक PRO की तरह दिखता है;)

5. शैलियाँ जुदाई

बहुत जल्दी सलाह - अलग स्टाइल !!! : डी

लेकिन हमारे पास दो स्थिति है:

  1. हम फ़ाइलों (.css, .scss) से बाहरी शैलियों का उपयोग कर सकते हैं
  2. हम कुछ घटकों का उपयोग करते हैं जो उनकी इमारत शैलियों का उपयोग करते हैं, लेकिन वे सामग्री-यूआई की तरह ही इनलाइन का उपयोग करते हैं

पहली स्थिति काफी आसान है, वेबपैक सास और स्टाइल लोडर के लिए डाल दिया है, और यह सब!

लेकिन दूसरी स्थिति थोड़ी मुश्किल है, और मैं आपको कुछ समाधान दिखाना चाहता हूं:

# 1। शैलियों के साथ कास्ट करें

आयात प्रतिक्रिया, 'घटक' 'प्रतिक्रिया' से
कास्ट स्टाइल = {
  पैराग्राफ: {
    'FONTSIZE': '10px',
    'रंग': '# ff0000'
  }
}
वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    वापसी (
      
        

यह मेरा पहला पाठ है         

यह मेरा दूसरा पाठ है            )   } }

# 2। सीएसएस मॉड्यूल

सीएसएस को अपने कोड में ऑब्जेक्ट और संदर्भ जैसी सीएसएस को लोड करने का अच्छा विचार है जो आपके पास सीएसएस फ़ाइल में मौजूद है।

आयात प्रतिक्रिया, 'घटक' 'प्रतिक्रिया' से
'./style.css' से आयात कक्षाएं
वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    वापसी (
      
        

यह मेरा पहला पाठ है         

यह मेरा दूसरा पाठ है            )   } }

त्वरित वीडियो सीएसएस के लिए आपको वेबपैक तैयार करने का तरीका

और याद रखें - यदि आप फ़ाइलों को अलग कर सकते हैं और संपादित करना आसान बना सकते हैं, तो आप एक पीआरओ की तरह काम करते हैं!

6. वातावरण निर्भरता

हम कुछ प्रोटोटाइप के लिए प्यार करते हैं, लेकिन हम उत्पादन संस्करण के लिए कुछ करना नहीं चाहते हैं। केवल डेवलपर्स के लिए या विकास मोड पर अपने टुकड़े को छिपाने या कुछ उपलब्ध करने के लिए कैसे?

अतिरिक्त संस्करण का उपयोग करें - अतिरिक्त चर जिसे आप शुरू या निर्माण के दौरान आप प्रोजेक्ट कर सकते हैं। जब आप टर्मिनल से कोई कार्रवाई शुरू कर रहे हैं, तो आप अतिरिक्त चर डाल सकते हैं जो नोड द्वारा ऐप में डाले जाते हैं। फिर आप कुछ भी धक्का दे सकते हैं।

पूर्व। MY_VARIABLE = "हैलो वर्ल्ड!" npm रन प्रारंभ

फिर process.env.MY_VARIABLE में हमें अपना मूल्य देखना चाहिए।

यदि आप क्रिएट-रिएक्शन-ऐप का उपयोग कर रहे हैं तो आपको NODE_ENV जैसा बिल्ड वैरिएबल मिला है जो आपके बिल्ड जैसे डेवलपमेंट, प्रोडक्शन या टेस्ट का रिटर्न मोड देता है। और यह सब बुनियादी उपयोग के लिए।

constDebug = process.env.NODE_ENV === 'विकास' है

व्यवहार में इसका उपयोग कैसे करें?

आयात प्रतिक्रिया, 'घटक' 'प्रतिक्रिया' से
constDebug = process.env.NODE_ENV === 'विकास' है
वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    वापसी (
      
        

यह मेरा सार्वजनिक पाठ है         {.Debug &&

यह मेरा विकास पाठ है }            )   } }

मुझे यकीन नहीं है कि यह एक PRO की तरह है, लेकिन आप ENV VARIABLE द्वारा कुछ पर्यावरण संवेदनशील informations जैसे API रूट url, या आप प्रोजेक्ट पता आदि पास कर सकते हैं।

** जरूरी **

यह मत भूलिए कि यदि कोई आपको स्रोत कोड को डीकोड करना चाहता है, तो वह आपको निर्भरताएं देख सकता है।

7. घटक परीक्षण की संभावनाओं के बारे में याद रखें

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

तो परीक्षण के लिए अपने घटकों को कैसे तैयार करें?

यदि आपके पास कोई HOC नहीं है, तो सामान्य रूप से निर्यात करें:

आयात प्रतिक्रिया, 'घटक' 'प्रतिक्रिया' से
वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    {नाम, आयु} = this.props दें
    वापसी 

मेरा नाम {नाम} है। मैं {आयु} वर्ष का हूं।   } }

निर्यात डिफ़ॉल्ट MyComponent

लेकिन अगर आप किसी HOC का उपयोग इस पैटर्न का उपयोग करना चाहते हैं:

आयात प्रतिक्रिया, 'घटक' 'प्रतिक्रिया' से
निर्यात वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    {नाम, आयु} = this.props दें
    वापसी 

मेरा नाम {नाम} है। मैं {आयु} वर्ष का हूं।   } }

निर्यात डिफ़ॉल्ट myHocFunction (MyComponent)

क्यों? क्योंकि जब आप एचओसी के साथ घटक अन्य दस्तावेज में आयात करना चाहते हैं तो आप उपयोग करते हैं:

MyComponent को './compenders/MyComponent' से आयात करें

लेकिन परीक्षणों में आप उपयोग कर सकते हैं

आयात {MyComponent} './compenders/MyComponent' से

सरल कोड, सरल समाधान लेकिन उपयोग करने के लिए कई संभावनाएं - क्योंकि निश्चित रूप से हम एक प्रो हैं;)

8. हेल्पर्स का इस्तेमाल करें

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

जनता
src
  सहायकों
    globals.js
  मॉड्यूल
    उपयोगकर्ता
      सहायकों
        index.js
      UserList.js
      User.js
  app.js

** जरूरी **
यदि आप अपना कोड डुप्लिकेट करते हैं - आपको इसे सुधारना चाहिए!

फ़ाइल पृथक्करण एक PRO की तरह बनने का सबसे अच्छा तरीका है!

9. प्रतिक्रिया टुकड़े

आपने अपना सर्वश्रेष्ठ लेआउट तैयार कर लिया है, एचटीएमएल मार्कअप सबसे अच्छा है, हर सोच बहुत सुंदर लगती है ... ARHHH AMAZING, बस रिएक्शन लागू करें ... हैडर ... एकदम सही लगता है ... jumbotron ... भयानक ... प्रतीक्षा करें ... मुझे एक सेक्शन मिला है जो लिपटा नहीं है - OH NO … प्रतिक्रिया… SHIT!

यह एक समस्या थी जब आप एक घटक बनाना चाहते हैं जिसमें कोई आवरण न हो। लंबे समय तक हमें सब कुछ लपेटने की जरूरत है:

वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    वापसी (
      
        

यह मेरा पहला पाठ है         

यह मेरा दूसरा पाठ है            )   } }

क्योंकि प्रतिक्रिया ने हमें इसे अकेले रखने की अनुमति नहीं दी थी क्यों - का उपयोग नहीं किया गया था यदि प्रत्येक तत्व के पास स्वयं की कुंजी है, तो यह पहचान सकता है कि DOM का कौन सा हिस्सा उसका घटक है।

BUT React ने "React Fragments" नाम से नई सुविधा जोड़ी है, जो आपको DOM में लपेटे बिना उस तत्व को समूह बनाने की अनुमति देता है। यह डिव रैपिंग जैसा ही काम करता है, लेकिन इसके बजाय हम उपयोग करते हैं स्टेटमेंट या शॉर्ट वर्जन <>

पूर्व।

वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    वापसी (
      
        

यह मेरा पहला पाठ है         

यह मेरा दूसरा पाठ है            )   } }

या

वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    वापसी (
      <>
        

यह मेरा पहला पाठ है         

यह मेरा दूसरा पाठ है            )   } }

कमाल है - आप एक प्रो की तरह हैं जो प्रलेखन से पूरा लेख पढ़ते हैं

10. प्रो प्रोप प्रॉप्स और डिफॉल्ट प्रॉप्स का इस्तेमाल करते हैं

यदि आप PRO हैं, तो आप उन चीजों के बारे में सोचते हैं, जिनकी आपको जरूरत है। मुझे PropTypes का उपयोग क्यों करना चाहिए?

विकास के दौरान आप सुनिश्चित कर सकते हैं कि आपके अन्य घटक उनके लिए उचित मूल्य से गुजरते हैं। यदि आप स्ट्रिंग का उपयोग करना चाहते हैं, तो आपके प्रॉपर में एक स्ट्रिंग होना चाहिए, क्योंकि पूर्व। आप स्ट्रिंग के लिए घटक विशिष्ट चीजों के अंदर कर सकते हैं। DefaultProps जोड़ना अगर आपके प्रोपाइप की आवश्यकता नहीं है, तो आप की रक्षा करें कि आप / या आपका प्रोजेक्ट कॉलेज घटक के लिए कुछ प्रोप जोड़ना भूल जाते हैं।

आयात प्रतिक्रिया, 'घटक' 'प्रतिक्रिया' से
आयात PropTypes 'प्रोप-प्रकार' से
वर्ग MyComponent घटक बढ़ाता है {
  प्रस्तुत करना() {
    वापसी 

हैलो {this.props.text.toLocaleUpperCase ()}   } }

MyComponent.propTypes = {
  पाठ: PropTypes.string
}
MyComponent.defaultProps = {
  पाठ: 'दुनिया'
}

और आप PropTypes के बारे में अधिक जानना चाहते हैं - पूर्ण प्रलेखन

सारांश

जैसा कि आप देख सकते हैं, कि आपके कोड को लागू करने के लिए 10 युक्तियाँ बहुत आसान हैं। इसे एक बार और पढ़ें, यदि आप इसे पसंद करते हैं तो प्रतिक्रिया जोड़ें और टिप्पणियों में लिखें कि क्या कुछ अस्पष्ट है या यदि आप कुछ और विशिष्ट के बारे में पढ़ना चाहते हैं! सौभाग्य!