इस क्लासिक, आसानी से समझ में आने वाले नमूना ऐप के साथ अपने रिएक्ट कौशल का अभ्यास करें।

रिएक्ट जैसी नई तकनीक सीखना बिना व्यावहारिक अनुभव के भ्रमित करने वाला हो सकता है। एक डेवलपर के रूप में, वास्तविक दुनिया की परियोजनाएं बनाना अवधारणाओं और सुविधाओं को समझने के सबसे प्रभावी तरीकों में से एक है।

रिएक्ट के साथ एक सरल कार्य सूची बनाने की प्रक्रिया का पालन करें, और रिएक्ट के बुनियादी सिद्धांतों के बारे में अपनी समझ बढ़ाएं।

टू-डू सूची बनाने के लिए पूर्वापेक्षाएँ

इस परियोजना को शुरू करने से पहले, कई आवश्यकताएँ हैं। आपको निम्नलिखित की बुनियादी समझ होनी चाहिए, HTML, CSS, JavaScript, ES6, और प्रतिक्रिया करें। आपके पास Node.js और होना चाहिए एनपीएम, जावास्क्रिप्ट पैकेज मैनेजर. आपको विज़ुअल स्टूडियो कोड जैसे एक कोड संपादक की भी आवश्यकता है।

यहां वह सीएसएस है जिसका उपयोग यह प्रोजेक्ट करेगा:

/* शैलियाँ.सीएसएस */
।अनुप्रयोग {
फुहारा परिवार: सान्स सेरिफ़;
दिखाना: मोड़ना;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
ऊंचाई: 100वी.एच;
}
।ऐसा करने के लिए {
पृष्ठभूमि का रंग: गेहूँ;
पाठ संरेखित: केंद्र;
चौड़ाई: 50%;
गद्दी: 20पिक्सल;
डब्बे की छाया: आरजीबीए(0, 0, 0, 0.24) 0पिक्सल 3पिक्सल 8पिक्सल;
अंतर: ऑटो;
}







instagram viewer



उल {
सूची-शैली-प्रकार: कोई नहीं;
गद्दी: 10पिक्सल;
अंतर: 0;
}


बटन {
चौड़ाई: 70पिक्सल;
ऊंचाई: 35पिक्सल;
पृष्ठभूमि का रंग: रेतीला भूरा;
सीमा: कोई नहीं;
फ़ॉन्ट आकार: 15पिक्सल;
फ़ॉन्ट वजन: 800;
बॉर्डर-त्रिज्या: 4पिक्सल;
डब्बे की छाया: आरजीबीए(0, 0, 0, 0.24) 0पिक्सल 3पिक्सल 8पिक्सल;
}


.इनपुट {
सीमा: कोई नहीं;
चौड़ाई: 340पिक्सल;
ऊंचाई: 35पिक्सल;
बॉर्डर-त्रिज्या: 9पिक्सल;
पाठ संरेखित: केंद्र;
डब्बे की छाया: आरजीबीए(0, 0, 0, 0.24) 0पिक्सल 3पिक्सल 8पिक्सल;
}


।ऊपर {
दिखाना: मोड़ना;
औचित्य-सामग्री: केंद्र;
अंतर: 12पिक्सल;
}


ली {
दिखाना: मोड़ना;
औचित्य-सामग्री: स्थान-समान रूप से;
संरेखित-आइटम: केंद्र;
गद्दी: 10पिक्सल;
}
ली:पहले {
संतुष्ट: "*";
मार्जिन-सही: 5पिक्सल;
}

1. प्रोजेक्ट वातावरण स्थापित करें

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

एनपीएक्स क्रिएट-रिएक्शन-ऐप टूडू-लिस्ट

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

इस आदेश का उपयोग करके अपने नव निर्मित प्रोजेक्ट की निर्देशिका पर नेविगेट करें:

सीडी कार्य-सूची

इस आदेश के साथ अपना प्रोजेक्ट स्थानीय रूप से चलाएँ:

एनपीएम प्रारंभ

और फिर प्रोजेक्ट को अपने ब्राउज़र में देखें http://localhost: 3000/.

