Up next in 10
Adding Categories & propTypes to NewsMonkey React App _ Complete React Course in Hindi #30
22 views
Feb 10, 2024
The video "Adding Categories & propTypes to NewsMonkey React App _ Complete React Course in Hindi #30" likely focuses on extending the functionality of the NewsMonkey React application by incorporating category selection and PropTypes validation, within a comprehensive course presented in Hindi. In this tutorial, viewers are shown how to implement category selection functionality, allowing users to filter news articles based on different categories such as sports, technology, or entertainment. Additionally, the instructor may demonstrate how to utilize PropTypes to validate the props received by components, ensuring data integrity and error prevention. Through step-by-step instructions and practical demonstrations provided in Hindi, viewers can learn how to enrich the NewsMonkey application with additional features and enhance its robustness with PropTypes validation. This video aims to empower Hindi-speaking audiences with the skills needed to create versatile and reliable React applications.
View Video Transcript
0:00
So here my NPM run start is going on and now what I want to do is that I want to pass a category to the API
0:05
that is, the sports category should be separate and along with that if I want to pull some other category news
0:12
then I can do that too, so how will I do all this work? So to know this, what we will do is we will go to the news API documentation and there we will see how this work can be done
0:22
Okay, while reading news API documentation a little bit, I saw one thing here
0:27
कि everything वाला endpoint एक तो है इनका इनके दो major endpoints है एक तो everything ह�
0:31
एक top headlines है तो slash everything अगर आप करते हो तो आपको सारे articles
0:35
मिलते हैं आप slash top headlines करते हो तो आपको top headlines मिलती है यह जो sources
0:39
वाला यहाँ पर आप लोगों ने देखा है यह आपका top headline पे ही काम करता ह�
0:43
वरना क्या होता है कि ये sources काम नहीं करता है everything पर ठीक ह�
0:47
तो अगर आपको category is equal to pass करना है जैसे कि business, entertainment, general health
0:51
तो आपको इनकी top headlines वाला endpoint यूज़ करना पड़ेगा ठीक है तो यहाँ पर हम क्या करेंगे यह जो top headlines वाला endpoint ह�
0:58
जो कि हम यहाँ पर already यूज़ करी रहे हैं यहाँ पर country is equal to इंडिया है, और उसी के साथ साथ हम लोग और भी जीसे पास कर सकते हैं, ठीक है
1:05
तो country is equal to इंडिया मैंने यहाँ पर देखा, ठीक है, तो मैं यहाँ पर क्या कर सकता हूँ, replace कर सकता हूँ यह इंडिया को
1:11
country is equal to india जहां पर है, मैं control F करूँगा, control D नहीं, control F करूँगा
1:16
country is equal to india को किस चीज़ से मैं replace करूँगा, मैं country is equal to IN को replace करूँगा कुछ इस चीज़ से, ठीक है
1:24
और country नहीं, props.country, this.props.country, this.props.country, तो यहाँ पर मैं इससे replace करूँगा, यह करने से क्या होगा
1:34
यह करने से country is equal to this.props.country हो जाएगा, और अब मैं country को as a prop pass कर सकता हूँ
1:39
तो मैं चाहूँगा app.js से ही मैं सारे props pass करूँ, तो मैं यहाँ पर country is equal to in
1:45
कुछ इस तरह से pass करूँगा, अच्छा एक चीज और थी, कि क्या prop types मैं class based component में डाल सकता हूँ
1:50
obviously डाल सकता हूँ, कैसे डाल सकता हूँ is the question, ठीक है, तो मैं क्या करूँग�
1:55
मैं यहाँ पर लिखूँगा react prop types class based ठीक है, देखो कुछ रटने की जरूरत नहीं है, देख�
2:02
IMPT करके आप import कर सकते हो जो हमारे prop types हैं, त�
2:06
तो आपको याद हो गया अभी तक लिखकर इंपोर्ट टाइप्स हो जाता है अब मैं क्या करूंगा यहां पर ए�
2:14
स्टाइट वेरिबल बना लूंगा प्रॉप्ट लिखने के लिए क्लास के अंदर अगर आप लोगों नहीं पता स्टाइट वेरिब�
2:18
जाते हैं तो यह आपको सिंपली प्रॉप्ट टाइप यूज करने के लिए इसको इस्तेमाल करना है अगर आप लोग ऑप्शन प्रोग्रामिं�
2:24
भी आती है तब भी कोई दिक्कत नहीं है बट मैं रियाग जीएस की डॉक्यूमेंटेशन पर यहाँ पर जाऊंगा और यहाँ प�
2:28
पर मैं स्टाटिक सर्च करूंगा और आपको देखो यहां पर मिल जाता है स्टाटिक डिफॉल्ड प्रॉप्स अब यहां पर डिफॉल्�
2:34
प्रॉप्स भी डाल सकते हो और आप यहां पर प्रॉप टाइप भी डाल सकते हो ठीक है तो具सरा लेकिन आपको क्या करना ह�
2:40
जैसे मैंने यहाँ पर स्टार्टिक डिफोल्ड प्रॉप्स लिखा वैसे ही मैं यहाँ पर प्रॉप टाइप्स भी डाल सकता हूँ ठीक ह�
2:45
और मैं क्या करूँगा यहाँ पर जैसे कि नेम स्ट्रेंजर लिखा हुआ यहाँ प�
2:49
तो मैं क्या करूँगा मेरे कौन-कौन से प्रॉप्स है यहाँ पर एक तो कंट्री है ठीक है कंट्री बाय डिफॉल्ट इंडिया कर देता हूँ मैं ठीक ह�
2:55
और क्या प्रॉप पास किया जा रहा है पेज साइज पेज साइज क्या करो पेज साइज मैं यहां पर कर देता हू�
3:00
पाइवी कर देता हूं डिफॉल्ट ठीक है यह फिर एट कर देता हूं और उसी के साथ साथ मैं क्या कर सकता हूं जो मेरे प्रॉ�
3:07
टाइप्स है नेम मैं क्या करता हूं प्रॉप टाइप एरे और रिक्वाइट ठीक है तो प्र लिख देता हूं इसको पी आर प्रॉ�
3:48
देख रहा है, मैं चाहता हूँ कि यह जो categories हैं, जो कि इन्होंने business, entertainment, journal, यह सब दे रखी हैं, मैं काम करता हूँ इसको एक नई file में लेकर, और यहाँ पर इसको new line से replace करके आप लोगों दिखाता हूँ, और उसके बाद मैं बताऊँगा कि क्या plan है, मैं basically उपर nav bar के अंदर य�
4:18
इस फाइल को रखूंगा और मैं बता रहा हूं आपको यह सब क्यों कर रहा हूं मैं जब कर दूंगा तब पता चलेगा आ�
4:23
लोगों को बेसिकली मैं आपको वीजियल स्टूडियो कोड के कुछ ट्रिक्स बताने की कोशिश कर रहा हूं यहां पर ठीक ह�
4:28
तो हम क्या करेंगे, सारी के सारी categories हैं, इनको pass करेंगे as props, अब कहाँ पर pass करेंगे, यह मैं भी आप लोगों को बताता हूँ, बट अभी के लिए आप लोग nav bar के अंदर इन सारी categories को add करेंगे, कहाँ पर as list items add करेंगे, तो यहाँ पर आप लोग देख सकते हो, एक list item add हो रखा �
4:58
आल्ट शिफ्ट और क्लिक कर रहा हूँ यहाँ पर तो multiple cursor आ ग�
5:03
अगर आपका जो source code editor है वो multiple cursor support नहीं करता ह�
5:07
तो आप शायद ये ना करें तो visual studio code में तो जरूर कर लेना ठीक है अब देखो इसने यहाँ पर क्या किया कि जो A tag था उसको automatically close कर दिय�
5:15
तो मैं क्या करूँगा shift और arrow की दबागे control x करूँगा ये सारे चले ग�
5:19
end की दबाऊँगा सारे arrows end में चले गए control v करूँगा ये सब चले ग�
5:22
और li को manually type कर लूँगा अगर आप इस काम को किसी दूसरी तरीके से करना चाहते हो that is also totally fine ठीक ह�
5:29
मुझे उसमें कोई दिक्कत नहीं है। अभी जो, अक्टिव है इसको मैं हटा देता हूँ अभी के लिए�
5:33
तो यहाँ पर देखो, अबाउट अबाउट अबाउट हो गए सारे hrefs, बड़ अभी के लिए इसको ऐसे रहने देते हैं
5:38
हम फिक्स कर लेंगे। तो अब ही NewsBunkie कुछ ऐसी दिख रही है, Home, About, Business, Entertainment, Journal, Science, Sports, Technology
5:45
अब मैं कह चाहता हूँ, कि जो मेरा app.js है, इसमें मैं category पास करूँ
5:50
और let us say मैंने, science पास की category, तो मैं इस category को अपने URL के अंदर embed करूँगा
5:57
मैं आपको दिखाता हूँ, क्या मतलब है मेरे कहने का तो यहाँ पर मैं प्रॉप टाइप्स में कैटेगरी डाल देता हूं और मैं यहाँ प�
6:02
पीटी एस लग देता हूं अ मुझे इसको एक्शनल यहां पर डालना है प्रॉप टाइप्स क्योंकि यहां पर है और य�
6:09
प्रॉप्स है तो डिफॉल्ड कैटेगरी में जनरल लगता हूं ठीक है मुझे कैसे बता जनरल कैटेगरी है यहां पर मैंने देखें तो यहां पर सब लिखा हुआ है कौन-कौन सी कैटेगरी उपलब्ध है ठीक है तो मैं इनको यूज कर सकता हूं एंड पॉइंट्स को अब �
6:55
तो मैं लिखूंगा कैटिगरी इज इगल दिस डॉट प्रॉब्स डॉट कैटिगरी ठीक है तो कैटिगरी इज इगल दो यह हो जाएगा औ�
7:02
इसको बंद भी करूँगा इस तरह से तो category is equal to यह आ जाएगा इसकी जगह पर और ए�
7:08
एम परसेंट भी रखना पड़ेगा क्योंकि एम परसेंट भी रिप्लेस कर रहा हूँ मैं रिप्लेस ऑल करता हूँ और देखता हू�
7:13
यू आर लाइट ठीक बना कि नहीं हार यू आर लाइट ठीक बन गया कैटिगरी इवेल्ड इवेल्ड ट्रॉप्स ट्रॉप्स कैटिगरी तो जो भी कैटिगरी यहां से पास की जाएगी वह यू आर लाइट को मिल जाएगी अब डेशन के टाइम पर भी और कंपोनेंट इड �
7:43
article दिख रहे हैं क्या नेक्स्ट करके भी मुझे article दिख रहे हैं हां दिख रहे हैं बढ़िया क्या औ�
7:48
नेक्स्ट करके भी article दिख रहे हैं तो यहां पर हम लोग कुछ इस तरह से करते हैं और एक और नेक्स्ट करूंगा त�
7:56
से मुझे मिलेंगे और यहाँ पर देखो मैं नेक्स नेक्स करता रह सकता हूं जो तक आर्टिकल्स उपलब्ध है किसी भ�
8:01
आर्टिकल को मैं खोल सकता हूं यहां पर क्लिक करके इसे कि देखो प्लेयर रिप्लेसमेंट हो रहे हैं आईपीएल में कौन-कौ�
8:06
रिप्लेस हो रहा है देखिए लेते हैं जल्दी से आइटम्स एंपर रिप्लेस हो रहे हैं और अच्छे प्लेयर्स देखत�
8:10
हैं जोफ्रा आर्चर रिप्लेस हो रहे हैं उसी के साथ सच पैट कमेंट रिप्लेस हो रहे हैं बट टिम जॉइस रिप्ले�
8:15
विच इज ऑलसो अगुड बॉलर ठीक है तो अच्छे बॉलर है टिम साउथी भी तो क्रिकेट का व्यूआर डिस्कस करेंगे इसको बंद कर देता हूं तो यहां पर मैं क्या करूंगा कि वापस से आउए न्यूज आपके अंदर और मैं अब बेसिकली क्या जाता हूं कि रिय�
8:45
और यह करने के लिए मुझे क्या करना पड़ेगा मुझे रियाट राउटर का सेट अप ढूंढना पड़ेगा और मैं यह कोशिश करूंगा пото�
8:54
यह जैसे एंटरेटेइनमेंट पर क्लिक करें तो मैं क्या करूं एंटरेटेइनमेंट पर चले जाओ जैसे कि मेरी मान लो य�
8:59
app host होने वाली है mynewsmonkey.com पर तो mynewsmonkey.com slash entertainment पर कोई भी जाए त�
9:06
उसको entertainment से related साइड आर्टिकल दिखें slash science पर जाए तो science related साइड आर्टिकल दिखे�
9:11
उसके लिए react router को setup करना पड़ेगा ठीक है वो हम क्या करेंगे अगली वीडियो में react router को setup करेंग�
9:17
और कुछ ऐसा करेंगे कि अगर कोई भी क्लिक करें इन प�
9:21
तो हमारे जो routes है वो change हों सबसे पहले तो उप�
9:26
अभी तो ये slash about है जो कि नहीं होना चाहिए तो इसको slash about अभी के लिए home page मुझे यहाँ पर देखना ह�
9:31
slash about अगर मैं इसको कर भी देता हूँ तब भी articles load हो रहे हैं क्योंकि मैंन�
9:35
setup भी नहीं किया है reactor router about component भी नहीं है home पर click कर रहा हू�
9:39
तो देखो page भी नहीं load हो रहा है क्योंकि href use किया हुआ है मैंने link to use नहीं किया हुआ ह�
9:43
तो यह सारी चीज़ों को fix करेंगे हम लोग आने वाले videos में औ�
9:47
यहाँ पर आप लोग जो है इस आपको enjoy कर रहे हो नहीं कर रहे हो मुझे जरूर बताना एक कमेंट आया था कि यह ज�
9:54
स्पेस है थोड़ी बढ़ाई जा सकती है तो यार इसके लिए कस्टम सीएस लिखी जा सकती है आप कस्टम सीएस लिख लो ए�
9:59
23 20 23
10:17
देना नहीं तो अगर आपको लग रहा है कि यह स्पेस कम ज्यादा है तो आप अपने साथ से फिक्स कर सकते है�
10:23
मैं 40 करते हूं चलो स्पेस अगर किसी को लग रहा है कि कम या ज्यादा है तो ठीक है तो अगर मैं इस दिल न�
10:29
लिखों तब भी कोई फर्क नहीं पड़ेगा ठीक है तो यह चीज हम लोग कर लेंगे मार्जिन को 40 पिक्सल कर देत�
10:35
हूं ठीक है तो यह एचवन हमारा इसमें मार्जिन को 40 पिक्सल कर देना फॉर्टी रोडी ज्यादा लग रही ह�
10:39
तो मैं इसको 35 भी करूँगा ठीक है किसी को कम लग रही है तो वो अपने साथ से जादा कर सकता ह�
10:44
अपने computer में मैं कहाँ पर जाओंगा इसको करने के लिए news के अंदर ही रहूँग�
10:49
और ये जो text center है इसमें style style is equal to सबसे पहले एक bracket लगाओंग�
10:55
जावास्क्रिप्ट यूज कर रहा हूं इस बात के लिए फिर एक लगाऊंगा ऑब्जेक्ट के लिए और यहां पर मार्जिन को मैं कर दूंगा कुछ इस तरह से ठीक है ऐसे कर दूंगा और अभी जो है इसको 35 करूंगा 35 और अभी जो है इसको रिलोड भी करूंगा तब भी 35
11:25
देखना चाहूँगा यहाँ पर, वो क्या है, कि फोन में कैसी दिख रही है आप, क्योंकि अगर फोन में करबड़ दिख रही है आप, तो हम उसको ठीक करेंगे, ठीक है
11:32
तो यहाँ पर देखो, आप जो है, फोन में भी ठीक ठाक दिख रही है, नेक्स्ट करूँ अगर मैं तो बढ़िया यार और क्या चाहिए और क्या चाहिए जिन्दगी से अगर मैं कोई भी क्लिक करता हूँ यहाँ पर तो फोन में सही चल रही है एक चीज की जा सकती है कि यह जो हमारा डिव है यह वाला डिव क्लास इगल टू कार्ड यह सेंटर्ड �
12:04
यहां पर ऐसे भी कर दो तो यह भी अच्छी स्पेस ले रहा है विच इस गुड यार तो एक काम करते हैं ना हम लोग इस 18 रेम क�
12:10
अपने रखा ही क्यों अक्शन लिए बूट सब्सक्राइब कोड कॉपी करके ले रहा तो यह टीन रेम रखा हुआ था बतानी क्यो�
12:15
तो news item के अंदर जाके ही जो 18 राम का stylus को रखाते हैं, नहीं चाहिए मेरे को
12:20
ठीक है, save करता हूँ, और मेरे साप से हमने app को और बहतर बना दिया
12:24
appearance के साप से बहुत बढ़िया हो गई app हमारी, और बिलकुल uniform दिख रहे हैं अभी items
12:28
actually width मिल गई है जगह मिल गई है सारे के सारे हमारे articles क�
12:32
तो category change करके देखते हैं एक बार अगर मैं यहाँ पर science रखू�
12:37
तो यहाँ पर देखो scientific articles दिख रहे हैं बढ़िया यार बहुत बढ़िय�
12:42
तो अभी हमने काफी बढ़िया बना लिया है और अगर phone में देखे तो भी app बहुत बढ़ी ह�
12:47
वाबाईवा अब तो और भी अच्छा लग रही है आप हमारी next पे click करो तो कुछ इस तरह से दिख रही ह�
12:51
phone में भी लोग enjoy करेंगे इस application को और उसी के साथ सा�
12:55
यहाँ पर अगर कोई भी end point change करेगा तब भी reload हो रहा है but अभी इन endpoints प�
12:59
काम बागी है react router का setup बागी है जो कि अगली वीडियो में किया जाएगा तो तब तक के लिए आप लोग यहाँ click करके इस playlist को save कर�
13:05
यहाँ click करके bookmark कर लो इस playlist को अभी के लिए इस वीडियो में इतना ह�
13:10
guys thank you so much guys for watching this video and I will see you
13:14
next time
#Business News
#Company News
#News
#Online Media
#Sports News
#Technology News