रिएक्ट में एक साधारण काउंटर ऐप कैसे बनाएं

रिएक्ट सबसे लोकप्रिय फ्रंट-एंड जावास्क्रिप्ट लाइब्रेरी में से एक है। कई कंपनियां अपने यूजर इंटरफेस को विकसित करने के लिए रिएक्ट का उपयोग करती हैं और इसे डेवलपर्स के बीच व्यापक लोकप्रियता मिली है।

रिएक्ट के साथ एक साधारण प्रोग्राम बनाना आसान है, जैसे यह बेसिक काउंटर ऐप। एक सीधे-सादे ट्यूटोरियल के साथ शुरू करने से आपको रिएक्ट के कुछ बुनियादी लेकिन महत्वपूर्ण अवधारणाओं को समझने में मदद मिलेगी।

काउंटर ऐप की विशेषताएं

इस परियोजना में, आप निम्नलिखित सुविधाओं के साथ एक काउंटर एप्लिकेशन विकसित करने जा रहे हैं:

1. गिनती बटन बढ़ाएँ: इससे गिनती एक से बढ़ जाएगी।
2. गिनती बटन घटाएं: इससे गिनती एक से कम हो जाएगी।
3. बटन को रीसेट करें: यह गिनती को शून्य पर सेट कर देगा।

प्रतिक्रिया की बुनियादी अवधारणाएँ

आगे बढ़ने से पहले, आपको रिएक्ट में इन बुनियादी अवधारणाओं में से कुछ को समझने की जरूरत है जो आप इस परियोजना में उपयोग करेंगे:

1. अवयव: घटक रिएक्ट अनुप्रयोगों के मुख्य निर्माण खंड हैं। उनमें स्वतंत्र, पुन: प्रयोज्य कोड होता है। घटकों का उपयोग करके आप यूजर इंटरफेस को अलग-अलग हिस्सों में विभाजित कर सकते हैं। फिर आप उन हिस्सों का पुन: उपयोग कर सकते हैं और उनके साथ स्वतंत्र रूप से काम कर सकते हैं।
   instagram viewer
2. राज्य: प्रतिक्रिया में आप किसी घटक की स्थिति का प्रतिनिधित्व करने वाले डेटा को संग्रहीत करने के लिए किसी ऑब्जेक्ट का उपयोग कर सकते हैं। यह घटकों को अपने स्वयं के डेटा को प्रबंधित और अद्यतन करने की अनुमति देता है। एक घटक की स्थिति निर्धारित करती है कि यह कैसे प्रस्तुत करता है और व्यवहार करता है।
3. कार्यात्मक घटक: रिएक्ट का कार्यात्मक घटक केवल एक जावास्क्रिप्ट फ़ंक्शन है जो प्रॉप्स को एक तर्क के रूप में स्वीकार करता है और एक रिएक्ट तत्व (JSX) देता है।
4. रंगमंच की सामग्री: आप प्रॉप्स का उपयोग कर सकते हैं - "प्रॉपर्टीज" के लिए छोटा - पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट तक डेटा पास करने के लिए। प्रॉप्स रिएक्ट के अभिन्न अंगों में से एक हैं और आप कर सकते हैं रिएक्ट में कई ऑपरेशन करने के लिए प्रॉप्स का उपयोग करें.
5. हुक्स: रिएक्ट हुक अंतर्निहित कार्य हैं जो आपको कार्यात्मक घटकों के अंदर जीवनचक्र विधियों जैसे राज्य और अन्य रिएक्ट सुविधाओं का प्रबंधन करने की अनुमति देता है। वे आपको संक्षिप्त और स्पष्ट कोड लिखने में भी मदद कर सकते हैं। आप जल्द ही देखेंगे कि आप इसके साथ स्थिति को कैसे प्रबंधित कर सकते हैं यूज़स्टेट () अंकुश।

इस परियोजना में प्रयुक्त कोड एक में उपलब्ध है गिटहब रिपॉजिटरी और आपके लिए एमआईटी लाइसेंस के तहत उपयोग करने के लिए स्वतंत्र है।

चरण 1: परियोजना की स्थापना

अपना टर्मिनल खोलें और आरंभ करने के लिए निम्नलिखित कमांड चलाएँ:

npx बनाएं-प्रतिक्रिया-ऐप प्रतिक्रिया-काउंटर-ऐप

यह करेगा एक नया रिएक्शन ऐप बनाएं, आपके साथ अपना प्रोजेक्ट बनाना शुरू करने के लिए तैयार है। यह कई फाइलों और फ़ोल्डरों के साथ फाइल सिस्टम संरचना उत्पन्न करेगा।

विकास सर्वर शुरू करने के लिए टर्मिनल में निम्नलिखित कमांड चलाएँ:

NPM शुरू

उस आदेश को इंगित करते हुए, आपके ब्राउज़र में एक नया टैब खोलना चाहिए http://localhost: 3000. प्रोजेक्ट में आप जो भी बदलाव करेंगे, वे यहां अपने आप अपडेट हो जाएंगे।

चरण 2: काउंटर एप्लिकेशन का कंकाल बनाना

खोलें src/App.js फाइल करें और वहां मौजूद सभी बाय-डिफॉल्ट कोड को हटा दें। अब, निम्नलिखित कोड का उपयोग करके एप्लिकेशन का एक ढांचा बनाएं:

आयात प्रतिक्रिया, {useState} से"प्रतिक्रिया";
समारोहअनुप्रयोग() {
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0);
होने देना वृद्धि गणना = () => {
// बाद में जोड़ने के लिए
 };
होने देना कमी गिनती = () => {
// बाद में जोड़ने के लिए
 };
होने देना रीसेटकाउंट = () => {
// बाद में जोड़ने के लिए
 }
वापस करना (
<डिवकक्षा का नाम="अनुप्रयोग">
<पी>गणना: {गिनती}पी>
<डिवकक्षा का नाम="बटन">
डिव>
डिव>
);
}
निर्यातगलती करना अनुप्रयोग;

पहला बयान आयात करता है useState हुक से प्रतिक्रिया मापांक। बनाने के लिए इसका इस्तेमाल करें गिनती करना राज्य और इसे 0 पर प्रारंभ करें। आप का मान बदल सकते हैं गिनती करना का उपयोग setCount समारोह।

आप उपयोग करेंगे incrementCount, decrementCount, और रीसेटकाउंट काउंटर के मूल्य को बढ़ाने, घटाने और रीसेट करने के लिए बाद में कार्य करता है।

आप मार्कअप में काउंट वेरिएबल के आसपास उपयोग किए गए कर्ली ब्रैकेट्स { } को देख सकते हैं। यह अनिवार्य रूप से JSX पार्सर को यह जानने देता है कि उसे उन ब्रेसिज़ के अंदर सामग्री को जावास्क्रिप्ट के रूप में व्यवहार करना चाहिए।

चरण 3: काउंटर एप्लिकेशन में कार्यक्षमता जोड़ना

काउंटर एप्लिकेशन की कार्यक्षमता को लागू करने के लिए आपको तीन बटन बनाने होंगे: डिक्रीमेंट काउंट बटन, इंक्रीमेंट काउंट बटन और रीसेट बटन। के अंदर निम्न कोड जोड़ें बटन डिव:

<बटनशीर्षक={"घटती"} कार्य={decrementCount} />
<बटनशीर्षक={"वेतन वृद्धि"} कार्य={incrementCount} />
<बटनशीर्षक={"रीसेट"} कार्य={रीसेटकाउंट} />

जब आप इन बटनों पर क्लिक करते हैं, तो decrementCount, incrementCount, और रीसेटकाउंट कार्य चलेंगे। ध्यान दें कि आप पास कर रहे हैं शीर्षक और कार्य माता-पिता से सहारा अनुप्रयोग बच्चे के लिए घटक बटन अवयव।

में इन कार्यों को अद्यतन करें ऐप.जेएस फ़ाइल निम्न कोड के साथ:

होने देना वृद्धि गणना = () => {
 सेटकाउंट (गिनती + 1);
};
होने देना कमी गिनती = () => {
 सेटकाउंट (गिनती - 1);
};
होने देना रीसेटकाउंट = () => {
 सेटकाउंट (0);
}

setCount समारोह की स्थिति को अद्यतन करेगा गिनती करना.

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

में निम्न कोड जोड़ें घटक/बटन.जेएस फ़ाइल:

आयात प्रतिक्रिया से"प्रतिक्रिया";
समारोहबटन(रंगमंच की सामग्री) {
होने देना {कार्रवाई, शीर्षक} = सहारा;
वापस करना<बटनक्लिक पर={कार्य}>{शीर्षक}बटन>;
}
निर्यातगलती करना बटन;

बटन घटक सहारा के माध्यम से डेटा प्राप्त करता है। फ़ंक्शन तब इन प्रॉप्स को अलग-अलग वेरिएबल्स में सेट करता है, उनका उपयोग मार्कअप को पॉप्युलेट करने के लिए करता है।

वेतन वृद्धि, कमी और रीसेट बटन बनाने के लिए कोड इस घटक का तीन बार पुन: उपयोग करता है।

अंत में, बटन घटक को शीर्ष पर आयात करें ऐप.जेएस निम्नलिखित कोड का उपयोग कर पेज:

आयात बटन से"./घटक/बोतल";

फाइनल कोड इस तरह दिखेगा ऐप.जेएस फ़ाइल:

आयात प्रतिक्रिया, {useState} से"प्रतिक्रिया";
आयात बटन से"./घटक/बटन";
समारोहअनुप्रयोग() {
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0);
होने देना वृद्धि गणना = () => {
 सेटकाउंट (गिनती + 1);
 };
होने देना कमी गिनती = () => {
 सेटकाउंट (गिनती - 1);
 };
होने देना रीसेटकाउंट = () => {
 सेटकाउंट (0);
 }
वापस करना (
<डिवकक्षा का नाम="अनुप्रयोग">
<पी>गणना: {गिनती}पी>
<डिवकक्षा का नाम="बटन">
<बटनशीर्षक={"घटती"} कार्य={decrementCount} />
<बटनशीर्षक={"वेतन वृद्धि"} कार्य={incrementCount} />
<बटनशीर्षक={"रीसेट"} कार्य={रीसेटकाउंट} />
डिव>
डिव>
 );
}
निर्यातगलती करना अनुप्रयोग;

सर्वोत्तम प्रतिक्रिया प्रथाओं का पालन करें

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

आप रिएक्ट समुदाय द्वारा सुझाई गई कई रिएक्ट प्रथाओं का पालन कर सकते हैं जैसे दोहराए जाने वाले कोड से बचना, प्रत्येक रिएक्ट घटक के लिए परीक्षण लिखना, प्रॉप्स के लिए ऑब्जेक्ट डिस्ट्रक्टिंग का उपयोग करना और नामकरण के बाद सम्मेलनों।