प्रतिक्रिया स्टॉपवॉच

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

हम App.css, App.js और index.js को छोड़कर src फ़ोल्डर में सभी फ़ाइलों को हटाने जा रहे हैं और सभी आयातों को हटा दें। हम राज्य और प्रभाव हुक का उपयोग करेंगे। यह हमारा प्रारंभिक घटक जैसा दिखेगा।

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

अब हमारा समय गिनना शुरू हो जाएगा। अब तक स्टॉपवॉच को रोकने या रीसेट करने का कोई तरीका नहीं है। हमें यह भी प्रदर्शित करने की आवश्यकता है कि क्या प्रदर्शित किया जाए ताकि संख्या सही दिखे। ऐसा करने के लिए एक अच्छी चाल है। पहले हम समय को 10 से भाग देंगे क्योंकि यह एक मिलीसेकंड का मान है तब मोडुलो 1000 है। अब हम इसे एक शून्य पर जोड़ देंगे ताकि जब समय शुरू होगा तो केवल एक अंक के बजाय एक शून्य होगा। अंत में हम स्लाइस करेंगे और -2 के एक पैरामीटर में पास करेंगे ताकि जब संख्या दो अंकों की हो जाए तो शून्य हटा दिया जाएगा। यह वही है जो दिखेगा।

अब प्रदर्शित संख्या अधिक समझ में आएगी। अंत में हमें जो करना है वह सेकंड, मिनट दिखाना और स्टॉप और रीसेट बटन बनाना है। मिनट और सेकंड बनाना वास्तव में वैसा ही है जैसा हमने मिलीसेकंड के साथ किया था। हम कॉपी और पेस्ट कर सकते हैं और कुछ बदलाव कर सकते हैं। 1000 से मॉड्यूल का उपयोग करने के बजाय हम इसे 60 तक करेंगे। एक और बात जो हमें करनी है वह यह है कि दशमलव संख्याओं को प्रदर्शित किया जाएगा क्योंकि हम इसे छोड़ते हैं। बटन भी वास्तव में उसी के समान हैं जो हमारे पास पहले से हैं। उदाहरण के लिए हम स्टॉप बटन में झूठी स्थिति सेट करेंगे। रीसेट बटन के लिए हम समय को 0 पर सेट करेंगे और प्रारंभ को भी गलत पर सेट करेंगे। यह हमारी तैयार स्टॉपवॉच जैसा दिखेगा।

यह कुछ बुनियादी बातों जैसे हुक का अभ्यास करने का एक अच्छा तरीका है। इन समान तकनीकों का उपयोग टाइमर या घड़ी जैसी अन्य समान परियोजनाओं को बनाने के लिए किया जा सकता है। यह सुपर मजेदार इमारत थी और इसे करने में इतना समय नहीं लगा। आशा है कि आपने मेरे साथ उतना ही मज़ा किया होगा। हैप्पी कोडिंग! 😎