jQuery और रिएक्ट दोनों फ्रंट-एंड डेवलपमेंट के लिए लोकप्रिय जावास्क्रिप्ट लाइब्रेरी हैं। जबकि jQuery एक DOM हेरफेर लाइब्रेरी है, रिएक्ट यूजर इंटरफेस बनाने के लिए एक जावास्क्रिप्ट लाइब्रेरी है।
किसी मौजूदा ऐप को jQuery से रिएक्ट में माइग्रेट करने का तरीका जानें।
jQuery बनाम। प्रतिक्रिया दें?
जब jQuery और रिएक्ट के बीच चयन करने की बात आती है, तो यह आपकी आवश्यकताओं और प्राथमिकताओं पर निर्भर करता है। यदि आप एक ऐसी लाइब्रेरी की तलाश कर रहे हैं जिसका उपयोग करना आसान हो और जिसमें एक बड़ा समुदाय हो, तो jQuery एक अच्छा विकल्प है। लेकिन अगर आप एक ऐसे पुस्तकालय की तलाश कर रहे हैं जो बड़े पैमाने पर विकास के लिए अधिक अनुकूल हो, तो रिएक्ट बेहतर विकल्प है।
JQuery से प्रतिक्रिया के लिए माइग्रेट क्यों करें?
आप अपने ऐप को jQuery से React में माइग्रेट करने के कई कारण हो सकते हैं।
- प्रतिक्रिया jQuery से तेज है: अगर हम कच्चे प्रदर्शन के बारे में बात कर रहे हैं, तो रिएक्ट jQuery से तेज है। ऐसा इसलिए है क्योंकि रिएक्ट वर्चुअल डोम का उपयोग करता है, जो वास्तविक डोम का जावास्क्रिप्ट प्रतिनिधित्व है। इसका मतलब यह है कि जब कोई उपयोगकर्ता रिएक्ट एप्लिकेशन के साथ इंटरैक्ट करता है, तो DOM के केवल वे हिस्से जो बदलते हैं, अपडेट होंगे। यह jQuery के पूर्ण डोम मैनिपुलेशन से अधिक कुशल है।
- प्रतिक्रिया अधिक रखरखाव योग्य है: रिएक्ट में माइग्रेट करने का एक और कारण यह है कि यह jQuery की तुलना में अधिक रखरखाव योग्य है। ऐसा इसलिए है क्योंकि रिएक्ट घटक स्व-निहित हैं इसलिए आप उनका आसानी से पुन: उपयोग कर सकते हैं। इसका मतलब यह है कि अगर आपको किसी रिएक्ट कंपोनेंट में बदलाव करने की जरूरत है, तो आप बाकी कोडबेस को प्रभावित किए बिना ऐसा कर सकते हैं।
- प्रतिक्रिया अधिक स्केलेबल है: अंत में, प्रतिक्रिया jQuery की तुलना में अधिक मापनीय है। यह एक घटक-आधारित आर्किटेक्चर का उपयोग करता है, जो कि jQuery के मोनोलिथिक दृष्टिकोण से अधिक स्केलेबल है। इसका मतलब है कि आप रिएक्ट एप्लिकेशन को आवश्यकतानुसार आसानी से बढ़ा और संशोधित कर सकते हैं।
- रिएक्ट को यूनिट परीक्षण के लिए बेहतर समर्थन प्राप्त है: जब इकाई परीक्षण की बात आती है, तो रिएक्ट को jQuery की तुलना में बेहतर समर्थन मिलता है। क्योंकि आप रिएक्ट घटकों को आसानी से अलग कर सकते हैं, इसलिए उनके लिए यूनिट टेस्ट लिखना आसान है।
अपने ऐप को jQuery से प्रतिक्रिया में माइग्रेट कैसे करें
अगर आप अपने ऐप को jQuery से रिएक्ट में माइग्रेट करने की योजना बना रहे हैं, तो आपको कुछ बातों का ध्यान रखना होगा। यह जानना महत्वपूर्ण है कि आपको क्या शुरू करने की आवश्यकता है और यह जानने के लिए कि आप अपने आवेदन के अलग-अलग हिस्सों को कैसे माइग्रेट कर सकते हैं।
आवश्यक शर्तें
इससे पहले कि आप माइग्रेशन प्रक्रिया प्रारंभ करें, चीज़ें सेट करने के लिए आपको कुछ चीज़ें करनी होंगी. सबसे पहले, आपको चाहिए एक रिएक्ट एप्लिकेशन बनाएं क्रिएट-रिएक्शन-ऐप का उपयोग करना।
आपके द्वारा इन निर्भरताओं को स्थापित करने के बाद, आपको एक फ़ाइल बनाने की आवश्यकता है, जिसे index.js आप में स्रोत निर्देशिका। यह फ़ाइल आपके रिएक्ट एप्लिकेशन के लिए प्रवेश बिंदु होगी।
अंत में, आप अपने कोडबेस के अलग-अलग हिस्सों पर जा सकते हैं और उन्हें तदनुसार अपडेट कर सकते हैं।
1. आयोजनों को संभालना
JQuery में, आप ईवेंट को तत्वों से जोड़ सकते हैं। उदाहरण के लिए, यदि आपके पास एक बटन है, तो आप उसमें एक क्लिक ईवेंट संलग्न कर सकते हैं। जब कोई बटन क्लिक करता है, तो ईवेंट हैंडलर चलेगा।
$ ("बटन")। क्लिक करें (समारोह() {
// कुछ करो
});प्रतिक्रिया घटनाओं को अलग तरह से संभालती है। घटनाओं को तत्वों से जोड़ने के बजाय, आप उन्हें घटकों में परिभाषित करते हैं। उदाहरण के लिए, यदि आपके पास एक बटन है, तो आप घटक में क्लिक ईवेंट को परिभाषित करेंगे:
कक्षाबटनका विस्तारप्रतिक्रिया.अवयव{
हैंडलक्लिक () {
// कुछ करो
}
प्रदान करना() {
वापस करना (
<बटन onClick={this.handleClick}>
मुझे क्लिक करें!
</button>
);
}
}यहां, बटन घटक में हैंडलक्लिक () विधि की परिभाषा शामिल है। जब कोई बटन क्लिक करेगा, तो यह विधि चलेगी।
प्रत्येक विधि के अपने पेशेवरों और विपक्ष हैं। JQuery में, घटनाओं को जोड़ना और हटाना आसान है। हालाँकि, यदि आपके पास बहुत सारी घटनाएँ हैं, तो उन पर नज़र रखना मुश्किल हो सकता है। रिएक्ट में, आप घटनाओं को घटकों में परिभाषित करते हैं, जिससे उन पर नज़र रखना आसान हो जाता है। लेकिन इन्हें लगाना और हटाना इतना आसान नहीं है।
यदि आप रिएक्ट का उपयोग कर रहे हैं, तो आपको नई ईवेंट हैंडलिंग विधि का उपयोग करने के लिए अपना कोड अपडेट करना होगा। आप जिस प्रत्येक घटना को संभालना चाहते हैं, उसके लिए आपको घटक में एक विधि को परिभाषित करने की आवश्यकता होगी। ईवेंट ट्रिगर होने पर यह विधि चलेगी।
2. प्रभाव
JQuery में, आप तत्व को दिखाने या छिपाने के लिए .show() या .hide() विधियों का उपयोग कर सकते हैं। उदाहरण के लिए:
$("#तत्व")।दिखाना();प्रतिक्रिया में, आप राज्य का प्रबंधन करने के लिए useState() हुक का उपयोग कर सकते हैं। उदाहरण के लिए, यदि आप किसी तत्व को दिखाना या छिपाना चाहते हैं, तो आप घटक में स्थिति को परिभाषित करेंगे:
आयात {यूज़स्टेट} से "प्रतिक्रिया";
समारोहअवयव() {
कॉन्स्ट [isShown, setIsShown] = useState(असत्य);
वापस करना (
<डिव>
{दिखाई जा रही है &&<डिव>नमस्ते!</div>}
<बटन ऑनक्लिक = {() => सेटआईशोउन(!इज़शोउन)}>
टॉगल
</button>
</div>
);
}यह कोड isShown स्थिति चर और setIsShown() फ़ंक्शन को परिभाषित करता है। रिएक्ट किया है विभिन्न प्रकार के हुक जिसे आप अपने ऐप में उपयोग कर सकते हैं, जिनमें से एक है। जब कोई उपयोगकर्ता बटन पर क्लिक करता है, तो दिखाया गया राज्य चर अद्यतन होता है और तत्व केवल उपयुक्त होने पर प्रदर्शित होता है।
JQuery में, प्रभावों का उपयोग करना आसान है और वे अच्छी तरह से काम करते हैं। हालांकि, यदि आपके पास उनमें से बहुत कुछ है तो उन्हें प्रबंधित करना मुश्किल हो सकता है। रिएक्ट में, प्रभाव घटकों के अंदर रहते हैं जो उपयोग करने में आसान नहीं होने पर उन्हें प्रबंधित करना आसान बना सकते हैं।
3. डेटा लाना
JQuery में, आप डेटा लाने के लिए $.ajax() विधि का उपयोग कर सकते हैं। उदाहरण के लिए, यदि आप कुछ JSON डेटा प्राप्त करना चाहते हैं, तो आप ऐसा कर सकते हैं:
$ .अजाक्स ({
यूआरएल: "https://example.com/data.json",
डेटा प्रकार: "json",
सफलता: समारोह(आंकड़े) {
// करना कुछ साथ आंकड़े
}
});रिएक्ट में, आप डेटा लाने के लिए फ़ेच () विधि का उपयोग कर सकते हैं। यहां बताया गया है कि आप इस विधि का उपयोग करके JSON डेटा कैसे प्राप्त कर सकते हैं:
लाना("https://example.com/data.json")
तब (प्रतिक्रिया => प्रतिक्रिया.जेसन ())
तब (डेटा => {
// करना कुछ साथ आंकड़े
});
JQuery में, $.ajax() विधि का उपयोग करना आसान है। हालाँकि, त्रुटियों को संभालना मुश्किल हो सकता है। रिएक्ट में, फ़ेच () विधि अधिक वर्बोज़ है, लेकिन त्रुटियों को संभालना आसान है।
4. सीएसएस
JQuery में, आप पेज द्वारा सीएसएस निर्दिष्ट कर सकते हैं। उदाहरण के लिए, यदि आप किसी पृष्ठ के सभी बटनों को शैलीबद्ध करना चाहते हैं, तो आप बटन तत्व को लक्षित करके ऐसा कर सकते हैं:
बटन {
पृष्ठभूमि-रंग: लाल;
रंग सफेद;
}रिएक्ट में, आप CSS का विभिन्न तरीकों से उपयोग कर सकते हैं। इनलाइन शैलियों का उपयोग करने का एक तरीका है। उदाहरण के लिए, यदि आप किसी बटन को शैली देना चाहते हैं, तो आप तत्व में शैली विशेषता जोड़कर ऐसा कर सकते हैं:
<बटन शैली = {{पृष्ठभूमि रंग: 'लाल', रंग: 'सफ़ेद'}}>
मुझे क्लिक करें!
</button>रिएक्ट घटकों को स्टाइल करने का एक अन्य तरीका वैश्विक शैलियों का उपयोग करना है। वैश्विक शैलियाँ CSS नियम हैं जिन्हें आप एक घटक के बाहर परिभाषित करते हैं और अनुप्रयोग में सभी घटकों पर लागू होते हैं। ऐसा करने के लिए, आप स्टाइल-घटकों की तरह CSS-in-JS लाइब्रेरी का उपयोग कर सकते हैं:
आयात स्टाइल से 'स्टाइल-घटक';
कॉन्स्ट बटन = स्टाइल.बटन`
पृष्ठभूमि-रंग: लाल;
रंग सफेद;
`;इनलाइन शैलियों और वैश्विक शैलियों के बीच कोई सही या गलत विकल्प नहीं है। यह वास्तव में आपकी आवश्यकताओं पर निर्भर करता है। सामान्य तौर पर, छोटी परियोजनाओं के लिए इनलाइन शैलियों का उपयोग करना आसान होता है। बड़ी परियोजनाओं के लिए, वैश्विक शैलियाँ एक बेहतर विकल्प हैं।
आसानी से अपने रिएक्ट ऐप को तैनात करें
रिएक्ट के सबसे महत्वपूर्ण लाभों में से एक यह है कि अपने रिएक्ट ऐप को तैनात करना बहुत आसान है। आप किसी भी स्थिर वेब सर्वर पर रिएक्ट को तैनात कर सकते हैं। आपको केवल वेबपैक जैसे टूल का उपयोग करके अपने कोड को संकलित करने की आवश्यकता है, और फिर परिणामी बंडल.जेएस फ़ाइल को अपने वेब सर्वर पर रखें।
आप अपने रिएक्ट ऐप को गिटहब पेजों पर मुफ्त में होस्ट कर सकते हैं।
