00:00:00React को हाल ही में React Doctor नाम का एक नया एंटी-पैटर्न स्कैनिंग टूल मिला है।
00:00:05इसे Aidan Bai ने बनाया है, वही बेहद प्रतिभाशाली डेवलपर जिन्होंने Million.js,
00:00:11React Grab, React Scan और Amy को बनाया है।
00:00:14और आज के वीडियो में, हम इस टूल को करीब से देखेंगे, समझेंगे कि यह कैसे काम करता है
00:00:19और खुद इसे आजमाकर देखेंगे।
00:00:20इसमें काफी मज़ा आने वाला है, तो चलिए शुरू करते हैं।
00:00:27तो React Doctor एक साधारण CLI टूल है जिसे सामान्य React एंटी-पैटर्न्स का पता लगाने के लिए बनाया गया है,
00:00:33जैसे कि अनावश्यक use effects, एक्सेसिबिलिटी की समस्याएं या प्रॉप ड्रिलिंग।
00:00:38परदे के पीछे, यह OX lint का उपयोग करता है, जो रस्ट (Rust) में लिखा गया
00:00:43सबसे तेज़ जावास्क्रिप्ट लिंटर्स में से एक है।
00:00:44और क्योंकि OX lint रस्ट पर बना है, यह कोड की हज़ारों लाइनों को
00:00:49मिलीसेकंड में स्कैन कर सकता है।
00:00:50यह आपके प्रोजेक्ट का एब्सट्रैक्ट सिंटैक्स ट्री या AST बनाने के लिए इसका उपयोग करता है,
00:00:56जिसमें हुक यूसेज, प्रॉप स्ट्रक्चर्स और कंपोनेंट बाउंड्रीज़ जैसे विशिष्ट React पैटर्न्स को खोजा जाता है।
00:01:01यह 47 से अधिक बेहतरीन React प्रथाओं पर आधारित है और इसमें मददगार स्कैन शामिल हैं,
00:01:08जैसे कि गलती से हार्ड-कोड की गई सुरक्षा कुंजियों को खोजना, या फिर लोडिंग स्टेट पैटर्न की
00:01:13जांच करना और एक विस्तृत रिपोर्ट देना कि इसे कब इस्तेमाल करना चाहिए
00:01:19और इसके बजाय use transition का उपयोग कब करना बेहतर है।
00:01:21और यह प्रोजेक्ट पूरी तरह से ओपन सोर्स है और अभी काफी नया है।
00:01:25इसलिए समुदाय के लिए इस प्रोजेक्ट में योगदान देने का यह एक शानदार अवसर है,
00:01:30जहाँ आप अन्य अच्छी प्रैक्टिस चेक जोड़ सकते हैं जो आपको लगता है कि यहाँ कम हैं।
00:01:33मुझे लगता है कि इस प्रोजेक्ट का सबसे शानदार हिस्सा इसका UI है।
00:01:36इसका डिज़ाइन और लुक बहुत ही बेहतरीन है, साथ ही OX lint की बदौलत यह बहुत तेज़ है।
00:01:42इन सबके अलावा, आप इसे अपने कोडिंग एजेंट के लिए एक स्किल के रूप में चला सकते हैं
00:01:47और इसे प्रोग्रामेटिक रूप से भी इस्तेमाल कर सकते हैं, जैसे कि Node.js API पर।
00:01:52अब चलिए इस टूल को खुद आज़माते हैं।
00:01:54मेरे पास यह React-आधारित कोड प्रोजेक्ट है जो एक बेसिक स्टॉक चार्ट विज़ुअलाइज़ेशन टूल है,
00:02:00जिसे मैंने छह साल पहले लिखा था, जब AI का चलन भी नहीं था।
00:02:04यह देखना बहुत दिलचस्प होगा कि छह साल पहले मैंने React कोड कितना अच्छा लिखा था।
00:02:09तो मैं अपने रिपॉजिटरी में React doctor कमांड चलाने जा रहा हूँ।
00:02:12और जैसा कि आप देख सकते हैं, हमें तुरंत परिणाम मिल जाता है।
00:02:15और यह देखिए।
00:02:16मेरे प्रोजेक्ट का स्कोर लगभग परफेक्ट है।
00:02:18यह जानकर दिल को सुकून मिलता है कि छह साल पहले भी मैं
00:02:24अच्छी गुणवत्ता वाला React कोड लिख रहा था।
00:02:25ठीक है, देखते हैं कि इसने क्या खोजा है।
00:02:27हमें की (key) के रूप में AI का उपयोग करने के बारे में चेतावनी मिली है, जो बहुत सही है।
00:02:31और फिर इसने यह भी पहचाना कि recharts एक भारी लाइब्रेरी है।
00:02:35इसलिए यह मुझे इसके बजाय लेज़ी लोडिंग का उपयोग करने की सलाह देता है।
00:02:38और फिर इसने यह भी गौर किया कि मेरे पास एक ही use effect में चार use state कॉल्स हैं।
00:02:44और मुझे use reducer का उपयोग करने पर विचार करना चाहिए।
00:02:46ये सभी बहुत ही वैध बिंदु हैं।
00:02:48धन्यवाद, React doctor।
00:02:49और अब चलिए इसे एक बड़े कोड बेस पर चला कर देखते हैं।
00:02:52यहाँ एक बहुत ही लोकप्रिय CRM प्रोजेक्ट है जिसे “20” कहा जाता है, जो माना जाता है कि
00:02:57सेल्सफोर्स का एक ओपन सोर्स विकल्प है।
00:02:59और यह React में लिखा गया है।
00:03:00तो चलिए इस रेपो को क्लोन करते हैं और देखते हैं कि React doctor इसका मूल्यांकन कैसे करता है।
00:03:04और इसे चलाने के बाद, हम देख सकते हैं कि React doctor खुद ही पहचान लेता है
00:03:08कि यह प्रोजेक्ट एक मोनो रेपो (mono repo) है, और यह पैकेजों को पहचानता है।
00:03:12तो चलिए पहले उनके मार्केटिंग वेबसाइट पैकेज का स्कोर देखते हैं।
00:03:15और जैसा कि हम यहाँ देख सकते हैं, यह भी काफी अच्छा है।
00:03:18हमें एक एरर मिली है, लेकिन वह सिर्फ एक गायब ऑल्ट (alt) टैग है।
00:03:22तो मैं कहूँगा कि कुल मिलाकर, यह बहुत अच्छा स्कोर है।
00:03:25ठीक है, अब चलिए फ्रंट पैकेज की जांच करते हैं।
00:03:30इसने थोड़ा खराब प्रदर्शन किया, क्योंकि हमें 99 एरर मिले, लेकिन यह अभी भी सुरक्षित ज़ोन में है।
00:03:35तो यहाँ मैं आपको यह सलाह दूँगा।
00:03:37यदि आप एक डेवलपर हैं जो अपने गिटहब पोर्टफोलियो को सुधारना चाहते हैं, तो यह टूल
00:03:41विभिन्न ओपन सोर्स प्रोजेक्ट्स को स्कैन करने और उन जगहों की पहचान करने के लिए अच्छा है
00:03:47जहाँ आप महत्वपूर्ण योगदान दे सकते हैं।
00:03:48तो दोस्तों, यह था संक्षेप में React doctor। मुझे लगता है कि यह एक बहुत ही
00:03:52शानदार, हल्का और आसान टूल है जो आपके React प्रोजेक्ट्स की प्रूफरीडिंग और
00:03:58सत्यता की जांच करने में काफी मदद कर सकता है।
00:03:59और मैं भविष्य में निश्चित रूप से अपने प्रोजेक्ट्स में इसका उपयोग करूँगा।
00:04:03और दोस्तों, अगर आपको यह वीडियो उपयोगी लगा हो, तो कृपया वीडियो के नीचे
00:04:07लाइक बटन पर क्लिक करके मुझे बताएं।
00:04:09और हमारे चैनल को सब्सक्राइब करना न भूलें ताकि आप हमारे
00:04:14आने वाले किसी भी वीडियो को मिस न करें।
00:04:15मैं Better Stack से एंडरिस हूँ और मैं आपसे अगले वीडियो में मिलूँगा।