सबसे लोकप्रिय फ्रंटएंड लाइब्रेरी के रूप में, हर कोई रिएक्ट सीखना चाहता है। ReactJS मूल रूप से JavaScript है। लेकिन इसका मतलब यह नहीं है कि ReactJS में जाने के लिए आपको जावास्क्रिप्ट में सब कुछ सीखना होगा। मौलिक जावास्क्रिप्ट अवधारणाओं को समझने से आपको रिएक्ट अवधारणाओं को और आसानी से समझने में मदद मिलेगी, और अंततः यह परियोजनाओं पर काम करने की आपकी क्षमता को गति देगा।
आइए रिएक्टजेएस पर जाने से पहले जावास्क्रिप्ट के बारे में आवश्यक अवधारणाओं की रूपरेखा तैयार करें।
1. तीर कार्य
रिएक्ट में एरो फ़ंक्शंस का व्यापक रूप से उपयोग किया जाता है। संस्करण 16.8 के अनुसार, रिएक्ट क्लास-आधारित घटकों से कार्यात्मक घटकों में चला गया। तीर कार्य करता है आपको एक छोटे सिंटैक्स के साथ फ़ंक्शन बनाने की अनुमति देता है।
आइए बताते हैं कि निम्नलिखित उदाहरणों में:
नियमित समारोह
समारोहअभिवादन() {
वापस करना'नमस्ते'
}
सांत्वना देना.लॉग (अभिवादन ()) //helloतीर समारोह
होने देना अभिवादन = () =>'नमस्ते'
सांत्वना देना.लॉग (अभिवादन ()) //helloउपरोक्त दो कार्यों का एक ही आउटपुट है, हालांकि सिंटैक्स अलग है। एरो फ़ंक्शन नियमित फ़ंक्शन की तुलना में छोटा और साफ दिखता है। आमतौर पर, रिएक्ट घटकों में निम्नलिखित संरचना होती है:
आयात प्रतिक्रिया से'प्रतिक्रिया'कॉन्स्ट किताब = () => {
वापस करना (
पुस्तक</div>)
}
निर्यातगलती करना किताब
एरो फ़ंक्शंस के नाम नहीं हैं। अगर आप इसे नाम देना चाहते हैं, तो इसे एक चर के लिए असाइन करें। एक नियमित और एक तीर फ़ंक्शन के बीच का अंतर केवल सिंटैक्स से अधिक है। में तीर के कार्यों के बारे में अधिक जानें mozilla डेवलपर्स के दस्तावेज।
2. विनाशकारी
Destructuring का उपयोग जटिल डेटा संरचनाओं से डेटा प्राप्त करने के लिए किया जाता है। जावास्क्रिप्ट में, सरणियाँ और वस्तुएँ कई मानों को संग्रहीत कर सकती हैं। आप मूल्यों में हेरफेर कर सकते हैं और उन्हें एप्लिकेशन के विभिन्न भागों में उपयोग कर सकते हैं।
इन मूल्यों को प्राप्त करने के लिए, आपको चर को नष्ट करना होगा। आप जिस डेटा संरचना के साथ काम कर रहे हैं, उसके आधार पर आप डॉट (।) नोटेशन या ब्रैकेट नोटेशन का उपयोग कर सकते हैं। उदाहरण के लिए:
कॉन्स्ट छात्र = {'नाम': 'मैरी',
'पता': 'साउथ पार्क, बेथलहम',
'आयु': 15
}
विनाशकारी:
सांत्वना देना.लॉग (छात्र.नाम) // आउटपुट मैरीउपरोक्त उदाहरण में, डॉट नोटेशन कुंजी 'नाम' के मान तक पहुँचता है। ReactJS में, आप अपने एप्लिकेशन में मान प्राप्त करने और साझा करने के लिए विनाशकारी अवधारणा का उपयोग करेंगे। विनाश पुनरावृत्ति से बचने में मदद करता है और आपके कोड को अधिक पठनीय बनाता है।
3. सरणी के तरीके
रिएक्ट परियोजनाओं पर काम करते समय आपको कई बार सरणियों का सामना करना पड़ेगा। एक सरणी डेटा का एक संग्रह है। आप डेटा को सरणियों में संग्रहीत करते हैं, ताकि आवश्यकता पड़ने पर आप उनका पुन: उपयोग कर सकें।
ऐरे विधियों का उपयोग मुख्य रूप से डेटा में हेरफेर करने, पुनः प्राप्त करने और प्रदर्शित करने के लिए किया जाता है। कुछ आमतौर पर इस्तेमाल की जाने वाली सरणी विधियाँ हैं नक्शा(), फ़िल्टर (), और कम करना(). से आप अवश्य परिचित होंगे सरणी के तरीके यह समझने के लिए कि प्रत्येक को कब लागू करना है।
उदाहरण के लिए, द नक्शा() विधि सरणी में सभी वस्तुओं पर पुनरावृत्त करती है। यह एक नई सरणी बनाने के लिए सरणी के प्रत्येक तत्व पर कार्य करता है।
कॉन्स्ट संख्या = [9, 16, 25, 36];
कॉन्स्ट वर्गअर्र = संख्या.नक्शा (गणित.sqrt) // 3,4,5,6
आप ReactJS में सरणी विधियों का बहुत उपयोग करेंगे। आप उनका उपयोग सरणियों को तार में बदलने, जुड़ने, आइटम जोड़ने और अन्य सरणियों से आइटम हटाने के लिए करेंगे।
4. लघु सशर्त
कंडिशनल वे स्टेटमेंट हैं जिनका उपयोग जावास्क्रिप्ट कोड में निर्णय लेने के लिए करता है। लघु सशर्त में && (और), II (या), और टर्नरी ऑपरेटर शामिल हैं। ये शर्तों की छोटी अभिव्यक्तियाँ हैं और if/else स्टेटमेंट हैं।
निम्न उदाहरण दिखाता है कि टर्नरी ऑपरेटर का उपयोग कैसे करें।
if/else स्टेटमेंट वाला कोड:
समारोहखुलने का समय(दिन) {
अगर (दिन == रविवार) {
वापस करना12;
}
अन्य {
वापस करना9;
}
}टर्नरी ऑपरेटर के साथ कोड:
समारोहखुलने का समय(दिन) {
वापस करना दिन == रविवार? 12: 9;
}के बारे में जानना विभिन्न प्रकार की शर्तें छोटी शर्तों पर विशेष ध्यान देने के साथ। रिएक्ट में इनका व्यापक रूप से उपयोग किया जाता है।
5. टेम्पलेट शाब्दिक
टेम्प्लेट लिटरल स्ट्रिंग को परिभाषित करने के लिए बैक-टिक (``) का उपयोग करते हैं। टेम्प्लेट शाब्दिक आपको स्ट्रिंग डेटा में हेरफेर करने की अनुमति देते हैं जिससे वे अधिक गतिशील हो जाते हैं। टैग किए गए टेम्प्लेट शाब्दिक आपको एक स्ट्रिंग के भीतर संचालन करने की अनुमति देते हैं। ये शर्तों की छोटी अभिव्यक्तियाँ हैं और if/else स्टेटमेंट हैं।
उदाहरण के लिए:
होने देना पहला नाम = "जेन";होने देना अंतिम नाम = "डो";
होने देना पाठ = 'स्वागत है ${firstName}, ${lastName}!`; // आपका स्वागत है जेन डो!
6. प्रसार ऑपरेटरों
स्प्रेड ऑपरेटर (...) किसी ऑब्जेक्ट या सरणी के मानों को दूसरे में कॉपी करता है। इसके सिंटैक्स में तीन डॉट्स होते हैं जिसके बाद वेरिएबल का नाम होता है। उदाहरण के लिए (... नाम)। यह दो सरणियों या वस्तुओं के गुणों को मिला देता है।
निम्न उदाहरण दिखाता है कि एक चर के मानों को दूसरे में कॉपी करने के लिए स्प्रेड ऑपरेटर का उपयोग कैसे करें।
कॉन्स्ट नाम = ['मैरी', 'जेन'];
कॉन्स्ट समूह सदस्य = ['फ्रेड',... नाम, 'एंजेला']; // ["फ्रेड", "मैरी", "जेन", "एंजेला"]
आप कई ऑपरेशन करने के लिए स्प्रेड ऑपरेटर का उपयोग कर सकते हैं। इनमें एक सरणी की सामग्री को कॉपी करना, एक सरणी को दूसरे में सम्मिलित करना, नेस्टेड सरणियों तक पहुँचना और तर्कों के रूप में सरणियों को पास करना शामिल है। आप घटकों में स्थिति परिवर्तन को संभालने के लिए ReactJS में स्प्रेड ऑपरेटर का उपयोग कर सकते हैं।
रिएक्टजेएस क्यों सीखें?
ReactJS अच्छे कारणों से लोकप्रिय है। इसमें एक छोटा सीखने की अवस्था है, विश्वसनीय है, और जल्दी से DOM को प्रस्तुत करता है। यह स्टैंडअलोन घटकों का समर्थन करता है और इसमें उत्कृष्ट डिबगिंग टूल हैं।
ReactJS ECMAScript 6 (ES6) से नई जावास्क्रिप्ट अवधारणाओं को शामिल करता है। जावास्क्रिप्ट में मूलभूत अवधारणाओं को सीखने से रिएक्टजेएस में परियोजनाओं को विकसित करना आसान हो जाएगा।
इन सबसे ऊपर, ReactJS के पास एक महान समुदाय है जो लगातार नए अपडेट जारी कर रहा है। यदि आप जावास्क्रिप्ट लाइब्रेरी सीखना चाहते हैं, तो ReactJS एक बढ़िया विकल्प होगा। Next.js फ्रेमवर्क ReactJS की सीमाओं को पूरा करता है। दोनों का संयोजन ReactJS को एक शक्तिशाली फ्रंट-एंड लाइब्रेरी बनाता है।
