Up next in 10
Adding more Logic to TextUtils _ Complete React Course in Hindi #8
10 views
Feb 10, 2024
The video "Adding more Logic to TextUtils _ Complete React Course in Hindi #8" is likely a continuation of a React course presented in Hindi. In this video, viewers can expect to delve deeper into enhancing the functionality of TextUtils, a component or utility within a React project. The instructor likely demonstrates how to add additional logic, such as more text manipulation features or advanced functionalities, to TextUtils. Through explanations and practical demonstrations provided in Hindi, viewers will expand their knowledge of React development and learn how to implement more sophisticated features in their projects. This tutorial aims to empower Hindi-speaking audiences with the skills needed to build robust and versatile applications using React.
View Video Transcript
0:00
बुका बुका बुम बुम गाइस आज के इस वीडियो में हम लोग देखेंगे कि किस तरह से ये जो हमारा text utils है इसको हम और enhance कर सकते है��
0:07
तो यार npm run start तो डालना ही चाहिए था मुझे उसके बाद ही आना चाहिए था अपनी शकल लेक��
0:11
बट अब मैं आई गया हूँ तो आप थोड़ा सा वेट कर लो और इस बार तो development server भी महरबान ह��
0:16
क्या बताओ इतनी जल्दी खुल गया ठीक है तो यहाँ पर देखो हमने पिछले वीडियो में convert to uppercase पर क्लिक किया थ��
0:21
तो यह uppercase में convert हो गया था अब हम क्या करेंगे कुछ और functionalities add करेंगे यह text तो हमारे पास है ही यह एक state का part है और जैसे ऐसे मैं इसको change करूँगा हमारे app की state change होती जाएगी ठीक है अब यहाँ पर मैं क्या करूँगा कि जो हमारी state है मैं उसके कुछ variables को यहाँ पर render करूँगा ठीक है तो मैं काम करूँ��
0:53
बना देता हूं ठीक है और मैं एक और बनाऊंगा इसके नीचे और मैं क्या करूंगा कि एक फ्रैंगमेंट में इसक��
1:01
राप कर दूंगा एक जेस एक्स फ्रैंगमेंट में कि मैं एक चीज रिटर्न कर सकता हूं मैं आपको बताया था मैं ए��
1:06
चीज नहीं कर सकता और मैं एक और कंटेनर बनाऊंगा और मैं यहां पर डिव डॉट कंटेनर जैसे ही लिखूंग��
1:10
वैसे आप लोग यहां पर देखो कि एक कंटेनर यहां पर आ गया ठीक है अब मैं क्या करूंगा कि इसमें एक बाइं��
1:16
इसे अमाल करूंगा और यहां पर लिखूंगा यॉर टेक्स समरी और उसी के साथ यहां पर एक पराग्राफ लिखूंगा और इसक��
1:24
अंदर में लिख दूंगा लेटर से मेरे टेक्स्ट में इतने वर्ड्स है तो मैं वह यहां पर लिख दूंगा और आप लोग देख��
1:29
पर इतने words आ गए और मान लो let us say characters की अगर ह��
1:33
बात करें मान लो इतने characters है ठीक है ये random number है by the way
1:37
characters और ये मान लो इतने characters ये कुछ इस तरह से दिखाएग��
1:41
इतना words इतना characters ठीक है and इतना characters ठीक है तो कुछ इस तरह स��
1:49
मैं ये देख लूँगा कि ये इतने वर्ड से इतने कैरेक्टर से मैं यहां पर लिखना चाहता हूं उसी के साथ मैं एक m y 2 लगा दूंगा और m y 2 लगाने से क्या होगा m y 2 bootstrap के class है y में दो की margin देते की तो यह थोड़ा सा social distancing बना कर रखेगा उपर वाले से ठीक है अगर आप और चाहते हो कि यह थोड़ी सी औ��
2:21
लाता जाए ठीक है तो अगर मुझे number of words find करने है तो मैं क्या करूँगा यहाँ पर मैं लिख करूँगा this sorry मैं यहाँ पर कहूँगा text dot text dot और length जो मेरे text की length होगी वो number of characters हैं तो मेरे text में 26 characters हैं अभी मेरे text में 3, 4, 5, 6 यह चल रहा है नीचे इतने characters हैं अगर मैं चाहता हूँ ��
2:51
एक स्टॉट स्प्लिट स्पेस क्या देगा एक एरे देगा जिसमें क्या होगा जिसमें वर्ड सोंगे और उसकी लेंथ जो होग��
2:58
कि वह नंबर आफ वर्ड सुनगे ठीक है तो आप यहां पर देखो अब यह वर्ड है सिर्फ अगर मैं दिस लिख दूं और एं��
3:04
16 sacrifice
3:39
तो हमने कुछ इसी तरह की utility बना दिया react में इसको कोई back end की जरूरत नहीं है क्योंकि already हम यहाँ पर क्या कर रहे हैं कि client side में ही देख रहे हैं कि कितने words और कितने characters है��
4:09
वर्ड, ठीक है, कि एक वर्ड को रीड करने का average कितना time लगता है
4:13
तो अगर कोई slow रीड कर रहा है, reading time एक minute लगेगा, 125 words के लिए, औ��
4:18
average, अगर आप average की बात करो, तो 0.4 minutes लगेंगे, 0.4 minutes कितने seconds हो गए
4:24
मैं एक पार के लिए इसको 0.5 minutes मान लेता हूँ ठीक है तो हमें 0.5 minutes की बात करूँ तो 30 seconds हो गए ठीक है तो 125 words के लिए 30 seconds लगते हैं कुछ ऐसा समझ लो आप लोग ठीक है तो मैं काम करूँगा कि इसी data को इस्तेमाल करते हुए मैं क्या करूँगा कि एक word को कितना time कितने seconds लगते हैं ये मैं निकालूँगा ��
4:57
एक वर्ड को कितना मिनिट लगेगा, 1 upon 125, ठीक है, और अगर मैं 1 upon 125 calculate करो, तो 1 upon 125 की value यह होती है, तो इसका मतलब कि अगर मैं number of words को इससे multiply कर दू, तो कितने मिनिट में कोई पढ़ेगा यह आ जाएगा, ठीक है, तो मैं यह पता सकता हूँ अपने user को कि कितना time लगेगा उस��
5:27
008 multiply by number of words जो की क्या होगा जो की ये होग��
5:31
ठीक है तो मैं इससे multiply करतूंगा इसकी length से that's about it
5:35
तो अभी यहाँ पर देखो की 0.032 minutes में पढ़ा जाएगा य��
5:39
और अगर मैं इसमें और चीज़े add करूँ तो ये देखो बता रहा है अगर मैं इसमे��
5:43
ना पूरा कुछ बड़ा सा ऐड करो, मालों मैंने यह ऐड कर दिया, तो यह बता रहा है कि अराउंट चार मिनट में
5:48
आप पढ़ दोगे इसको, ठीक है, तो यह यहाँ पर मुझे, बेसिकल यह बता रहा है
5:52
अब आप में से कई लोग यह भी सोच रहते हो, तो यह इसको प्रीव्यू नहीं कर सकते नीचे पढ़ने के लिए ठीक है यह टेक्स समरी मैं चाहता हूं कि आप एक प्रीव्य��
5:59
भी बनाऊंगे इसका यानी कि मैं एक अब नेट से इस थी यूज करता हूं और मैं प्रीव्यू लिखता हूं इन फैक्टर मे��
6:06
चाहिए और देखोंगा अगर मुझे लगेगा कि एच टू थोड़ा छोटा है सॉरी बड़ा है और एच थ्री मुझे चाहिए थोड़ा बड़��
6:14
थोड़ा छोटा सॉरी चोटा होगा इस तो से अच्छा बड़ा ठीक है एनिवेज मैं क्या करूंगा यह पर दिस्टर टेक्स्ट लाइ��
6:21
sorry this nationalism class based component class based component this text enter text here to
6:36
मान लो मैं coding Wikipedia लिखता हूँ यहाँ पर, और मैं मान लो यह पूरा का पूरा computer science के बारे में और इन सब चीज़ें के बारे में लिखना चाहता हूँ यहाँ पर
6:44
और मैं यहाँ पर paste करना चाहता हूँ letters से, तो यहाँ पर preview आ गया है और मुझे यह भी पता चल रहा है कि कितने मिनिट में इसे पढ़ा जाएगा, ठीक है, तो यह preview भी कर रहा है text मेरा, तो खुल मिला कर मैं अपने text को yze कर सकता हूँ, मैं अपने text को upper case में convert कर सकता हूँ, मैं lower case में convert करने का भी बताऊंगा, lower case में convert करन��
7:16
और कुछ भी नहीं करना है बस यहाँ पर टू लोगर केस कर देना है बस ठीक है टू लोगर केस जैसे अपने केस था वैसे ही लोगर केस कर देना है और देखो यहाँ पर क्या होगा Perhaps I will do convert to lower case
7:28
से मालो मैंने कैप्स लॉक दबाकर लिखा कुछ कनवर्ड लोगर केस करूंगा यह पूरा का पूरा को लोगर केस में कनवर्��
7:33
हो जाएगा सिंपल सी घानी है ठीक है कोई ज्यादा यहां पर आपको टेंशन लेनी की जरूरत नहीं है अब यहां पर देख��
7:39
ना मेरे एक दूसरे से ऐसे चिपक गए जैसे पता नहीं इन दो लोगों को एक दूसरे से कितना प्यार हो तो मैं क्य��
7:44
करूंगा इनके प्यार को कम करने के लिए क्लास ने में एम एक्स टू लगा दूंगा तो क्या होगा थोड़ी स��
7:48
social distancing बना कर रखेंगे एक दूसरे से ठीक है, तो MX2
7:53
मैं यहाँ पर लगा देता हूँ, और MX2 से क्या होगा copy करना था, मुझे paste उपस, मैंने क्या कर दिया, MX2 फिर से लिख लेता हूँ या��
7:58
कोई दिक्कत नहीं है, मुझे इसको basically copy करके नीचे paste करना है, MX2 एक class ह��
8:02
एक bootstrap की glass है जो x में margin देगी और इन दोनों को थोड़ा थोड़ा दूर बनाएग��
8:06
मैं नहीं चाहता कि एक दूसरे से चिपक के खड़े हो जाएं ठीक है तो MX1 देखता हू��
8:10
MX2 काफी हुई थी और अगर आपको custom distance चाहिए हैं तो आप अपन��
8:14
भी लिख सकते हो क्लास ठीक है वह सीएसस पाइल लगाकर वह सब मैं भी पढ़ रहा हूं इसलिए मैंने बूटस्ट्रा��
8:19
ऐड कर दी मैं नहीं चाहता इस सब चीजों में पढ़ना अच्छा एक चीज और जो कि रियाट से रिलेटेड नहीं है य��
8:24
बूट स्ट्राप से लिए इसको काला करना चाहते हो ना अगर आप नैविगेशन बार को क्या करो कि यहां पर नेव बा��
8:31
कंपोनेंट में आओ और जहां पर यह नेव बार लाइट लिखा हुआ है ना इसको डार्क कर दो इसको भी डार्क कर दो ठीक ह��
8:39
सेव करो और यहाँ पर देखो डार्क हो गया ठीक है इन केस किसी को डार्क कंपोनेंट्स पसंद है तो और अगर आप इसको ब्लू बनाना चाहते हो तो जो हमारा बूट स्ट्राप होता है उसमें ग्रीन का कोड सक्सेस होता है आप इसको प्राइमरी कर दो प्राइमरी कलर जो ��
9:09
जाओगे गेट बूटस टॉप को पेजाओगे डॉक्स पर जाओगे कंपोनेंट पर जाओगे और देखा है चांस कि अगर आ��
9:15
स्टार्ट कर रहे हो तो आपको याद नहीं होगा विच टोटली फाइन अब बटन से जाकर यहां से यह कॉपी कर सकत��
9:20
ये वाला अगर आपने copy paste करा तो ये वाला button produce होगा, ये copy paste करा तो ये वाला button produce होगा
9:25
and so on, ठीक है, तो उकल मिला कर आप लोग जो है, अपने navigation bar को
9:30
उसे के साथ सब आप अपने button के colors को, इन सब चीज़ों को, customize कर सकते हो, ठीक है
9:35
I hope कि convert to upper case, convert to lower case text summary change I hope react course
9:48
बहुत सारे लोगों ने अभी भी react की playlist access नहीं करी है, आप इसको यहां click करके
9:51
अभी के अभी bookmark करो यहां click करके bookmark और यहां click करके save करो अभी के अभ��
9:55
और अभी मैं इसमें और भी बहुत सारे concepts आप लोगों को बताऊंग��
9:59
I hope कि props और states में difference आपको समझ में आ गया यह जो video थ��
10:03
यह थोड़ा javascript specific था और I hope कि आपको यह app जो ह��
10:08
इस state में बहुत अच्छी लग रही है और यह मज़ा आ रहा है यार देखो कितनी मज़ा रहा है आपको बना दी देख रहे हो आप लो��
10:13
तो मैं तो काफी अच्छा फील कर रहा हूँ इस app को बनाने के बा��
10:17
अगर आप bold वगैरा करना चाहते हो इस चीज़ को नंबर आफ वर्ड्स को नंबर आफ कैरेक्टर्स को तो आप भी टैग यूज कर सकते हो और भी बहुत सारी पॉसिबिलिटीज हैं जो कि आप इसमें कर सकते हो अब आपकी आपको मजा आया मैं काम करूंगा यहां पर इस टू में कन्वर्ट कर दूंगा इस चीज को भी मुझ��
10:49
और react में तो और भी, मैं ज़्यादा HTML को refactor नहीं करना चाहता
10:53
मैं चाहता हूँ कि automatically जितना काम हो जाए उतना अच्छा है, अच्छा एक चीज और
10:57
जैसे मैं reload कर रहा हूँ, enter text here लिखकर आ रहा है, यह लोड़ा सा annoying हो सकता है लोगों के लिए
11:01
मैं नहीं चाहता कि लोगों को enter text here को हटा कर उनका text डालना पड़��
11:05
तो यह just आप लोगों की learning के लिए था तो मैं क्या करूँगा यह जो enter text here है इसको हटा दूँग��
11:10
और default value को blank ही रहने दूँगा एक blank string ही रहेगी तो इसमें भी one word लिखकर आ रहा है क्योंक��
11:16
बेसिकली जब मैं dot split कर रहा हूँ इसको blank से तब क्या हो रहा है उस array की length जो है वो one हो जा रही ह��
11:23
मैं आपको दिखाता हूँ मेरे कहने का क्या मतलब है तो अगर मैं यहाँ पर कुछ ऐसे लिखूँ a is equal to blank ठीक ह��
11:28
और मैं लिखूँ a dot split और मैं यह को split करूँ by space
11:33
ठीक है, तो आप यहाँ पर देखो, इसके अंदर एक space आ गई है, ठीक है, तो यह एक default behavior है, आप javascript logic लिखके इसको ठीक कर सकते हो, ठीक है, but again, मैं इसको ऐसे ही रहने दो, क्योंकि मैं एक word भी लिखूँगा, अगर तो, तो भी इसके अंदर यही word आएगा, और मैं जैसे space ��
12:03
एंड हो रही है एक space में तो आप एक word कम कर सकते हो फर एक्सांपल यह फिर आपकी string अगर blank ह��
12:10
तब आप एक word कम कर सकते हो तो यह logic आप लोग चेंज कर सकते हो अगर मैं normal words लिखू��
12:16
तो यहाँ पर 5 words दिखा रहा है देखो 5 words ह��
12:20
19 characters दिखा रहा है जिन दे गरेटर से आएड करूँगा ये बढ़ता जाएगा और प्रीव्यू भी चेंज हो रहा ह��
12:25
तो I hope कि आप लोगों को react का कमाल अच्छा लगा playlist को जरूर access करें और आने वाले वीडियोस के लिए इंतजार करते रहे��
12:32
अभी के लिए इस वीडियो में इतना है guys thank you so much guys for watching this video
12:36
and I will see you next time