Fetching API Key from News API _ Complete React Course in Hindi #24

Name: Fetching API Key from News API _ Complete React Course in Hindi #24 | Humix Video
Uploaded: 2024-02-10T16:51:04+00:00
Duration: 14 min 22 s

0:00
आपको किस तरह से हम लोग सेट अप करेंग�
0:02
NPM run start यहां पर जल्दी से लिखोंगा और जल्दी से यह start भी हो जाना चाहिए है�
0:06
आप लोग न अगर यह प्लेलिस्ट एकसेस नहीं कर रही हैं अभी तक तो जरूर कर रहे हैं �
0:10
आप लोग यहां पर news API को देखेंगे देखो यार इमानदारी से बात बताओ�
0:14
तो मैंने भी news API की documentation को काफी टाइम से नहीं पढा ह�
0:18
मैंने बहुत पहले यूज करवा ही थी इसी चैनल पर शायद कुछ न कुछ हमने बनाया थ�
0:22
बट मैंने याहाँ पर काफी टाइम से इसके end points बगएर को नहीं देखा ह�
0:26
और देरिज ए गुड़ चांस की ए change भी हो गए हो end points तो मैं get started प�
0:30
गलिक करूँगा और यहाँ पर यह कौन-कौन सी APIs हैं यह मुझे बता रहा है त�
0:34
यहाँ पर देखो एक example get request इन्होंने आपर दी हुई है शाय�
0:38
मैं यहाँ पर एक keyword के corresponding search कर सकता हूं औ�
0:42
काफी चीज़ हैं ठीक है तो कुल मिलाकर मुझे जो end में मिलने वाला है एक example response
0:46
कुछ इस तरह का मिलने वाला है देख रहो आप लोग एक example response इन्होंने आपर मुझे दिया हुआ है औ�
0:51
यह response शायद एक array है if I am not wrong जो news है वो एक array होगा कही न कही तो array होग�
0:57
तो एक काम करते हैं यह जो example response है इसको जल्दी से copy कर लेते हैं ठीक ह�
1:01
उप्स मैं end तक copy करना चाहता हूं तो यहां से लेकर यहां तक मैं copy कर रहा हू�
1:07
control c करूँगा बाई देवे मैंने shift दबाया और फिर वहाँ पर click किया copy करने के लिए अब मैं क्या करूँग�
1:13
एक sample response.json फाइल बनाओंगा जिसको मैं बाद में delete भी कर दूँगा ठीक है तो जोड़ा zoom out करता हू�
1:18
ताकि दिखे आप लोगो क्या चीज़े यहां पर है ठीक है तो देखो यहां पर public folder बन कर रहा हूं src बन कर रहा हू�
1:24
बाहर ही एक फाइल डाल रहा हूं sample output.json ठीक है ए�
1:29
json फाइल है और इस json फाइल में उपर एक दिक्कत होगी क्योंक�
1:33
यह चीज़ मैंने हटाई नहीं है शायद कुछ उर्टी सी चीज़ copy होगी होगी तो उसे मुझे ठीक करना पड़ेगा तो यह द�
1:38
dash dash आ रखे हैं इने मुझे हटाना पड़ेगा देखता हूं कहीं और भी क्या dash आ रखे हैं यह तो यह 700 something dash
1:45
हैं तो मैं एक काम करूंगा कि यह जो चीज़ है source इसक�
1:52
replace करदूंगा सिर्फ source से ठीक है I think that should solve the problem
1:56
देखता हूं यार मैं करके replace all करदूंगा और उसी के सा�
2:00
साथ यह जो चीज़ है यहाँ पर यह जो इस तरह से dash और bracket
2:05
लगा हुआ है इसको मैं replace करूंगा सिर्फ bracket से यह भी करक�
2:09
देख लेता हूं and I think this JSON should work fine तो यहाँ पर अभ�
2:15
JSON बिलकुल ठीक से मेरे असापद से चल गई है rightly करक�
2:19
format document में करूंगा तो यह format भी होगई है JSON तो यहाँ पर देखो कुछ news वगरा यहाँ पर इन्होंने दे रखी ह�
2:25
टीके यह real time news नहीं है यह सिर्फ sample output है पर sample output का मैं इस्तिमाल करने वालू हूं आप लोग देख�
2:30
यहाँ पर status okay, total results इन्होंने बता दिये कितने return और उसके साथ साथ यहाँ पर इन्होंने source ID दिया हुआ है फिर इसक�
2:38
बाद author दिया हुआ है किसने लिखा है फिर title दिया हुआ है news का तो यह काफी बड़िया है तो articles जो हैn 835 आए है औ�
2:44
articles वाले array के अंदर यहाँ पर आप लोग देखो कि मुझ�
2:48
सारे के सारे articles मिल रहे है यहाँ कि यह मेरे news items का काम करेंगे ठीक है क्या किसी तरह से मै�
2:52
limit कर सकता हूँ number of articles को definitely कोई ना कोई तरीका होगा तो इसकी documentation को हम लोगों को पढ़न�
2:57
पढ़ेगा दियान से इस चीज को देखने के लिए तो यहाँ पर इनकी documentation में और भी नोने बहु�
3:02
सारी बाते बता ही हुई हैं तो वो सब आप लोग यूज़ कर सकते हूँ अब यह के लिए मैं क्या करूँग�
3:06
यहाँ पर login पर क्लिक करूँगा और मैं एक नए अकांट बनाओंगा और मैं यहाँ पर अपनी सारी details डाल दूँग�
3:14
और उसी के साथ साथ एक password चूज कर लेते हैं ठीक है और I am not a robot क्या मैं शकल से robot दिखता हू�
3:24
कॉमेंट में जरूर बताना submit करो और उसी के साथ साथ save भी कर देते हैं यह लो मेरी API की बढ़ रही ह�
3:31
ले लो सब लोग मैं change कर दूँगा बैदे बे बता दूँगा पिछली बार मेरी क्या हवा गरी थी API की क्या आप लोगों न�
3:37
मुझे मालूम है तो इस बार API की नहीं मिलेगी आपको तो अपनी API की जेनेरेट कर लेना ना दिक्कत क्या आरही ह�
3:45
अब यहाँ पर मैं क्या करूँगा कि documentation पर जाओंगा और documentation पर जाने के बाद get API की पर क्लिक करूँग�
3:53
तो API की तो मुझे मिल चुकी है इन्होंने यहाँ पर एक बात बोली थी आपकी जितनी भी request होंगी उसमें आपकी API की लग कर मिलेगी आपक�
4:02
तो इन्होंने यहाँ पर बहुत सारे examples दे रखे हैं Node.js के example दे रखे हैं देखो इन्होंने fetch API का भी दे रखा है के example
4:08
इन्होंने अपना एक package बना रखा है यार NPM का लेकिन इस course में मैं आप लोगो को यह चीज नहीं recommend करूँगा कि हम लो�
4:16
आप चाहो तो इसको use कर सकते हो अपनी production application में बड़ हम सीखेंगे नहीं उतना अगर मैंने इसी को use कर लिय�
4:21
क्योंकि पका पकाया खाना यहाँ पर आपको मिल रहा है बढ़िया यार इनक�
4:25
client libraries भी हैं बढ़ हम लोग क्या करेंगे directly end points को hit करेंगे ठीक है तो यहाँ पर देखो इनके दो main end points
4:31
हैं एक तो everything एक top headlines तो हम यह वाला end point hit करेंगे ठीक है तो यहाँ पर देखो end point everything हमे�
4:37
चाहिए top headlines वाला end point तो इसमें देखो मेरी API की यहाँ लगी हुई है तो अगर मैं जाँ कुछ इस तरह से अपन�
4:43
browser में और इसको enter मारू तो यह देखो इन्हों न मुझे top headlines दे दी 38 results दे दी तो हम क्या करेंग�
4:49
अभी के लिए जो top headlines हैं हमारी सिर्फ उनको ही हम यहाँ पर display कराएंगे क्या कोई तरीका है जिसस�
4:55
मैं keyword search कर सकूं तो यह देखो q है q एक parameter है जो कि मैं use कर सकता हूं तो मैं question
5:01
mark q is equal to लिख सकता हूं तो मैं आपका कुछ ऐसे कर सकता हूं and sorry at the rating and q is equal to let us say cricket ठीक है अगर मैंन�
5:11
आपर q is equal to cricket लिखा तो कुछ आया नहीं यार मैं देखता हूं country is equal to मैं country is equal to हटा देता हूं तीक है मुझ�
5:18
यहाँ पर किसी specific country की news नहीं चाहिए अब यहां पर देखता हूं देखो अब आगया cricket ऐसे wants to get to the bottom
5:24
England cricket created Dexter dies aged 86 sad news PCB hands Umar Akmal 3 year ban from all cricket तीक है तो मतलब ठीक ह�
5:36
copy करते हैं इसको ठीक है और copy करने के बार हम क्या करेंग�
5:40
के सारी के सारी जो news है वो मेरी यहां पर आनी चाहिए पर अभी के लि�
5:45
मैं क्या करूँगा response को इसे copy करूँगा और यह मेरा response होगा हो मेरा sample response वाली फाइल में जाने वाला क्योंक�
5:51
यह वाला sample response मैं इसे नहीं करूँगा और यहां पर मुझे वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वा�
6:24
पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर �
6:54
7:24
7:54
ताला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वाला पर वा�
8:24
कुछ इस तरह से मैं इस्तिमाल कर सकता हूँ. अब मैं news item को अपने जितने भी title, description है�
8:29
वो पास कर सकता हूँ. मैं आपको दिखाता हूँ यहाँ से मेरी app.js, sorry news.js कहां पर हैं
8:33
मैं आपको कुछ इस तरह से कर सकता हूँ. मैं लिख सकता हूँ title is equal to और मैं लिख सकता हू�
8:38
my title और मैं लिख सकता हूँ description is equal to my d.e.s.c
8:46
मान लो मैं ऐसे कुछ इस तरह से लिखता हूँ. तो आप लोग देखो यहाँ पर कहां गए तुम local host
8:54
तो यहाँ पर यह कहा रहा है, style prop expect some mapping from style properties to values not a string
8:59
तो यहाँ पर कुछ चीज़े मुझे चेंज करनी पड़ेंगी सबसे पहले तो class को replace करना पड़ेंगा class name से
9:05
class is equal to को class name is equal to से और उसी का साथ सा�
9:09
यहाँ पर देखो एक inline style यूज़ हो रखा है उसको मैं हटाऊंगा. width 18rem इसकी यूज हो रखी है inline style
9:14
तो इसको मैं क्या करूँगा एक object बना दूँगा. इस तरह से एक object बना दूँगा
9:18
कुछ इस तरह से मैं लिखोंगा जावा स्कृप्ट के लिए. कुछ इस तरह से लिखोंगा एक object के लिए
9:22
और 18rem जो लिखा हुआ है इसको मुझे एक string बनाना पड़ेंगा
9:26
विट को मुझे की बनाना पड़ेंगा जावा स्कृप्ट object की. तो कुछ इस तरह से मुझे करना पड़ेंगा
9:30
I think this should work just fine. अभी देखते हैं, react app चालू हो गई
9:34
हाँ react app तो चालू हो गई, कोई दिक्कत वाली बात नहीं है. क्या कोई error है
9:38
नहीं कोई error होना तो नहीं चाहिए, बड़ेंगा. तो नहीं, कोई error नहीं है, ठीक है
9:44
और news item के अंदर कोई दिक्कत आ रही है? क्या आ रही है? href attributes
9:48
तो href के अंदर कोई वालिए चीज डालनी बड़ेंगा. href is equal to, मैं यहाँ पर slash news item
9:54
यहाँ news detail ऐसे कर देता हूँ, ठीक है? अभी के लिए, just for the sake of getting rid of this error
10:00
मैं reload करूँगा, अभी कोई error नहीं है आपर, ठीक है? हाँ यहाँ पर image नहीं दिखा थी, हाँ मुझे बता ह�
10:04
इसे अच्छा नहीं दिख रहा है, बड़ेंगा, हमने कुछ success जरूर हासल कर रही है अभी तक
10:10
तो एक काम करेंगे, कि यह जो सारे news items हैं, definitely इस तरह से हम लोग नहीं भिखेरेंगे
10:14
हम क्या करेंगे, आपर class name देंगे, class name is equal to container, और container के साथ साथ
10:21
इसको उपर मैं margin भी दे देगेंगे थोड़ी बहुत, ठीक है? तो मैं आपर my3 दे दूँगा इसको एक, और उसी के साथ सा�
10:28
यहाँ पर, एक h2 दूँगा, news monkey top headlines, ठीक है? Top headlines कुछ इस तरह से लिख दूँगा, तो यहाँ पर जो है
10:39
मारी top headlines यह दिखेंगी, ठीक है? अब मैं क्या करूँगा, इसको div.row करूँगा
10:46
तो यह तीन तीन करके एक row में आएंगी, ठीक है? और अगर मैं ऐसा करूँगा, तो आप लोग देखो
10:52
कि यह एक row में मुझे चाहिए, अक्शली, तो इस row में लाने, इसको एक row में लाने के लि�
10:57
मैं क्या करूँगा, वो भी आप लोग को मैं दिखा देता हूँ, तो इसको एक row में लाने के लिए, मैं क्या करूँगा
11:02
class is equal to row किया, अब columns बनाओंगा मैं, ठीक है? तो मैं लिखूँगा, div.colmd3, तो colmd3 का क्या मतलब है
11:12
अब मैं inspect करूँगा इस चीज़ को, और आप लोग को elements में जा कर दिखाऊँ
11:16
colmd3 काँपर आ रहा है, तो ये तो मेरा container है, ये मेरी row है, ये एक row है, ठीक है
11:20
अब यहाँ पर आप लोग देखो, जब मैं colmd3 की बात करूँगा, तो ये वाला column आ गया
11:24
इसी के अंदर मैंने सारे के सारी चीज़रे डाल दी, बट मैं क्या करूँगा, कि इस column के अंदर सिर्फ एक news item डालूंगा, और जो अगला news item है मेरा
11:31
उसको कहां डालूंगा मैं, उसको मैं डालूंगा एक दूसरे colmd3 में, मैं कुल मिलांगे क्या करूँगा, इस चीज़रे को replicate करदूंगा
11:36
यह जो colmd3 हमने लिखा हुआ है, इसको मैं control-d, control-d करदूंगा
11:41
save करदूंगा, और आपलों देखो यहाँ पर, यह कुछ इस तरह से दिखाई पढ़ रहा है, और यह जो news item इसको मैं हटाता हूं अभी के लिए, यह सब चीज़रे मैं हटाता हूं अभी के लिए
11:50
और यह एक row के अंदर है, तो एक row के अंदर तीन items हैं, अगर मैं इसको colmd4 करदूंगा
11:55
तो बारा की ग्रिड होती है बूट स्ट्राप में, अगर आपलों को नहीं बालूं यह क्या हो रहा है
11:59
और आपलों अपने स्टाइल्स वग़रे देना चाहते हैं, बूट स्ट्राप आपको नहीं हाती, बेसिक CSS की knowledge है
12:03
तो मैं आपको गुलमिला के यह बतादूं कि colmd3 का मतलब, मीडियम डेवाइसेज में, यह क्या होगा, चार कॉलम्स ले लेगी, ठीक है
12:10
बारा कॉलम्स की ग्रिड होती है बूट स्ट्राप में, चार कॉलम्स ले लेगी मतलब, 4 multiplied by 3 is equal to 12
12:15
तो इकदम एकवली अलाइन हो गया हैं, यह सारे के सारे आइटम्स, ठीक है, तो अगर यह चीज़ कंफ्यूसिंग लग रही है, आपको बूट स्ट्राप अगर नहीं आती है, तो बूट स्ट्राप बहुत सिंबल से चीज़ है
12:25
अगर आप अपनी CSS लिखना चाहते हैं, तो कोई दिक्कत नहीं है, अभी के लिए आप क्या कर सकते हैं, बिल्कुल इस तरह से जैसे मैंने इसको लिखा हुआ है, वैसे लिख सकते हैं, call md4 से directly आपके इस तरह से यह चीज़ आ जाएगी, ठीक है, अब मुझे क्या करना ह�
12:55
मैंने title is equal to my title किया हुआ, description is equal to my description किया हुआ, बड़ एक्शॉल में मैं क्या करूँगा
13:00
state का इस्तिमाल करना चाहूँगा, और props को पास करना चाहूँगा, to news item, ठीक है, तो state मेरी क्या होगी
13:07
state मेरी यहीं पर होगी, कुछ इस तरह से दिखेगी मेरी state, sample output जैसे है
13:13
और उस state को read करके मैं सारी के सारी news display कराऊंगा, अब जहाँपर देखो
13:17
URL to image भी नहीं दिया हुआ है, which is amazing, क्योंकि इस URL को मैं एक्शॉल में यूज कर सकता हूँ
13:22
तो मैं अगर इसको यहाँपर copy करूं और अपने SRC के अंदर डालूं, निज आइटम के
13:26
तो मैं अगर यहाँपर, अपने SRC के अंदर डालूं, आइडियली तो मैं क्या करूंगा
13:32
इसको भी पास करूंगा, प्राप्ट के तारपर, बड़ लेट सी यह कैसे दिखरा, वाव, इत वाक्स, इत वाक्स अमेजिंग
13:39
तो यार आने वाले वीडियों में हम लोग क्या करेंगे, कि ये जो इमेजेस हैं, इनको डाइनामीकली
13:44
उसी के साथ साथ हम लोग क्या करेंगे, कि अपनी आप को चोड़ा अच्छी तरह से स्ट्रॉक्चर करेंगे, और API से डेडा को रीड करके यहाँ पर डिस्प्लेय कराएंगे
13:52
अब इस वीडियो में इतना है, बहुत ख़बगाब आपको बहुत ख़बगाब आपको बहुत ख़बगाब आपको बहुत ख़बगाब आपको बहुत ख़बगाब आपको बहुत ख़बगाब आपको बहुत ख़बगाब आपको बहुत ख़बगाब आपको बहुत ख�

Fetching API Key from News API _ Complete React Course in Hindi #24

codehunter.online

How to become a Blockchain Developer in 2022_ _ 🔥 Complete Roadmap + Salary + Tech Stack

How to make the Best Time Table_ _ Time Management for Students

Government or Private _ What job to do_

26/11 Mumbai Attack: The Darkest Days in Indian History

HHS Announces Layoffs Amid Major Restructuring Effort

Why Are Republicans Opposing Increased Federal Employee Pension Contributions?

Delicious Slow Cooker Curry White Beans | Dining In With Danielle

How to Organize Your Bookmarks Efficiently with Bookmark Bar Switcher

Blackview A90 - How To Unpack Rar & Zip Archives

How to Add Event to Calendar in OPPO FIND X5 LITE - Use Calendar

Equal Credit Opportunity Act: What is it? Real estate license exam questions.

Mastering Medical Bill Negotiations: Discounts, Payment Strategies, and Debt Collection Tactics

Up next in 10

Fetching API Key from News API _ Complete React Course in Hindi #24

codehunter.online