रिएक्ट इंटरमीडिएट ट्यूटोरियल: ३ चरण

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:20

प्रतिक्रिया इंटरमीडिएट ट्यूटोरियल

तैयार उत्पाद यहां देखें।

आप क्या सीखेंगे?

आप React.js के साथ एक सरल टू-डू सूची बनाएंगे, और प्रतिक्रिया के अधिक जटिल भागों के बारे में जानेंगे। पूर्वापेक्षाएँ (अत्यधिक अनुशंसित) प्रतिक्रिया को पूरा करें। जेएस आरंभ करना मार्गदर्शिका। HTML का ज्ञानसीएसएस बेसिक शेल कमांड का ज्ञानजावास्क्रिप्ट में अच्छा ज्ञान

आपूर्ति

सभी सॉफ्टवेयर ट्यूटोरियल में शामिल किए जाएंगे।

आपको निम्न सॉफ़्टवेयर स्थापित करने वाले कंप्यूटर की आवश्यकता होगी:

• एनपीएम/यार्न
• एक आईडीई जो जेएस. का समर्थन करता है
• एक वेब ब्राउज़र

चरण 1: इंटरमीडिएट ट्यूटोरियल प्रतिक्रिया

शुरू करना

React.js क्यों?

React.js के साथ, बिंदु कोड का पुन: उपयोग करना है। उदाहरण के लिए, मान लें कि आपके पास 100 पृष्ठों में एक नेविगेशन बार है। यदि आपको एक नया पृष्ठ जोड़ने की आवश्यकता है, तो आपको प्रत्येक पृष्ठ पर नेविगेशन बार को बदलना होगा, जिसका अर्थ है कि आपको 100 पृष्ठों के लिए एक ही काम करना होगा। मैक्रोज़ के साथ भी, यह बहुत थकाऊ हो जाता है।

आवश्यक सॉफ़्टवेयर/पैकेज स्थापित करना

आपको चाहिये होगा:

एनपीएम/यार्न

स्थापित करने के लिए कैसे:

1. जाओ और Node.js का नवीनतम LTS स्थापित करें
2. वैकल्पिक: यदि आप अपने पैकेज मैनेजर के रूप में यार्न पसंद करते हैं, तो पावरशेल npm install -g यार्न में टाइप करके यार्न स्थापित करें
3. ओपन पॉवरशेल/cmd.exe
4. उस निर्देशिका पर नेविगेट करें जिसमें आप अपना प्रोजेक्ट बनाना चाहते हैं
5. एनपीएक्स क्रिएट-रिएक्शन-ऐप टाइप करें।

आपने सेटअप चरण पूरा कर लिया है। इसका परीक्षण करने के लिए, पॉवरशेल खोलें, अपनी प्रोजेक्ट डायरेक्टरी में नेविगेट करें और npm start टाइप करें। आपको अपने डिफ़ॉल्ट ब्राउज़र पर एक वेबपेज लोड होना चाहिए।

चरण 2: चरण 1: आरंभ करना

आरंभ करने के लिए, अपनी /src निर्देशिका से निम्न फ़ाइलों को हटाएँ:

• ऐप.टेस्ट.जेएस
• index.css
• लोगो.एसवीजी
• serviceWorker.js
• सेटअप टेस्ट.जेएस

हमें इन फाइलों की जरूरत नहीं है।

आइए अपने फाइल सिस्टम को भी व्यवस्थित करें। इन निर्देशिकाओं को /src/ में बनाएँ:

• जे एस
• सीएसएस

App.js को JS dir में और App.css को css dir में डालें।

अगला, आइए निर्भरता को पुनर्गठित करें।

index.js में, serviceWorker और index.css के लिए आयात हटा दें। serviceWorker.register () हटाएं। ऐप के लिए पथों को दोबारा बदलें।

App.js में, logo.svg के लिए आयात हटा दें, क्योंकि अब हमें इसकी आवश्यकता नहीं है। रीरूट ऐप.सी.एस. ऐप () फ़ंक्शन और ऐप के लिए निर्यात हटाएं।

रिएक्ट में, हमारे पास तत्वों को परिभाषित करने के 2 तरीके हैं। हमारे पास कार्य और कक्षाएं हैं। कार्य कम जटिल वस्तुओं के लिए होते हैं, और कक्षाएं आमतौर पर अधिक जटिल घटकों के लिए होती हैं। चूंकि टूडू सूची HTML के एक समूह की तुलना में अधिक जटिल है, इसलिए हम क्लास सिंटैक्स का उपयोग करेंगे।

इसे अपने कोड में जोड़ें:

pastebin.com/nGXeCpaH

एचटीएमएल 2 divs के भीतर जाएगा।

आइए तत्व को परिभाषित करें।

pastebin.com/amjd0jnb

ध्यान दें कि हमने राज्य में मूल्य को कैसे परिभाषित किया। हमें बाद में इसकी आवश्यकता होगी।

रेंडर फ़ंक्शन में, hi को {this.state.value} से बदलें

हम उस राज्य से पारित मूल्य प्रदान कर रहे हैं जिसे हमने परिभाषित किया है।

तो चलिए इसका परीक्षण करते हैं!

ऐप के रेंडर फंक्शन में, इसे इसके साथ बदलें:

pastebin.com/aGLX4jVE

इसे एक मान प्रदर्शित करना चाहिए: "परीक्षण"।

आइए देखें कि क्या हम कई कार्य प्रस्तुत कर सकते हैं!

केवल एक तत्व को प्रस्तुत करने के लिए प्रतिक्रिया प्राप्त करने के बजाय, हम एक सरणी बना सकते हैं और इसके बजाय सरणी को प्रस्तुत करने के लिए प्रतिक्रिया बता सकते हैं।

