React

रिएक्टिव, कंपोज़ेबल इंटरफ़ेस

यूज़र इंटरफ़ेस बनाने के लिए React सबसे लोकप्रिय लाइब्रेरी है। कंपोनेंट, JSX, state और hooks, फिर डेटा हैंडलिंग, परफ़ॉर्मेंस और आर्किटेक्चर: आपके पहले कंपोनेंट से लेकर एक्सपर्ट पैटर्न तक।

बुनियाद

शुरुआती - मूल बातें, कदम-दर-कदम

• React क्यों, आपका पहला कॉम्पोनेंट और JSXजानें कि React क्या है, अपना सबसे पहला कॉम्पोनेंट लिखें, और JSX के बुनियादी नियम सीखें।
• Props: किसी कॉम्पोनेंट को डेटा पास करनासीखें कि props के माध्यम से डेटा पास करके अपने कॉम्पोनेंट को पुन: उपयोग-योग्य कैसे बनाएँ।
• useState के साथ लोकल स्टेटuseState के साथ अपने कॉम्पोनेंट को मेमोरी दें ताकि आप ऐसी वैल्यू प्रदर्शित कर सकें जो यूज़र के इंटरैक्ट करते ही बदलती हैं।
• इवेंट और कंडीशनल रेंडरिंगयूज़र की क्रियाओं पर प्रतिक्रिया करें और शर्तों के आधार पर एलिमेंट दिखाएँ या छिपाएँ।
• लिस्ट रेंडर करना और keys की भूमिकाmap के साथ डेटा के एक ऐरे को स्क्रीन पर एलिमेंट की एक लिस्ट में बदलें, और keys के साथ हर एलिमेंट की पहचान करें।

प्रगति

मध्यवर्ती - असली प्रोजेक्ट बनाएं

• नियंत्रित फ़ॉर्महर फ़ॉर्म फ़ील्ड को React state से चलाना सीखें ताकि आप विश्वसनीय डेटा को मान्य और सबमिट कर सकें।
• useEffect: इफ़ेक्ट, डिपेंडेंसी, क्लीनअपuseEffect का उपयोग करके अपने कंपोनेंट को बाहरी दुनिया के साथ सिंक्रनाइज़ करें, डिपेंडेंसी और क्लीनअप में महारत हासिल करें।
• state को ऊपर उठाना और डेटा साझा करनाहर state के टुकड़े को निकटतम साझा पूर्वज में रखें ताकि कई कंपोनेंट के बीच बिना डुप्लिकेट किए डेटा साझा हो सके।
• कंपोज़िशन: children और कंपोनेंट में विभाजनchildren prop से पुन: उपयोग योग्य कंटेनर कंपोनेंट बनाएँ और अपनी स्क्रीनों को स्पष्ट ज़िम्मेदारियों में विभाजित करें।
• एक API को कॉल करना: fetch, लोडिंग, और त्रुटियाँकिसी इफ़ेक्ट के भीतर fetch से दूरस्थ डेटा लोड करें, लोडिंग और त्रुटि की स्थितियों को साफ़-सुथरे ढंग से मॉडल करें।

उन्नत

निपुण - उन्नत पैटर्न और प्रदर्शन

• जटिल state के लिए useReducerएक शुद्ध reducer के साथ जटिल state को व्यवस्थित करें, जो ट्रांज़िशन को केंद्रीकृत करता है और असंभव संयोजनों को खत्म कर देता है।
• Context: prop drilling के बिना साझा करनाcontext का उपयोग करके प्रॉप drilling के बिना डेटा को इधर-उधर पहुँचाएं, और साथ ही इसके re-renders तथा सीमाओं को नियंत्रण में रखें।
• Custom hooks: तर्क को निकालना और फिर से उपयोग करनाstateful तर्क को फिर से उपयोग करने योग्य, composable, testable hooks में निकालें।
• Memoization: memo, useMemo, useCallbackसीखें कि React.memo, useMemo और useCallback आपके ऐप को वास्तव में कब तेज़ करते हैं, और कब वे उसे बिना वजह जटिल बना देते हैं।
• useRef और DOM हेरफेरrender की शुद्धता तोड़े बिना useRef के साथ DOM में हेरफेर करें और instance मान बनाए रखें।

महारत

विशेषज्ञ - आर्किटेक्चर, आंतरिक कार्यप्रणाली और किनारे के मामले

• पर्दे के पीछे: reconciliation, batching, concurrent renderingजानें कि Fiber कैसे tree को reconcile करता है, updates को batch करता है, और rendering के काम को बीच में रोका जा सकने योग्य बनाता है।
• Suspense, lazy, और code splittingsuspension तंत्र, lazy component loading, और bundle splitting में महारत हासिल करें।
• विशेषज्ञ patterns: compound components, नियंत्रण का व्युत्क्रमण (inversion of control)compound components, state reducer, और render props बनाम hooks के सही चुनाव के साथ लचीले component APIs डिज़ाइन करें।
• आधुनिक React: Server Components, use, useTransition, useOptimisticserver components, use के साथ promises पढ़ना, और React 19 के optimistic updates का अन्वेषण करें।
• गुणवत्ता: Testing Library, StrictMode, Profilerimplementation के बजाय व्यवहार का परीक्षण करें, StrictMode के दोहरे invocations का लाभ उठाएँ, और Profiler के साथ renders मापें।