आपके प्रोजेक्ट के src फ़ोल्डर में, कुछ फ़ाइलें हैं जिनकी आपको आवश्यकता नहीं है। ये फ़ाइलें हटाएँ: ऐप.सीएसएस, App.test.js, लोगो.एसवीजी, रिपोर्टवेबविटल्स.जेएस, setupTests.js.

सुनिश्चित करें कि आप उपलब्ध फ़ाइलों में आयात विवरण देखें और हटाई गई फ़ाइलों के किसी भी संदर्भ को हटा दें।

2. एक TodoList घटक बनाएं

यह वह घटक है जिसे हम टू-डू सूची के लिए आवश्यक सभी कोड लागू करेंगे। अपने src फ़ोल्डर में "TodoList.js" नाम की एक फ़ाइल बनाएं। फिर यह जांचने के लिए कि सब कुछ उसी तरह काम कर रहा है जैसे उसे करना चाहिए, निम्नलिखित कोड जोड़ें:

आयात प्रतिक्रिया से'प्रतिक्रिया';
कॉन्स्ट कार्य सूची = () => {
वापस करना (




हेलो वर्ल्ड </h2>
 </div>
 );
};


निर्यातगलती करना करने के लिए सूची;

अपनी App.js फ़ाइल खोलें, TodoList घटक आयात करें, और इसे App घटक के अंदर प्रस्तुत करें। यह कुछ इस तरह दिखेगा:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात'./styles.css'
आयात करने के लिए सूची से'।/करने के लिए सूची';
कॉन्स्ट ऐप = () => {
वापस करना (





 </div>
 );
};
निर्यातगलती करना अनुप्रयोग;

अपने स्थानीय ब्राउज़र पर जाएं जिसमें लोकलहोस्ट: 3000 चल रहा है और "हैलो वर्ल्ड" को स्पष्ट रूप से लिखा हुआ देखने के लिए जांचें। सब अच्छा? अगले चरण के लिए.

3. इनपुट और इनपुट परिवर्तन को संभालें

जब आप इनपुट बॉक्स में कोई कार्य टाइप करते हैं तो यह चरण आपको एक ईवेंट ट्रिगर करने में सक्षम बनाता है। अपने रिएक्ट पैकेज से यूज़स्टेट हुक आयात करें। यूज़स्टेट एक रिएक्ट हुक है जो आपको राज्य को कुशलतापूर्वक प्रबंधित करने देता है.

आयात प्रतिक्रिया, { उपयोग राज्य } से'प्रतिक्रिया';

एक खाली स्ट्रिंग के प्रारंभिक मान के साथ "इनपुटटास्क" नामक एक स्टेट वेरिएबल बनाने के लिए यूज़स्टेट हुक का उपयोग करें। इसके अलावा, उपयोगकर्ता इनपुट के आधार पर "इनपुटटास्क" के मान को अपडेट करने के लिए "सेटइनपुटटास्क" फ़ंक्शन असाइन करें।

कॉन्स्ट [इनपुटटास्क, सेटइनपुटटास्क] = यूज़स्टेट("");

इवेंट पैरामीटर लेते हुए "हैंडलइनपुटचेंज" नामक एक फ़ंक्शन बनाएं। इसे setInputTask फ़ंक्शन का उपयोग करके इनपुटटास्क स्थिति को अपडेट करना चाहिए। इवेंट के लक्ष्य के मूल्य को इवेंट.टार्गेट.वैल्यू के साथ एक्सेस करें। यह तब चलेगा जब इनपुट फ़ील्ड का मान बदल जाएगा।

कॉन्स्ट हैंडलइनपुटचेंज = (आयोजन) => {
 setInputTask (event.target.value);
};

कुछ JSX तत्व लौटाएँ। पहला शीर्षक है जिसमें लिखा है "मेरी कार्य-सूची", आप अपनी पसंद का कोई भी शीर्षक चुन सकते हैं। अपने इनपुट तत्वों में कुछ विशेषताएँ शामिल करें। टाइप करें = "पाठ": यह आपके इनपुट प्रकार को टेक्स्ट के रूप में निर्दिष्ट करता है, मूल्य={inputTask}: यह इनपुट फ़ील्ड के मान को इनपुटटास्क स्थिति वैरिएबल से जोड़ता है, यह सुनिश्चित करता है कि यह वर्तमान मान को दर्शाता है।onChange={handleInputChange}: जब इनपुट फ़ील्ड का मान बदलता है, तो यह इनपुटटास्क स्थिति को अपडेट करते हुए हैंडलइनपुटचेंज फ़ंक्शन को कॉल करता है।