इस के रेंडर फ़ंक्शन को बदलें:

pastebin.com/05nqsw71

यह 10 अलग-अलग कार्यों को प्रस्तुत करना चाहिए। ध्यान दें कि हमने कुंजियाँ कैसे जोड़ीं। इन कुंजियों का उपयोग प्रतिक्रिया के लिए पहचानकर्ता के रूप में किया जाता है और हमें उनकी आवश्यकता होनी चाहिए।

अब जब हमारी कार्य सूची काम कर रही है, तो हम कार्यों को लोड करने का एक तरीका ढूंढते हैं। यहीं पर हमारा राज्य आता है।

आइए हमारे में एक कंस्ट्रक्टर जोड़ें।

pastebin.com/9jHAz2AS

इस कंस्ट्रक्टर में, हमने टास्कएरे को रेंडर फंक्शन से दूर राज्य में स्थानांतरित कर दिया। रेंडर फ़ंक्शन में टास्कअरे और लूप के लिए हटाएं। div में टास्कअरे को this.state.taskArray में बदलें।

अब तक, आपका App.js कोड इस तरह दिखना चाहिए:

pastebin.com/1iNtUnE6

चरण 3: वस्तुओं को जोड़ने और हटाने का तरीका जोड़ना

आइए वस्तुओं को जोड़ने और हटाने का एक तरीका जोड़ें। आइए इसकी योजना बनाते हैं।

हमें क्या जरूरत है?

• उपयोगकर्ता के लिए वस्तुओं को जोड़ने का एक तरीका
• वस्तुओं को स्टोर करने का स्थान
• वस्तुओं को पुनः प्राप्त करने का एक तरीका

हम क्या उपयोग करने जा रहे हैं?

• तत्व
• लोकलस्टोरेज एपीआई w/JSON

आइए इनपुट तत्व से शुरू करें।

नीचे {this.state.taskArray}, अपने कोड में एक इनपुट और बटन जोड़ें

जोड़ें

अब एक टेक्स्ट इनपुट और ऐड बटन होना चाहिए।

यह अभी कुछ नहीं करता है, तो आइए हमारे ऐप पद्धति में 6 तरीके जोड़ें।

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

आइए इन 6 विधियों को जोड़ें:

बटनक्लिक ()

इनपुट टाइप (ईवीटी)

जेनरेट टास्कअरे ()

सहेजें कार्य (कार्य)

कार्य प्राप्त करें ()

निकालें टास्क (आईडी)

आइए इस चर को हमारे राज्य में भी जोड़ें:

इनपुट

हमें अपने कार्यों को भी इससे बांधना होगा।

pastebin.com/syx465hD

आइए कार्यक्षमता जोड़ना शुरू करें।

इस तरह से 2 विशेषताएँ जोड़ें:

यह ऐसा बनाता है कि जब उपयोगकर्ता इनपुट में कुछ भी टाइप करता है, तो यह फ़ंक्शन निष्पादित करता है।

इस तरह जोड़ने के लिए एक ऑनक्लिक विशेषता जोड़ें:

जोड़ें

जब उपयोगकर्ता बटन पर क्लिक करता है, तो फ़ंक्शन निष्पादित होता है।

अब जबकि html भाग पूरा हो गया है, चलिए कार्यक्षमता के साथ आगे बढ़ते हैं।

मैंने पहले से ही लोकलस्टोरेज एपीआई इंटरफेस लिखा है, इसलिए इसके साथ सेव टास्क, गेटटास्क और रिमूव टास्क को बदलें:

pastebin.com/G02cMPbi

आइए इनपुट टाइप किए गए फ़ंक्शन पर शुरू करें।

जब उपयोगकर्ता टाइप करता है, तो हमें इनपुट के आंतरिक मूल्य को बदलने की आवश्यकता होती है।

आइए प्रतिक्रिया के साथ प्रदान किए गए सेटस्टेट फ़ंक्शन का उपयोग करके ऐसा करते हैं।

this.setState ({इनपुट: evt.target.value});

इस तरह, हम इनपुट का मूल्य प्राप्त कर सकते हैं।

एक बार यह हो जाने के बाद, हम बटनक्लिक फ़ंक्शन पर काम कर सकते हैं।

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

वर कार्यसूची = this.getTasks ();

कार्यसूची.कार्य.पुश(this.state.input);

this.saveTasks (कार्यसूची);

this.generateTaskArray ();

हम कार्य प्राप्त करते हैं, इनपुट मान को कार्यों में धकेलते हैं, और फिर इसे सहेजते हैं। फिर हम कार्य सरणी उत्पन्न करते हैं।

अब, GenerateTaskArray() फंक्शन पर काम करते हैं।

हमारे लिए आवश्यक है:

• कार्य प्राप्त करें
• कार्य घटकों की एक सरणी बनाएं
• प्रस्तुत करने के लिए कार्य घटकों को पास करें

हम कार्यों को प्राप्त कर सकते हैं और उन्हें getTasks () के साथ एक चर में संग्रहीत कर सकते हैं

वर कार्य = getTasks ()। कार्य

फिर हमें एक सरणी बनाने और इसे पॉप्युलेट करने की आवश्यकता है।

pastebin.com/9gNXvNWe

यह अब काम करना चाहिए।

सोर्स कोड:

github.com/bluninja1234/todo_list_instructables

अतिरिक्त विचार:

रिमूवल फंक्शन (बहुत सरल, एक ऑनक्लिक जोड़ें और कुंजी इंडेक्स से रिमूव टास्क का उपयोग करके हटाएं)

CSS (सरल भी, अपना खुद का लिखें या बूटस्ट्रैप का उपयोग करें)