Up next in 10
Component Structure of our NewsMonkey React App _ Complete React Course in Hindi #23
6K views
Feb 10, 2024
The video "Component Structure of our NewsMonkey React App _ Complete React Course in Hindi #23" likely explores the architecture and organization of components within the NewsMonkey React application, as part of a comprehensive course presented in Hindi. In this tutorial, viewers can expect the instructor to discuss the design and hierarchy of components that make up the NewsMonkey application. The instructor may explain the purpose and functionality of each component, how they interact with each other, and their roles in the overall application structure. Through explanations and practical demonstrations provided in Hindi, viewers can gain insights into designing scalable and maintainable React applications. This video aims to empower Hindi-speaking audiences with the knowledge needed to structure and organize their React projects effectively.
View Video Transcript
0:00
आपने पिछले वीडियो में हम लोग ने यहाँ पर देखा था किस तरह से इस प्रोजेट को सेट अप करते है��
0:04
इस प्रोजेट में हम लोग निुज आप बनाने वाले हैं मैं सबसे पहले तो इस application को News Monkey का नाम दूंग��
0:09
इस प्रोजेट में नाम दूंगा था कि इस प्रोजेट में नाम दूंगा था कि इस प्रोजेट में नाम दूंगा था कि इस प्रोजेट में नाम दूंगा था कि इस प्रोजेच्च नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में न��
0:39
दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम द��
1:09
गा प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस ��
1:39
प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्��
2:09
प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्��
2:39
प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्��
3:09
प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्��
3:39
प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्��
4:09
प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्��
4:39
प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्रोजेच्च में नाम दूंगा था कि इस प्��
5:09
बूटस्ट्राप इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए ��
5:39
बाद अबी के लिए हमें रियाक्ट में फोकस करना है मुझे पता है आप लोग बहुत अच्छे डिजाइनर्स हैं जो लोग भी कॉमेंट कर रहे हैं और उनको थोड़ा बहुत कहीं न कहीं लग रहा होगा कि या डिजाइन और अच्छा हो सकता था पर इस वीडियो इसल��
6:09
जो पूरा कोड आपके पास है आप वहाँ पर अपनी एक गेट अप रिपॉज़ेटरी बना कर रहे हैं उसमें tailwind CSS में उसको इंप्लिमेंट करो और आपक��
6:15
लिए भी अच्छा रहे है क्योंकि आपने एक प्रोजेक्ट बनाया जोकि मेरे प्रोजेक्ट से अलग दिखेगा आपको self satisfaction भी होगा और आप उसक��
6:21
अपने resume में भी आड़ कर सकते हो I hope that makes sense अभी जल्दी से क्य��
6:25
करेंगे कि हमने आपर add तो कर लिया है अपना bootstrap मैं आप��
6:29
क्या करूँगा news monkey करूँगा लिखूँगा news monkey और यहाँ पर लिखूँगा get daily news free ठीक है get your daily dose of news for free यह अच्छा लग रहा है ठीक है त��
6:50
कुछ भी लिख सकते हैं यार आप कुछ भी लिख सकते हैं आपको कोई भी बंदिश नहीं है कि आप यह नहीं लिख सकते वो नहीं लिख सकते औ��
6:56
यहाँ पर मैं क्या करूँगा content लेकर आउंगा कुछ इस तरह स��
7:00
news monkey is a news app which can be used to grab quick news bites daily quick daily news bites
7:12
if you are interested in news weather politics and sports news news monkey is for you
7:30
ठीक है मैंने एक random सा description लिखती हूँ या मुझे पता है बहुत सारे लोग इसको भी change करना चाहेंगे तो कर लेना change यार कोई दिक्कत वाली बात नहीं ह��
7:36
ठीक है index और CSS से मैंने हटा दी जो भी CSS थी मेरी ठीक ह��
7:40
अब क्या करूँगा मैं यह सारे काम करने के बाद मैं आउंगा app.js मैं save करूँगा इसक��
7:45
और देखो मैंने class based component यहाँ पर लगा रखा है अपना और यहाँ पर मैं इसको reload करूँग��
7:49
तो वो बहुत नहीं होगा क्योंकि यहाँ पर कुछ किया ही नहीं है अब हम क्या करेंग��
7:53
bootstrap के navbar को ले कराएंगे components पर click करेंगे navbar पर click करेंग��
7:57
और navbar पर click करेंगे और navbar पर click करने के बाद एक अच्छा सा navbar ले कराएंग��
8:02
और copy करने के बाद हम क्या करेंगे कि paste करेंगे कहाँ पर paste करेंग��
8:08
navbar का component बनाएंगे हमने सीखा है उलड़ी components कैसे बनाते है��
8:12
तो src के अंदर मैं जाओंगा एक folder बनाओंगा components अब जरूरी नहीं है आप यह folder के अंद��
8:16
ही अपने component को डालें बड़े एक structure अच्छा लगता है कि components folder में component ह��
8:20
कोई और folder शायद आप किसी और चीज के लिए बनाएं तो थोड़ा सा organization अच्छा रहता ह��
8:25
तो navbar.js यहां पर मैं लिखूंगा और मैं आप पर लिखूंगा rce, react class based component
8:32
तो इससे क्या होगा कि आपको prop types भी मिल जाएंगे तो अलग अलग तरह की चीजें है��
8:42
प्रॉप टाइब्स भी मिल जाते हैं आपको मुझे definitely प्रॉप टाइब्स डालने पड़ेंगे अगर मुझे नहीं डालने है प्रॉप टाइब्स तो मैं इसको हटा दूँग��
8:48
तो यहाँ पर यह करने के बाद मुझे क्या करूँगा नैव बार का जो कोड ने आपको डाल दूँगा और मैं क्या करूँगा मुझे बताएं कि यह एरर क्यों दे रहा है एरर यह इसलिए दे रहा है क्योंकि मैंने कहीं न कहीं कोई ऐसा टाइग यूज़ किया होगा है ��
9:18
तो मैंने क्लास नेम इस इकल टू को कर लेते हैं मैंने क्लास नेम इस इकल टू को क्यों कर रहा ह��
9:24
सिर्फ क्लास को क्यों नहीं करा क्योंकि उससे यह भी रिपलेस हो जाएगा यह वाला क्ला��
9:28
मैं नहीं चाहता यह रिपलेस हो क्लास नेम इस इकल टू हो गय��
9:32
और उससे के साथ साथ एलाई है एह है वो कौन सा टाइग है जिसके वाज़़े से दिक्कत आ रही ह��
9:36
मैं यह देखना की कोशिश कर रहा हूँ अभी यहाँ पर तो यहाँ मैंने पकड़ लिया है लगता ह��
9:40
यह इन्पूट टाइग है जिसके मुझे इस तरह से ख्लोजिंग ब्राकेट लगाना पड़ेगा पर अभी भ��
9:44
समस्या हल नहीं होई और मैं देखा हूँ क्यों हल नहीं हुई तो यहाँ प��
9:48
एलाई ट्लास नेम इस इकल टू नेव बार था ए था यहाँ प��
9:52
क्या और भी कोई ऐसे चीज़ है हाँ यह HR है देखो यह HR प्रबलम क्रिएट कर रहा है यह HR को भी मुझे इस तरह स��
9:57
बन करना पड़ेगा नाओ विश्ट वर्क फाइं ठीक है तो यहाँ पर देखो मैं इसको रिलोड करूँगा कु��
10:02
भी नहीं होगा क्योंकि मैंने इस component को इस्तिमाल ही नहीं कराएं तो मुझे इसको app.js मे��
10:06
इस्तिमाल करना पड़ेगा क्योंकि app.js वो फाइल है जो कि हमारी render हो डिया है ठीक है तो मै��
10:10
क्या करूँगा div के अंदर जाओंगा यह C वाले variable को हटाओंगा बाइदे मैं आप लोगो बताना चाहूँग��
10:14
कि जो render method है यह एक life cycle method है life cycle method क��
10:18
मतलब क्या होता है जब react एक component को लोड करती ह��
10:22
तो कुछ series of methods run होते हैं आप अभी के लिए कुछ आथा समझ लो कि render
10:26
method run होता है और उसका काम होता है कि screen प��
10:30
HTML को render करना सबसे पहले तो JSX को HTML पर compile करना उसके बा��
10:36
यह render करेगा किसको render करेगा यह सारा का सारा जो HTML हम ने लिखा ह��
10:40
इसको render करेगा ठीक है अभी के लिए मैं क्या करूँगा यहाँ पर मैंने div लिखा हुआ ह��
10:44
मैं navbar को use करने की कोशिश करूँगा तो मैं लिखूँगा यहाँ पर navbar
10:48
इन फाक्ट मैं कुछ इस तरह से लिखूँगा navbar और यहाँ पर देखो य��
10:52
मुझे suggest करेगा कौन सा navbar आप लाना चाहते है तो इसने देखो यह समझ गय��
10:56
कि मैं component slash navbar नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर न��
11:28
नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर नवर पर न��
11:58
नहीं हां यहां से लेके यहां तक खटाना है मुझे तो class name is equal to यह है मेरा क्य��
12:04
नवर content नहीं यह देखो home यहां से स्टार्ट हो रहा है तो बहुत ध्यान से देखना पड़ाएगा देखो यह link है एक और यह वाल��
12:09
एलाई यह मुझे डिलीट करना है ठीक है यह डिलीट करना है मेरे भी मैं आप पर एक about इस चारा स��
12:15
बनाते हूँगा ठीक है about और यहां पर slash about लिख दूँगा सेव करूँगा और यहां पर href is equal to
12:22
href is equal to यहां पर हरे पर हरे पर दिखना है तो हमने पर तो हरे पर दिखना है तो हरे पर दिखना है तो हरे पर दिखना है तो हरे पर दिखना है तो हरे पर दिखना है तो हरे पर दिखना है तो हरे पर दिखना है तो हरे पर दिखना है तो हरे पर दिखना है तो हरे पर दि��
12:52
एक basic level पर अपनी news monkey अप के नैव बर को initialize कर दिया है इसकी बार प्लान है एक news component बनाने का जो की यहां पर reside करेगा तो उसको भी बनाने के लिए मैं क्या करूँग��
13:02
components के अंदर जाओंगा एक नई फाइल बनाओंगा और मैं लिखूंगा news.js और मैं यहां पर क्या करूँगा rce लिखूंगा react का class based component और अभी के लिए मैं क्या करूँगा लिखूंगा this is a news component टीके अब मैं क्या करूँगा की एक news item component बनाओंगा बड़ उससे भी पहले मैं ��
13:32
अप दिकाओंगा तो this is a news component आ गया अब मैं news item component बनाओंगा तो उसको बनाने के लिए मैं क्या करूँगा नई फाइल बनाओंगा news item.js बनाओंगा rce करूँगा react class based component देखे दो कितना असान हो जाती हैं चीजे rce एंटर सीधा पूरा component मिल गया मतलब इतनी असान हो जाती ��
14:02
है बड़ एक टाइम पर आपको स्पीड चीजी होती है एक टाइम पर अगर कोई आपको रिक्रूड भी करना था उसको भी चाहिए कि आप तेज कोड लिखने वाले इनसान हूँ तो वो भी हमें बनना है अब यहाँपर मैं लिखोंगा this is a news item और यहाँपर मैं क्या करू��
14:32
तो यहाँपर इस आपको बन करूँगा निज आईटम अब देखो निज आईटम किसके अंदर है निज के अंदर है यहाँपर है निज आईटम देख रहे हो आप लोग यहाँपर है निज आईटम यहाँपर है निज आईटम जो निज आईटम कामपोनेंट है वो नि��
15:02
आईटम अब अगर मुझे चेंज करना पड़ गया निज आईटम मैं अपने निज आईटम कामपोनेंट में जाओंगा यहाँपर निज आईटम 2 कर दूँगा और सब जगा��
15:08
जाएगा वो मुझे एक एक कर के चेंज नहीं करना है तो यह एक आप लोग��
15:13
टेस्ट देने के लिए इस बात का कि रियाक्ट को क्यों इस्तेमाल किया चाह रहा है फिर इस��
15:17
इसे के साथ साथ शायद आप लोग यूज करना चाहेंगे एक निज डेटेल कंपोनेंट जिसकों हम आगे बनाएंगे अभी के लिए हमें निज और निज आईटम कंपोनेंट क��
15:23
यहाँपर इस्तेमाल करना है उसे के साथ साथ हमको निज एपिआई से डेटा भ��
15:28
पैच करना है तो काफी काम है भी उसको करेंगे बट अगर आप लोगने अभी तक एप प्लेलिस्ट आक्सेस नहीं कर रही ह��
15:32
तो इसको यहां क्लिक करके सेव करना जरूर से और यहां क्लिक करके बुक मार्क करना प्लेलिस्ट क��
15:36
ताकि आप लोगों को सारे के सारे जो वीडियोज हैं वो सीरीज में देखने को मिले��
15:41
और पूरा कोर्स आप लोगों को एंटारिली स्टार्टिंग से एंड तक देखने को मिलें सो अभी के लिए इस वीडियो में इतना है गए��
15:46
आपको बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बह��
#Business News
#Company News
#Health News
#News
#Technology News