"ऐसा करने के लिए">
मेरी कार्य सूची</h1>
"ऊपर">
"इनपुट" प्रकार="मूलपाठ" मूल्य={inputTask}
 onChange={handleInputChange} प्लेसहोल्डर="एक कार्य दर्ज करें" />

आगे बढ़ते हुए, एक बटन बनाएं जो इनपुट किए गए कार्य को सूची में जोड़ देगा।

इस स्तर पर, आपका ब्राउज़र आउटपुट इस तरह दिखेगा।

4. "जोड़ें" बटन में कार्यक्षमता जोड़ें

उपयोग उपयोग राज्य एक खाली सरणी के प्रारंभिक मान के साथ 'सूची' नामक एक राज्य चर बनाने के लिए हुक। 'सेटलिस्ट' वेरिएबल उपयोगकर्ता इनपुट के आधार पर कार्यों की श्रृंखला को संग्रहीत करता है।

कॉन्स्ट [सूची, सेटलिस्ट] = यूज़स्टेट([]);

एक फ़ंक्शन हैंडलएडटोडो बनाएं जो तब चलेगा जब उपयोगकर्ता कोई नया कार्य जोड़ने के लिए "ADD" बटन पर क्लिक करेगा। यह टूडू पैरामीटर लेता है, जो उपयोगकर्ता द्वारा दर्ज किए गए नए कार्य का प्रतिनिधित्व करता है। फिर, Math.random() और इनपुट टेक्स्ट रखने वाली टूडू प्रॉपर्टी का उपयोग करके उत्पन्न एक अद्वितीय आईडी के साथ एक ऑब्जेक्ट न्यूटास्क बनाएं।

आगे बढ़ते हुए, सूची में मौजूदा कार्यों के साथ एक नई सरणी बनाने के लिए स्प्रेड ऑपरेटर [...सूची] का उपयोग करके सूची स्थिति को अपडेट करें। सरणी के अंत में newTask जोड़ें। यह सुनिश्चित करता है कि हम मूल स्थिति सरणी को परिवर्तित नहीं करते हैं। अंत में, इनपुटटास्क स्थिति को एक खाली स्ट्रिंग पर रीसेट करें, जब उपयोगकर्ता बटन पर क्लिक करता है तो इनपुट फ़ील्ड साफ़ हो जाता है।

कॉन्स्ट हैंडलएडटोडो = (ऐसा करने के लिए) => {
कॉन्स्ट नया कार्य = {
 पहचान: गणित।अनियमित(),
 कार्य करना: कार्य करना
 };
 सेटलिस्ट([...सूची, नया कार्य]);
 सेटइनपुटटास्क('');
};

शामिल करें क्लिक पर "ADD" टेक्स्ट के साथ बटन तत्व को विशेषता दें। जब क्लिक किया जाता है, तो यह ट्रिगर हो जाता है हैंडलऐडटूडू फ़ंक्शन, जो सूची स्थिति में एक नया कार्य जोड़ता है

इस स्तर पर, आपका ब्राउज़र आउटपुट समान दिखेगा लेकिन यदि आप किसी कार्य को इनपुट करने के बाद "ADD" बटन पर क्लिक करते हैं, तो इनपुट फ़ील्ड खाली हो जाएगी। यदि यह ठीक से काम कर रहा है, तो अगले चरण पर जाएँ।

5. एक डिलीट बटन जोड़ें

यदि उपयोगकर्ताओं ने कोई गलती की है या कार्य पूरा कर लिया है तो यह उन्हें अपने कार्य को हटाने में सक्षम करने का अंतिम चरण है। एक हैंडलडिलीटटोडो फ़ंक्शन बनाएं जो एक ईवेंट हैंडलर के रूप में कार्य करता है जब उपयोगकर्ता किसी विशिष्ट कार्य के लिए "डिलीट" बटन पर क्लिक करता है। यह कार्य की आईडी को एक पैरामीटर के रूप में लेता है।

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

