Pagelyze बनाने से मैंने React के बारे में क्या सीखा

Pagelyze बनाने से React के प्रति मेरा नज़रिया बदल गया। मैंने थ्योरी देखना बंद कर दिया और प्रोडक्ट आर्किटेक्चर पर ध्यान देना शुरू कर दिया।

Pagelyze एक वेबसाइट ऑडिट टूल है। यह कोई छोटा प्रैक्टिस ऐप नहीं है। यह ऑडिट रिपोर्ट्स, स्कोरिंग लॉजिक और डैशबोर्ड्स को संभालता है। इस वजह से, मुझे एक सवाल का जवाब देना था:

क्या प्रोडक्ट के बढ़ने के साथ यह कोड साफ-सुथरा (clean) बना रहेगा?

useState या useEffect जैसे Hooks महत्वपूर्ण हैं। लेकिन वे पूरी कहानी नहीं हैं। आप आधुनिक सिंटैक्स का उपयोग कर सकते हैं और फिर भी आपको एक अव्यवस्थित कोड को मेंटेन करना पड़ सकता है। समस्या आमतौर पर ज़िम्मेदारी (responsibility) की होती है।

एक खराब सेटअप में, एक ही फ़ाइल डेटा लोड करने से लेकर परिणाम दिखाने तक सब कुछ संभालती है। जैसे-जैसे आप स्केल करते हैं, यह तरीका विफल हो जाता है।

एक बेहतर तरीका कंपोनेंट्स को उनके उद्देश्य के आधार पर विभाजित करना है:

• AuditSummary
• LeadCheckPanel
• EvidenceList
• ServiceRecommendationCard
• ReportActions

प्रत्येक हिस्से का एक ही काम है। आप अपने डेटा लॉजिक को तोड़े बिना कार्ड के डिज़ाइन को बदल सकते हैं।

यह पूछना बंद करें कि क्या आपको Redux या Context का उपयोग करना चाहिए। यह पूछें कि स्टेट (state) की ज़रूरत किसे है।

• लोकल UI स्टेट: टैब्स और मोडाल्स
• फॉर्म स्टेट: URLs और वैलिडेशन
• सर्वर स्टेट: रिपोर्ट्स और स्कैन्स
• ग्लोबल स्टेट: यूजर प्रोफाइल और परमिशन

कस्टम हुक्स (Custom hooks) को व्यवहार (behavior) का प्रतिनिधित्व करना चाहिए। उन्हें केवल अव्यवस्थित कोड को दूसरी फ़ाइल में नहीं ले जाना चाहिए। एक अच्छा हुक डेटा फ़ेच करता है ताकि पेज कंपोनेंट केवल स्क्रीन को कोऑर्डिनेट करे।

अपने फोल्डर्स को फीचर के आधार पर व्यवस्थित करें:

• features/audit-report/
• features/lead-rescue/
• features/dashboard/

राउटिंग (Routing) केवल URLs से कहीं अधिक है। यह यूजर की यात्रा (user journey) है। एक यूजर लैंडिंग पेज से फ्री ऑडिट पर जाता है, फिर रिपोर्ट पर, और अंत में सर्विस पूछताछ पर। अच्छी राउटिंग उन्हें अगले कदम की ओर ले जाती है।

स्पष्टता के साथ निर्माण करें। बाधा (bottleneck) को पहचानें। उस विशिष्ट हिस्से को ठीक करें।

React की बेस्ट प्रैक्टिसेस निर्णयों के बारे में हैं। आप तय करते हैं कि एक कंपोनेंट का स्वामित्व क्या है। आप तय करते हैं कि स्टेट कहाँ रहेगी। आप तय करते हैं कि क्या कोई रूट यूजर की मदद करता है।

Pagelyze मेरा टेस्ट है। मैं यह टेस्ट नहीं कर रहा हूँ कि क्या मैं एक स्क्रीन बना सकता हूँ। मैं यह टेस्ट कर रहा हूँ कि क्या मैं प्रोडक्ट के बढ़ने के साथ उसे साफ-सुथरा रख सकता हूँ।

स्रोत: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb