Up next in 10
Project 2 Setup + Introduction to Class based components _ Complete React Course in Hindi #22
1K views
Feb 10, 2024
The video "Project 2 Setup + Introduction to Class based components _ Complete React Course in Hindi #22" likely initiates a new project setup within a React course presented in Hindi. In this tutorial, viewers are introduced to class-based components, an alternative to functional components in React. The instructor guides viewers through the process of setting up the project for the second project and explains the basics of class-based components, including their syntax and usage. Through step-by-step instructions and practical demonstrations provided in Hindi, viewers can understand how to create and work with class-based components in React. This video aims to equip Hindi-speaking audiences with the knowledge and skills needed to build more complex React applications using class-based components.
View Video Transcript
0:00
आपको अब भी तक हमने React course में जो भी चीज़े देखी है
0:02
वो हमने एक functional based component की साहता से करी, हमने जब भी component बनाये तो वो एक functions थे
0:07
हमने अभी तक यहीं सीखा है, कि component React के अंदर हमेशा function ही होता है
0:12
बढ़ ऐसा सच नहीं है, React के अंदर components, classes भी हो सकती है
0:16
आसां तरीका functions है, इसलिए हमने functions का इस्तिमाल करके React app
0:20
यह नहीं कि जो हमरी Text Noodles app थी, वो बनाई, बढ़ एकें, हम लोग classes का इस्तिमाल भी कर सकते हैं
0:25
और classes का इस्तिमाल करना आना आप लोग को इसलिए चाहिए, क्योंकि अगर आप लोग इसी React project में काम कर रहे हैं
0:31
मानलो class based component पर आधारत है, तो ऐसा नहीं होना चाहिए कि आप उस पर काम नहीं कर पाएं
0:35
क्योंकि functional based component और class based component में से, अगर आपको functional based component के सारे concepts आते हैं
0:41
React और JSX के बारे में आ गया, अब class based component पर स्विच करने का यह बहुत अच्छा time है
0:45
क्योंकि आपको समझ में तो आएगा ही आएगा, इस बात की guarantee मैं देता हूँ, और आपको कोई भी tension लेने की ज़रूरत नहीं है
0:50
मैं सिखा दूँगा सब कुछ आप लोगों को, class based component इस विडियो में हम लोग देखने वाले हैं
0:54
तो class based component को देखने के लिए मैं demo apps बनाओं फालतों की, उससे अच्छा मैं एक actual app बनाता हूँ
0:59
जिसमें actual में मजा आएगा आप लोगों को, जिस तरह से text tutorials हमने बनाई
1:02
एक usable app है यह mytexttutorials.com के अंदर, हमने सब कुछ host कर दिया
1:08
मजा भी आया, सब कुछ आप लोगों ने करा, और काफी exercises करी हमने इस app से related
1:13
अब time आचुका है हमारे पासे, एक नई app बनाने का, shift right click दबाऊँगा
1:17
open with PowerShell help पर click करूँगा, shift मत भूलना दबाऊँगा, shift right click दबाऊँगा तब ही आपका ये खुलेगा
1:23
और मैं आपर क्या करूँगा, npx create react app और उसके बाद मैं आपर लिख दूँगा
1:30
news app, अब ये news app क्या है, आप लोग सोचोगे, बहुत सारे लोगों को ये command शायद याद न रहे
1:35
which is totally normal याद, आपको रटना नहीं है कुछ भी, आपको create react app जो है वो याद रखना है
1:40
और वो भी याद नहीं रहे, तो आप आकर देखलो कि मैंने कैसे बनाया था इस वाले वीडियो में, क्योंकि आप देखो जो अगर आप बिगेनर हो
1:45
मुझे तो सब कुछ रटा हुआ है, तीक है, मतलब सब कुछ नहीं रटा हुआ है, एक अच्छे level तक रटा हुई है चीजें
1:50
क्योंकि यार मैंने काम किया हुआ इतना ज़ादा इसमें, बट अगर आपने काम नहीं किया हुआ इसमें
1:55
अगर आप जावास्कृप्ट में भी इतना ज़ादा आपने काम नहीं किया हुआ, तो क्या होता है कि आप लोग बिल्कुल भी अच्छी तरह स��
2:02
याद नहीं रख पाएंगे चीजों को, तो आपको references लेने पड़ेंगे, which is totally fine, अब documentation पर जाओ
2:07
create react app के page पर जाओ, मेरी website पर जाओ यार
2:10
आप लोग यहाँ पर वीडियो खोल लो, देखलो मैंने कैसे बनाया था, सिर्फ उतना portion देखलो
2:14
कि कैसे बनाया था मैंने, जैसे कि ये वीडियो में मैंने create react app का उसकर के बनाई थी
2:19
अपनी first application, तो आप लोग इसको खोल सकते हो, और खोल के वापर, और वापर देख सकते हो
2:23
कि मैंने कैसे बनाया था, देखो मैं कहां पर गया, मैंने किस command का use किया
2:27
आप लोग इस तरह से navigate कर सकते हो, और आप लोग पता लगा सकते हो
2:31
मैंने कैसे ये काम किये थे सारे, ठीक है, तो मेरी react app तो अभी भी बन रही है
2:35
जल्दी से एक finish हो जाये, फिर मैं वापर साता हूँ, तो बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत ��
3:07
बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बह��
3:37
बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बह��
4:07
तो कैंसल मत करना इसको होने देना ये चलेगा ठीक है हो जाएगा ये टाइम लेगा अपना बड़ ये हो जाएगा तो देखो अभी भी हो रहा है ये तो अब हम लोग क्या करेंग��
4:16
रियाक लास बेस कमपोनेंट के बारे में पढ़ेंगे तो मैं क्या करूँगा यहां पर ये जो मेरा फोल्टर स्ट्रॉक्षर है तो मैंने अभी अभी देखी लिया कैसा है यहां पर आप देखो SRC के अंदर बहुत सारी फाइल्स हैं और उसके साथ सारे आप लोग देख��
4:46
यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यह��
5:16
हमको वो मिल गई है अब मैं आपर करूंगा क्या जो हमारा function based component है इसको मैं हटा देता हू��
5:21
क्योंकि मैं इसकरना चाहता हूँ react class based component extensions में आकर make sure कि आपन��
5:26
install करी हो यह वाली extension ES6 react redux react redux कहा गई वो extension
5:35
मैंने ES7 react redux GraphQL react native snippets यह अगर आपने install नहीं करी हो यह तो यार इसक��
5:40
जरूर install कर लेना क्योंकि मैं इन snippets का use करने वाला हू��
5:44
तो यहां पर देखो बहुत सारे snippets इन्होंने दिये हुए हैं औ��
5:48
अगर मैं यहां पर क्लिक करूं तो यहां पर देखो बहुत सारे snippets दिये हुए हैं कि इस तरह स��
5:52
class based component यहां पर मुझे लेकर आना है तो RCC मैं लिखोंगा तो मुझ��
5:56
class based component मिलेगा और मैं यही करूंगा RCC लिखोंगा अभी तो इसको बन करता हूँ, मैं RCC जैसे थ��
6:02
टाइप करूंगा RCC और तो यह देखो यह मुझे आटो कमप्लीट टुकर मिल गय��
6:06
अब इसका बतलब यह नहीं है कि मुझे RCC लिखकर ही हमेशा component generate करना है, मै��
6:10
आसे copy करके भी ला सकता था बट RCC लिखना एक थोड़ा सा convenient तरीका हो जाता ह��
6:14
हमारे लिए, यह सारे का सारे snippets है जो कि extension हमको देती ह��
6:18
तो जो create react app थी उसने by default प्रिफर किया एक function based component
6:24
बढ़ हम लोग अभी बात करने जा रहे हैं class based component की ठीक है तो यह logo.svg
6:28
जो है वो मुझे नहीं चाहिए, वो react का जो बड़ा सा logo होता है, वो मुझे अभी नहीं चाहिए, तो logo.svg
6:32
को मैं delete भी कर सकता हूँ अगर चाहूँ तो मैं delete इसलिए कर रहा हूँ कि मैं अपन��
6:36
working directory में सिर वो files रहना चाहता हूँ जिनके साथ मैं काम कर रहा हूँ, ठीक ह��
6:40
तो मैं अभी यहां पर क्या करूँगा, save करूँगा यहां पर लिखूंगा, hello my
6:44
first class based component ठीक है, save कर दिया अब यहां पर देख��
6:52
यह देखो react app यह देख रहो आप लोग मैं इसको reload करता हूँ, controller, हाँ यह देख��
6:58
hello my first class based component ठीक है, आ गया, जो मैंने वापर डाल��
7:02
इसका मतलब class based component मैं बना सकता हूँ पर यहां, difference क्या ह��
7:06
class based component और function based component में, at the end of the day
7:10
हम यहां पर render function बना के उसमें return करते हैं, और function based
7:14
component में directly हम return कर देते हैं, नहीं लेकिन सिर्फ इतना difference नहीं है, मैं आपको बताऊंग��
7:18
क्या क्या differences है, यह हमारा एक basic class based component है, जो चीज��
7:22
हमारे function के अंदर थी, वो हम यहां पर directly बना सकते हैं, यहां पर state
7:26
यहां पर props और उसी के साथ साथ यहां पर और चीज़ें थोड़ी स��
7:32
डिफरेंट होती है, और to be honest अगर आपको class का concept इच्छे से समझ मे��
7:36
आता है, तो यहां पर बहुत सारे methods आप directly यहां पर बना सकते हैं, तो methods क��
7:40
management थोड़ा सा easy रहता है, यहां पर आप this dot करके methods को run कर सकते हैं
7:44
अगर आपको classes में थोड़ी सी भी दिक्कत है, तो मैं कहूँगा यहां पर classes का इतन��
7:48
concept use हो भी नहीं था, आप tension मत लेना, अगर आपको जैसे object oriented programming वेरे उतन��
7:52
पर बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
7:56
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:00
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:04
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:08
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:12
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:16
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:20
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:24
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:28
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:32
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:36
तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए, तो आपको बना चाहिए
8:40
तो हम लोग देखेंगे थ्रुआउट इस प्राजेक्ट की, किस तरह से क्लास बेस्ट कमपोनेंट के साथ काम करना है
8:46
तो यह प्राजेक्ट सिर्फ आप लोगों को क्लास बेस्ट कमपोनेंट समझाने के लिए हैं, ठीक है, हम लोग देखेंग��
8:51
आपको बनाने वाले विडियों में, हम लोग एक निउस आप बनाने वाले है
8:55
तो मैं आपलोग को जल्दी से बतादू निउस आप क्या है, अब निउस एपिआई करके अगर आपलोग सर्च करोगे इंटरनेट पर
9:00
निउस एपिआई डॉट वालजी करके लिंक आपको मिलेगा, ये बिसिकली एक वैपसाइट है, जो की आपको फ्री में निउस प्रोवाइट करती है
9:07
इस एपिआई की डेफिनेटली कुछ लिमिटेशन से, आपको पैसे देने पड़ेंगे अगर आप लोग इसको कमेशली यूज़ करना चाते हो
9:13
बट क्योंकि डेफिनेटली के लिए टोटली फ्री है, आप स्टार्ट आउट कर सकते हैं
9:17
तो प्रोज़ेट बनाने के लिए एक बहुत अच्छी चीज़ है, अब मैं यह नहीं कह रहा हूँ कि यह बहुत ज़दा है, बहुत कम है
9:23
कोई एफ़ॉर्ड कर पाएगा, कोई एफ़ॉर्ड नहीं कर पाएगा, मुझे नहीं पता
9:27
बस यह है कि आप लोग अभी यह वाला जो इसका पैक है, इसका इस्तिमाल कर सकते हैं
9:34
निज एपिऐ वालों का धन्यवाद, क्योंकि डेवलपर नोंने जीरो रखा है, टोटली फ्री
9:39
एक ऐसी एपिऐ, अच्छी एपिऐ है, हमने पहले भी उसकरी है, अगर आपको याद हो तो, मैंने यह एपिऐ पहले भी उसकर बाई है, तो हम लोग तो यार इसी को इस्तिमाल करेंगे, इस प्रोजेक्ट के अंदर
9:47
और एक मीनिंगफुल आप बनाने की कोशिश करेंगे, यह टोटली फ्री है, हम स्टार्ट कर सकते हैं
9:51
स्टार्ट पर डेवलपर पर क्लिक करके, यहाँ पर साइन अब वग़हरा करेंगे अगले वीडियो में
9:55
बट मैं आपलोगो यहाँ पर बताता हूं कि मैं क्या प्लान कर रहा हूं, मैं एक वेबसाइट प्लान कर रहा हूं
9:59
जिस पर हम डेली निउस देख सकते हैं, अब वेबसाइट करता हूं, तब उसकी जो टोटल नंबर अप रिक्वेस्ट हैं
10:06
वो ख़तम हो जाएंगी, तो इसलिए सब लोग अपनी अपनी एपिऐ की उसकर के, अपने अपने डेप्लॉयमेंट करना
10:12
मेरी एपिऐ की कस्तिमाल मत करना, इन फाक्ट मैं दोंगा भी नहीं अपनी एपिऐ की, इगर मैंने दे दी अपनी एपिऐ की
10:17
तो 100 रिक्वेस्ट पर डे ही हैं, सिर्फ फ्री में वो एकज़ॉस्ट हो जाएंगी, सब लोग अपनी अपनी फ्री एपिऐ की ले के करना काम
10:22
तो हम क्या करेंगे कि अगले वीडियो में इसका डेवलप्प्रेंट आपको करेंगे, अगले वीडियो में इसका डेवलप्प्रेंट आपको करेंगे, आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प��
10:55
प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़ा नहीं आपको प्रेड़��
#Computer Science
#Engineering & Technology
#Other