कॉन्स्ट हैंडलडिलीटटोडो = (पहचान) => {
कॉन्स्ट नई सूची = सूची.फ़िल्टर((ऐसा करने के लिए) =>
 todo.id !== आईडी
 );
 सेटलिस्ट (नई सूची); 
};

सूची सरणी में प्रत्येक आइटम पर पुनरावृति करने और एक नई सरणी लौटाने के लिए मानचित्र विधि का उपयोग करें। फिर, एक बनाएं

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

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

    <उल>
    { सूची.मानचित्र((ऐसा करने के लिए) => (
    <लीकक्षा का नाम="काम"चाबी={todo.id}>
     {todo.todo}
    <बटनक्लिक पर={() => HandleDeleteTodo (todo.id)}>हटाएंबटन>
    ली>
    ))}
    उल>

    आपका अंतिम कोड इस प्रकार दिखना चाहिए:

    आयात प्रतिक्रिया, { उपयोग राज्य } से'प्रतिक्रिया';
    कॉन्स्ट कार्य सूची = () => {
    कॉन्स्ट [इनपुटटास्क, सेटइनपुटटास्क] = यूज़स्टेट('');
    कॉन्स्ट [सूची, सेटलिस्ट] = यूज़स्टेट([]);
    

    कॉन्स्ट हैंडलएडटोडो = () => {
    कॉन्स्ट नया कार्य = {
     पहचान: गणित।अनियमित(),
     कार्य करें: इनपुट कार्य
     };
    

     सूची सेट करें([...सूची, नया कार्य]);
     सेटइनपुटटास्क('');
     };
    

    कॉन्स्ट हैंडलडिलीटटोडो = (पहचान) => {
    कॉन्स्ट नई सूची = सूची.फ़िल्टर((ऐसा करने के लिए) => todo.id !== id);
     सेटलिस्ट (नई सूची);
     };
    

    कॉन्स्ट हैंडलइनपुटचेंज = (आयोजन) => {
    setInputTask(आयोजन।लक्ष्य।कीमत);
     };
    

    वापस करना (
    <डिवकक्षा का नाम="ऐसा करने के लिए">
    

    मेरे को-करनासूची

    

    <डिवकक्षा का नाम="ऊपर">
    <इनपुटकक्षा का नाम="इनपुट"प्रकार="मूलपाठ"कीमत={inputTask}
     onChange={handleInputChange} प्लेसहोल्डर="एक कार्य दर्ज करें" />
    

    <बटनकक्षा का नाम="बीटीएन"क्लिक पर={handleAddTodo}>जोड़नाबटन>
    डिव>
    

    <उल>
     { सूची.मानचित्र((ऐसा करने के लिए) => (
    <लीकक्षा का नाम="काम"चाबी={todo.id}>
     {todo.todo}
    <बटनक्लिक पर={() => हैंडलडिलीटटोडो (todo.id)}>
    मिटाना
    बटन>
    ली>
     ))}
    उल>
    डिव>
     );
    };
    निर्यातगलती करना करने के लिए सूची;

    आपका अंतिम आउटपुट इस प्रकार होगा, जिसमें ऐड और डिलीट दोनों बटन उम्मीद के मुताबिक काम करेंगे।

    बधाई हो, आपने एक कार्य सूची बनाई है जो कार्यों को जोड़ती और हटाती है। आप स्टाइलिंग और अधिक कार्यक्षमताएँ जोड़कर आगे बढ़ सकते हैं।

    प्रतिक्रिया जानने के लिए वास्तविक विश्व परियोजनाओं का उपयोग करें

    अभ्यास सीखने का एक प्रभावी तरीका हो सकता है। यह आपको फ्रेमवर्क के बारे में आपकी समझ को मजबूत करते हुए, रिएक्ट अवधारणाओं और सर्वोत्तम प्रथाओं को व्यावहारिक तरीके से लागू करने की अनुमति देता है। वहाँ ढेर सारी परियोजनाएँ हैं, आपको सही परियोजनाएँ ढूँढ़नी होंगी।