हेलो अब तक हमने जो कंट्रीज प्रोजेक्ट है उसमें बहुत सारी चीजें बना लिए हैं हमने डाटा फेच करके भी दिखा दिया हमने सेट फंक्शनालिटी भी इंप्लीमेंट कर दी लेकिन अभी एक दो चीजें बाकी हैं जैसे कि डार्क मोट लाइड मोड और फिल्टर रीजन करना है फिल्टर बाई रीजन वह भी अभी नहीं किया और एक बहुत ही इंपोर्टेंट चीज जो करना है वह है शिमर एफेक्ट लगाना है शिमर यानि कि जब तक मारा डाटा नहीं आ रहा है ना तब तक हम ब्लैंक कार्ड ऐसा कुछ ग्रे कलर का जैसे कि यूजर को पता चले कि यहाँ पर कुछ कार्ड्स आएंगे तो वो वाला effect हम इस वीडियो में implement करेंगे इसको बहुत लोग skeleton loading भी बोलते हैं बहुत लोग shimmer effect बोलते हैं बहुत लोग loading effect बोल देते हैं लेकिन आप जो भी चाहें वो बोल सकते हैं आप shimmer effect बोलेंगे तो भी मतलब अगर गूगल पे search करते हैं तो भी इसी का search आएगा और skeleton loading अगर search करते हैं तो चलो हम अपने screen पे आते हैं आप देखते हैं कि हमने क्या बना लिया अभी तक तो हमने यहां तक बना लिया है कि सारी कंट्रीस की लिस्ट है यहां पर हम किसी भी कंट्री के ऊपर जाते हैं तो उसकी डिटेल्स पूरी शो होती है इसके बॉडर कंट्रीस को ने एकदम लूप का यूज करके डाटाफेस किया था मेट पर रिक्वेस्ट को प्रॉमिस डॉट ऑल का यूज करके हैंडल कर किया था तो यह भी हमने इंप्लीमेंट कर दिया है अभी अभी हम किसी भी कंट्रीस के ऊपर जा सकते हैं सीधा यहां से क्लिक करके ठीक है तो एकदम सही से काम कर रहा है बैक बटन भी काम कर रही है अ अब हमें एक काम करना है कि जैसे यूजर अगर आता है तो एक सेकेंड के लिए हमें ये ब्लैंक दिखता है ना, ये सर्च बार तक दिखता है फिर उसके नीचे सारी कंट्रीस की लिस्ट जो है वो ब्लैंक दिखती है, तो हमें यहाँ पे ब्लैंक नहीं दिखाना है एक सेकें अगर हम YouTube.com पे जाते हैं, अभी मैं इसको ओपन करने जा रहा हूँ, ठीक है, तो जैसे मैं एंटर प्रेस करूँगा, आप देखना, मैं एंटर प्रेस करता हूँ, यह कुछ सकेंड के लिए स्टार्टिंग में ग्रे कलर का आया था, मैं एक बार फिर से प्रेस करता हूँ, य मुझे लगता था कि यूट्यूब को डेटा कैसे पता चल जाता है कि इसी जगह पर ऐसा ही आएगा चीज तो ये इक्जाक्ट उसी चीज का रिप्रेजेंटेशन नहीं होता है हमें देखने में लगता है कि इक्जाक्ट उसी चीज का रिप्रेजेंटेशन है अगर हम स्क्रॉल करके नीचे जाने तो 15-20 कार्ट्स एक बार में इन्होंने दिखा दिया है और कुछ ग्रे कलर के कार्ड मना लिये जो की कि देखने में कुछ इस तरह से दिखते हैं एक्ट्रोल में वह एक्जाक्ट एक्ट्रोल रिप्रेजेंटेशन नहीं है जैसे कि यहां पर हम देखें तो अगर हम रिलोड करते हैं तो बहुत सारी चीजें नहीं आ रही है ठीक है जैसे कि यहां पर यह साइड का कोई भी रिप्रेजेंटेशन नहीं है यह ऊपर यह हमारे पास यहां पर टैक्स का ऑप्शन है ना तो इसका कि वह डाटा आने से पहले कैसे पता चल जाएगा ऐसा कुछ नहीं है हमें बस चार-पांच कार्ड दिखा देने ग्रे कलर के बस जो कि इस कार्ड के जैसे दिखते हैं तो चलो बनाते हैं अपना शिमर एफेक्ट तो शिमर एफेक्ट हमें दो चीजों बना दूंगा आपको इसके लिए इस पर्टिकुलर पेज के लिए आपको खुद से बनाना है तो एक को मैं बनाकर दिखा देता हूं तो मैं यहां पर एक अ कि कंपोनेंट क्रिएट करूंगा अब कंट्रीज लिस्ट शिमर ठीक है डॉट जेस एक्स यह जेस फाइल रहेगी क्योंकि हम यह पेट्स टेमिंग थोड़ा बहुत लिखेंगे तो कंट्रीज लिस्ट के लिए जो जेस एक्स है मतलब शिमर एफेक्ट है तो इसको हम इस फाइल में रखेंगे और कंट्रीज डिटेल के लिए आप आपको खुद से है लेकिन पहले इसको बनाते हैं तो मैं यहां पर एक कंपनेंट बनाता हूं आज अब सी लिखकर और यह कंट्रेस लिस्ट डॉट कंट्रेस लिस्ट शिमर एफेक्ट यह बनाने जा रहे हैं हम अभी तो अभी मैं क्या करूंगा देखो अभी अगर हमें इस तरह से दिखाने हैं तो मैं इसी का भी लिखना होगा बस उसके अंदर हमें बैकग्राउंड देना होगा और उसके अंदर कुछ डालना नहीं है तो इसका पेज पर है तो हम इसी की classes use कर सकते हैं, तो जैसे कि ये countries container है न, तो मैं countries container यहाँ पे लिख दूँगा, यहाँ पे class दे दूँगा, कि कंट्रीज कंटेनर मैंने कॉपी किया था मैं पेस्ट कर देता हूं यहां पर कंट्रीज कंटेनर हो गया अभी इसके अंदर कंट्रीज कार्ड्स है मतलब एक कार्ड की दिखो हाइट विट यहां पर हाइट नहीं दिए है हाइट हम खुद से देनी जाएगी देख लेंगे इसका कितना हाइट है इसका लवक साढ़े तीन सौ त्री एंडेड नाइटी फॉर यहां पर दिखा रहा है इधर अभी है तो उतना ही हाइट हम दे देंगे तो अभी यहां पर हाइट नहीं है लेकिन हम कुछ हाइट देंगे कोई बात नहीं यहां पर कार्ड कंट्री कार्ड को मैं कॉपी कर लेता हूं उसका आया मतलब प्लास मैंने कॉपी कर लिया और मैं एक डिव क्रिएट कर दूंगा कंट्री कार्ड से और मैं इसको 10-15 डिव ऐसे ही डिप्लीकेट कर दे रहा हूं शिफ्ट अल्ट मैं कि 10 15 अब लग लग 10 12 यह कार्ड्स को मैंने कॉपी कर लिया लेकिन रियाग के अंदर इस तरह से कॉपी करना बहुत अच्छी बात नहीं होना जाती है डिप्लिकेट हम कर रहे हैं तो अभी हम इसको और दूसरे तरह से भी करके देख लेंगे नभी के लिए इतना ही काफी है तो ठीक है इतना सही है अभी यहां पर जो हमने यह दिया एक बार हम इसको यूज करके लेते हैं मैं इसको इंपोर्ट कर लेता हूं अपने कंट्रीज लिस्ट के अंदर यहां पर मैं इधर ही ऐसे पूरे टाइम रख देता हूं अभी मैंने कोई कंडीशन नहीं लगाई कि जब डेटा है तभी दिखाओ, अभी ये पूरे टाइम ऐसे ही रहेगा, ये डिफाइन नहीं है क्योंकि हमने इंपोर्ट नहीं किया इसको, मैं इसको इंपोर्ट कर देता हूँ, तो ये देखो इसकी हाइट, मतलब आ तो गया है, एक सीजेस फाइल क्रिएट कर देता हूं और फिर इस सीजेस फाइल के अंदर यहां पर मैं कंट्री कार्ड की हाइट देता हूं तो कंट्री कार्ड की अगर हाइट दूंगा तो हर एक कंट्री कार्ड की हाइट हो जाएगी तो ठीक है मतलब लेकिन अगर हाला कि हमें इसकी हाइट फिक्स करनी है, हम आगे आने वाली वीडियो में कभी करेंगे, क्योंकि इतना लंबा कार्ड दिखाना अच्छा नहीं लग रहा है, यह हमें फिक्स करनी है कि फिलाग थोड़ा सा क्रॉप भी हो जाए, कोई बात नहीं, लेकिन हमारी कार्ड की हाइ� कि कंट्री कार्ड को नहीं रखें अभी ठीक है तो मैं यहां पर शिमर कार्ड को हाइट देता हूं हाइट और 350 पिक्सल इतना देते हैं तो अभी मैंने यह तो दे दिया यहां पर हाइट लेकिन इसको इंपोर्ट नहीं किया अपने शिमर कार्ड के लिए अब मतलब कंट्री शिमर लिस्ट कंट्रील शिमर में तो मैं इसमें इसको सीजेस को यहां पर इंपोर्ट कर लेता हूं इं� है और फिर यह सिस फाइल तो इसको मैंने इंपोर्ट कर रही है अभी एकदम सही लिए यह लग रहा है लेकिन इसका कुछ हम बैकग्राउंड कलर देता है एकदम हॉइट अभी इसका बैकग्राउंड कलर है तो यहां पर मैं देता हूं बैकग्राउंड कलर सीची तो एक तरह से ग्रेड टाइप में कलर बन जाएगा इसका और ठीक है मतलब सही लग रहा है तो अभी अगर हम दे तो यह लगभग एक्जाक्ट रिपेजेंटेशन टाइप में लग रहा है जैसे यह है वैसे है तो अभी हम पूरे टाइम दिखा रहे हैं इसको हमें पूरे टाइम तो दिखाना नहीं है हमें एक कंडीशन के हिसाब से दिखाना है कि जब वह रहे क्या है जब यह इसकी जो लेंथ है जब जीरो रहे तब हमें यह लोडिंग वाला कार्ड दिखाना है यह चीन नहीं है तो हम चाहे तो टर्नरी ऑपरेटर का यहां पर यूज कर सकते हैं मैं यहां पर ऐसा कर सकता हूं अ इसको मैंने curly bracket के अंदर कर दिया है, और मैं यह check करूँगा यहाँ पे, countries data.length equal to 0 अगर हम चाहे तो कर दें, नहीं तो यहाँ पे हम not, आगे यहाँ पे not लगा देंगे, तो यह हो जाएगा, यह check कर रहा है कि अगर इसका length नहीं है, तो अगर नहीं है तो हमें क्या दिखाना है यह वाला component दिखाना है, नहीं तो कि यह वाला कंपोनेंट दिखाना एक बार इसको फॉरमेट कर देता हूं तो यह हो गया अभी हम क्या कर चक्कर हैं अगर लेंथ नहीं है लंथ नहीं है नहीं कि अगर लंथ जीरो है तो यह चीज दिखाओ अदरवाइज यह चीज दिखाओ ठीक है तो अभी अगर हम रिलोड करें पेज को तो यह देखो एकदम एक्जाक्ट वैसे ही लग रहा है लग रहा है कि उसी के जगह पर दूसरा है तो इसी सेम चीज को मैं एक बार कंट्रोल जेट कर देता हूं और इफ का यूज करके कर देता हूं ठीक है यह हमारा इतना यहां तक था ठीक है इसको मैं यहां से रिमोक करके मैं क्या करता हूं इफ कंट्री डेटा डॉट मैं इन पर लेकर देता हूं डॉट लेंथ इज एक्टू जीरो अगर इसकी लेंथ जीरो है तो क्या करो तो रिटर्न कर दो कि यह वाला कंपनेंट बस तो अगर इसके लंच जीरो होगी तो यहीं से अर्ली एक्सिस हो जाएगा और यह मतलब पहले ही यह चीज रिटर्न हो जाएगा और यहां तक जाएगा ही नहीं हमारा जो कंपनेंट का रिटर्न है तो इधर इधर से है तो तब तक जीर हो रहता है तो यहां पर देखो एकदम सही से काम कर रहा है एकदम सही से काम कर रहा है एकदम मत चल रहा है है तो वही सेम चीज यहां पर मैंने टर्न ऑपरेटर का यूज करके किया था और इसी चीज को अगर चाहो तो यहां से जीरो रिमूट करके यहां पर नॉट लगा सकते हो यह लेंथ नहीं है नहीं यानि कि जीरो है तो यह चीज कर दो तो यह काम कर रहा है और यह जो भी क्या बोलते हैं शिमर एफेक्ट होता है वह ऐसे ही होता है ऐसे चक करते हैं जब तक नहीं है तब तक हमारा शिमर वाला जो भी कंपोनेंट है उसको दिखा दो जब ही मेरा डाटा आ जाएगा तो ऑटोमेटिक हमारे डाटा के हिसाब से वह कंपोनेंट रेंडर हो जाएगा अभी यहां पर हम यहां पर जो हम मतलब मल्टिपल चीजों को डिप्लिकेट कर रहा है इस तरह से रियाट के अंदर हम नहीं करते हैं क्योंकि ऐसा एच्टीमेल में करना ठीक है क्योंकि ऐसा एच्टीमेल में कोई लूप तो होता नहीं है यहां पर हम लूप यूज कर सकते हैं तो लूप कर देंगे लेकिन लूप करने के लिए हमें देखो हम यहां पर क्या करेंगे लूप करने के बाद हम एक एरे देते हैं रिएक्ट को हां ना 10 element का array अगर दे देंगे तो automatic वो render कर देगा, लेकिन array देने के लिए एक array होना चाहिए जिसके उपर हम loop करें, तो हम क्या कर सकते हैं, हम एक empty array create कर सकते हैं, तो empty array create करने के लिए दो तीन तरीके हैं, एक तरीका जो सबसे आदा common है, वो क्या है, इस तरह से new array करते हैं, new और capital array ठीक है जैसे कि हमने 10 पास कर दिया है तो 10 elements का यह array बना है मतलब इसकी length तो 10 हो गई है लेकिन इसके ऊपर हम loop नहीं कर सकते हैं अगर हम map करने जाएं मैं यहाँ पर आपको दिखाता हूँ मैं यहाँ पर लिखता हूँ new array const array बस इस तरह से कर देता हूँ new array और इसके अंदर अ कि यह देखो एकदम से एमटी एरे आ रहा है जो मारा आरे आ रहा है एमटी है और इसके ऊपर हम लूप नहीं कर सकते अगर मैप या फॉर इस कुछ भी करना चाहिए मैं एक बार एरे डॉट फॉर इस करता हूं यह मैपी कर लेता है मैप भी लूप होता है मैप और फिर मान लो कि यहां पर एलिमेंट हम ले लेता है यहां हर एक एलिमेंट जो इसका होगा इसके बार को एलिमेंट है नहीं तो यह लूप ही नहीं करेगा मैं कांसल लॉग यह करता हूं तो यह लूप चला ही नहीं हमारा तो क्या किया जाता है इसको फिल किया जाता है फिल करके कुछ भी वेल्यू डाल दो तो यहां पर एक बार मैं फिर से यह करता हूं और इसके ऊपर डॉट फिल एक मेथड होता है जो कि मैं ऑटोमेटिक मिलता है और फिर इसके अंदर कोई भी नंबर डाल दोगे तो 1234 या अंडिफाइंड या कुछ भी डाल दो कुछ भी डाल दोगे तो ऑटोमेटिक यह दो तो एक से यह पूरा फिल हो जाएगा अ है तो अभी देखो यह लूप हमारा चल रहा है यह लूप दस बार चल रहा है जो भी मेरा मैप है यह दस बार चल रहा है इस तरह से हम एक तो यह तरीका है लेकिन यह थोड़ा सा मतलब बड़ा है एक दूसरा तरीका होता है हम यह कर सकते हैं और इसके अंदर हम एक ऑब्जेक्ट पास कर सकते हैं यहां पर हम ऑब्जेक्ट के अंदर लिखेंगे और इतना करके अंटर प्रेस करेंगे तो automatic यह हमें empty array नहीं मिलेगा, हमें 10 elements का array मिल जाएगा जिसके अंदर undefined है और इसको फिर हम loop कर सकते हैं, अगर undefined भी होता है यहाँ पर अगर हम undefined डाल दें तो भी हम loop कर सकेंगे कि यह एमटी एरे नहीं होता है अन्डिफाइंड एक वैल्यू होती है तो हम इसको ऐसे ही रख देते हैं इसको मैं क्या करता हूं मैं अच्छा इसको लूप करने के लिए मुझे एक वैल्यू में सेव करने की जरूरत नहीं है मुझे किसी मतलब वरिबल में सेव करने की जरूरत नहीं है मैं क्या कर सकता हूं सीधा जो मैट है वह यहां पर कर सकता हूं और फिर भी हमारा लूप चलेगा एकदम सही से तो सही है और मैं इस तरीकों को इस तरीके को नहीं यूज करूंगा इसको मैं इधर ही comment out कर देता हूँ लिखके और comment out कर देता हूँ यहाँ पर fill के अंदर कोई भी value डाल सकते हैं मैं 10 डाल देता हूँ 10 नहीं, मैं empty string डाल देता हूँ फिल के अंदर कोई भी value डाल सकते हैं new हमें यूज करनी की ज़रूरत नहीं है हम यूज करेंगे array.from और from के अंदर एक object जिसके अंदर हम length पास करेंगे है और लंट की वेल्लू होगी टेन वेर में टेन दिखाने तो टेन अगर अंदर दिखाने तो अंदर और यह देखो हमारा लूप चल रहा है तो सही हमारा अगर लूप चल रहा है तो ठीक है अगर हम यहां से देखो तो मैप क्या करता है मैप रिटर्न करता है एक एरे अगर हम यह इतना जो हमने यह इतना किया इतना इतने से में एक एरे मिल गया एक एमटी एरे जिसमें टेन एलिमेंट्स है और जब हम उसके अंदर मैप करते हैं अ है और मैप के अंदर से जो कुछ भी रिटर्न करते हैं जैसे कि मैं यहां से रिटर्न कर देता हूं मैं अपना नाम ही रिटर्न करता हूं ठीक है तो मैप के अंदर से जो भी रिटर्न करेंगे वहीं एक एरे में स्टोर हो जाएगा मतलब यह पूरा एक एरे रिटर्न करेगा यहां पर मैं कॉन्स मैप बस ऐसे नाम से एक यह कर लिया और मैंने अगर कॉन्सल करो है तो एक एरे हो गई ठीक है जिसमें पूरा अनुराग अनुराग इतनी बार यह लिखा है नाम यानि कि यहां से हम यह हम जेसेक्स यूज कर रहे हैं मतलब रियाइक्ट है तो इसके अंदर से हम ऐसा कुछ भी रिटेन कर सकते हैं सीधा मतलब एक एक अर्य है जिसके अंदर सारे रियाइक्ट के एलेमेंट है तो अब हम इसको मैप को यहां पर दिखा सकते हैं यह पूरा ना दिखाकर कि मैप यहां पर दिखा सकते हैं तो अगर हम रिलोड करेंगे तो यह देखो हो गया सही अभी यहां पर कि इसको चाहिए तो हम की पास कर सकते हैं यहां पर और इस केस में हम इंडेक्स पास कर देंगे मैं यहां से इंडेक्स ले लेता हूं ठीक है लेकिन इंडेक्स पास करना बहुत अच्छी बात नहीं होती है लेकिन इस केस में जो हमारा इंडेक्स का मतलब पास क कि इस केस में कोई दिक्कत नहीं इस केस में हमारा मतलब कोई भी एलेमेंट हम रिमूव नहीं कर रहे हैं रिमूव या आईड नहीं कर रहे हैं यह भी हम देखेंगे कि इंडिक्स पास करना क्यों अच्छी बात नहीं होती है अगर हमारा डाइनेमिक इसे चल भी रहा है तो ऐसा कोई अलग से नहीं करता है अलग वेरिबल में इस इंस्टोर करता है इसको सीधा ही इसको यहां से हटा देते हैं अ इस चीज को भी अटा देते हैं उसमें store नहीं करते हैं सीधा इधर का इधर ही डाल देते हैं तो यह देखो अगर हम reload करेंगे तो एकदम सही से चल रहा है और हमने जो duplication था उसको अटा के एक line में कर दिया और अगर हमें यहाँ पे 100 चाहिए होगा तो 100 भी हम कर सकते हैं ठीक है तो 100 cards हैं पे हमने कर दिये नहीं तो 10 cards बहुत है ठीक है तो सही है हमारा जो कि इस तरह से अगर मिल्टिपल कार्ड्स को अगर दिखाना है तो इस तरह से एक एमटी एरे क्रिएट करके उसके ऊपर हम लूप करके जो भी हमारा से रिटर्न करवाइंगे वह ऑटोमेटिक रिटर्न हो जाएगा तो मैं उम्मीद करता हूं अच्छा अभी एंट्री डिटेल पेज है जिससे यह वाला पेज ना इसके लिए आपको वह करना है शिमर एफेक्ट लगाना है इसके लिए आपको कि अ कंपनेंट क्रेट करना है कंट्री लिस्ट शिमर मैंने क्रिएट कर दिया था कंट्री डिटेल शिमर डॉट जेसेस आपको क्रिएट करना है और इस पेज को जैसे अभी लोडिंग यहां पर दिखा रहा था ना तो इस पेज को लोड होने से पहले आपको एक एक यहां पर शिमर इफेक्ट दिखाना जाता है इसके लिए और इसके लिए मतलब आपको खुद देखना पड़ेगा कि क्या करना है और इन सब को दिखाने के लिए आप दूसरा फिर से डिव रख दो और उसकी हाइट 23 है ऐसे 123455 डिव है तो पांच डिव रख दो और उसकी हाइट पतली-पतली रख देना और उसका हाइट मतलब जैसे कि फिर टिंग पिक्सल 20 पिक्सल इतना दे देना और बैकग्राउंड कलर उतना ही रहेगा मतलब वहीं सीची सीची ऐसा दे दो पस्त यही करना और फिर यह इसके लिए तुम चाहो तो अलग-अलग मतलब कार्ड यह जो मतलब टाइव है ना कि अलग-अलग टाइट के लिए अलग-अलग कर सकते हो लेकिन इतना ही कर दोगे क्यों यहीं तक तो भी चल जाएगा तो यह करना यह आपका एसाइनमेंट है यह आपका टास्क है तो मैं उम्मीद करता हूं आपको यह अच्छा लगा होगा आपको आमजाया होगा कि हम शिमर एफेक्ट कैसे क्रिएट कर सकता है और नेक्स्ट वीडियो में देखेंगे कि डार्क मोड लाइट मोड कैसे इनेबल करेंगे और इसके लिए हमें आने वाले वीडियो में आ कि कॉन्टेक्स एपिएबी समझना पड़ेगा तो वह भी देखेंगे अगर आपका कोई भी डाउट है कोई भी क्वेश्चन इसलिए लेटरी आटीशी हुई और टॉपिक्स लेटर तो आप कमेंट में पूछ सकते हैं आप चाहे तो आप टेलीग्राम रूप पर खेले बाय बाय