रिएक्ट गतिशील, इंटरैक्टिव वेब एप्लिकेशन बनाने के इच्छुक डेवलपर्स के लिए एक उपयोगी ढांचा बन गया है। इसका घटक-आधारित आर्किटेक्चर डेवलपर्स को पुन: प्रयोज्य बिल्डिंग ब्लॉक बनाने की अनुमति देता है जो यूआई विकास को अधिक प्रबंधनीय और स्केलेबल बनाता है। लेकिन वास्तव में रिएक्ट में महारत हासिल करने के लिए, कुशल, पुन: प्रयोज्य घटकों को डिजाइन करने का तरीका समझना महत्वपूर्ण है। इस ब्लॉग में, हम आपको स्केलेबल रिएक्ट ऐप्स बनाने में मदद करने के लिए घटक डिज़ाइन, उन्नत पैटर्न और सर्वोत्तम प्रथाओं की अनिवार्यताओं का पता लगाएंगे।

1. आधार: प्रतिक्रिया घटकों को समझना

इसके मूल में, एक रिएक्ट घटक एक जावास्क्रिप्ट फ़ंक्शन या क्लास है जो इनपुट (प्रॉप्स) स्वीकार करता है और जेएसएक्स लौटाता है, जो बताता है कि स्क्रीन पर क्या दिखना चाहिए।

घटक दो मुख्य प्रकार के होते हैं:

• कार्यात्मक घटक: स्टेटलेस घटकों के रूप में पेश किए गए, वे रिएक्ट हुक के माध्यम से स्थिति और दुष्प्रभावों को संभालने के लिए विकसित हुए हैं। अधिकांश आधुनिक रिएक्ट कोडबेस अपनी सादगी और प्रदर्शन लाभों के लिए कार्यात्मक घटकों को पसंद करते हैं।

  const Button = ({ label }) => {label};

• वर्ग घटक: ये एक समय घटक स्थिति को संभालने का प्राथमिक तरीका थे, लेकिन हुक के आगमन के साथ यह प्रचलन से बाहर हो गया है। हालाँकि, विरासती परियोजनाओं पर काम करते समय उन्हें समझना अभी भी मददगार हो सकता है।

class Button extends React.Component {
  render() {
    return {this.props.label};
  }
}

2. पुन: प्रयोज्य घटकों का निर्माण

पुन: प्रयोज्य घटक किसी भी स्केलेबल रिएक्ट एप्लिकेशन की आधारशिला हैं। यहां पालन करने के लिए कुछ सिद्धांत दिए गए हैं:

एक। प्रॉप्स का प्रभावी ढंग से उपयोग करें

प्रॉप्स डेटा को पैरेंट से चाइल्ड घटकों में प्रवाहित करने की अनुमति देता है। पुन: प्रयोज्य घटकों को डिज़ाइन करते समय, सुनिश्चित करें कि वे विभिन्न संदर्भों के लिए उन्हें लचीला बनाने के लिए गतिशील प्रॉप्स को स्वीकार करते हैं।

उदाहरण: डायनामिक प्रॉप्स के साथ बटन घटक

const Button = ({ label, onClick, size = 'medium', variant = 'primary' }) => {
  return (
    
      {label}
    
  );
};

इस उदाहरण में, बटन पुन: प्रयोज्य है क्योंकि यह लेबल, ऑनक्लिक, आकार और प्रकार जैसे प्रॉप्स को स्वीकार करता है, जिससे यह पूरे ऐप में अनुकूलनीय हो जाता है।

बी। विरासत पर रचना

घटकों को विस्तारित करने के बजाय, अधिक जटिल घटकों के निर्माण के लिए संरचना का उपयोग करें। यह दृष्टिकोण घटकों को स्वतंत्र, वियुग्मित इकाइयाँ बनाने के रिएक्ट के दर्शन के अनुरूप है।

उदाहरण: एक बटन के साथ एक मॉडल बनाना

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    

      

        {children}
        
      
    
  );
};

मोडल घटक एक पुन: प्रयोज्य मॉडल बनाने के लिए बटन घटक से बना है जिसे किसी भी सामग्री (बच्चों) से भरा जा सकता है।

3. उन्नत घटक पैटर्न

जैसे-जैसे आपका ऐप बढ़ता है, सरल घटक पर्याप्त नहीं हो सकते हैं। जटिलता को प्रबंधित करने के लिए यहां कुछ उन्नत पैटर्न दिए गए हैं।

एक। उच्च-क्रम घटक (HOCs)

एक उच्च-क्रम घटक एक फ़ंक्शन है जो एक घटक लेता है और एक नया लौटाता है, अक्सर अतिरिक्त प्रॉप्स या तर्क इंजेक्ट करता है।

उदाहरण: लॉगिंग HOC

const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log('Component rendered with props:', props);
    return ;
  };
};

const EnhancedButton = withLogging(Button);

यह एचओसी बटन को लपेटता है और जब भी इसे प्रस्तुत किया जाता है तो इसके प्रॉप्स को लॉग करता है, मूल घटक को संशोधित किए बिना अतिरिक्त कार्यक्षमता जोड़ता है।

बी। प्रॉप्स प्रस्तुत करें

इस पैटर्न में घटकों के बीच तर्क साझा करने के लिए एक फ़ंक्शन को प्रोप के रूप में पास करना शामिल है।

उदाहरण: रेंडर प्रॉप्स के साथ घटक प्राप्त करें

const Fetch = ({ url, render }) => {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);

  return render(data);
};

// Usage
{JSON.stringify(data)}
} />;

यहां, फ़ेच को इस बात की परवाह नहीं है कि डेटा कैसे प्रस्तुत किया गया है। इसके बजाय, यह रेंडर प्रोप को रेंडरिंग सौंपता है, जिससे यह अत्यधिक लचीला हो जाता है।

सी। कस्टम हुक

कस्टम हुक घटकों को साफ और पठनीय रखते हुए तर्क साझा करने का एक शक्तिशाली तरीका है। हुक आपको तर्क को समाहित करने देता है जिसे घटकों के बीच पुन: उपयोग किया जा सकता है।

उदाहरण: विंडो की चौड़ाई के लिए कस्टम हुक

const useWindowWidth = () => {
  const [width, setWidth] = React.useState(window.innerWidth);

  React.useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
};

const MyComponent = () => {
  const width = useWindowWidth();
  return 
Window width: {width}
;
};

इस यूजविंडोविड्थ हुक का उपयोग तर्क की नकल किए बिना विंडो आकार को ट्रैक करने के लिए किसी भी घटक में किया जा सकता है।

4. राज्य का प्रभावी ढंग से प्रबंधन करना

राज्य प्रबंधन रिएक्ट घटक डिजाइन के सबसे महत्वपूर्ण पहलुओं में से एक है। जबकि स्थानीय स्थिति छोटे ऐप्स के लिए अच्छा काम करती है, बड़े अनुप्रयोगों के लिए अधिक मजबूत समाधान की आवश्यकता हो सकती है।

एक। राज्य को ऊपर उठाना

जब कई घटकों को राज्य साझा करने की आवश्यकता होती है, तो समाधान राज्य को निकटतम सामान्य पूर्वज में स्थानांतरित करना (या "उठाना") होता है।

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    

      
  );
};

बी। प्रसंग एपीआई

संदर्भ एपीआई प्रोप-ड्रिल की आवश्यकता के बिना घटक पेड़ के माध्यम से वैश्विक डेटा पास करने के लिए उपयोगी है।

const ThemeContext = React.createContext();

const Parent = () => {
  const [theme, setTheme] = React.useState('light');

  return (
    
  );
};

const Child = () => {
  const theme = React.useContext(ThemeContext);
  return 
The theme is {theme}
;
};

कॉन्टेक्स्ट एपीआई थीम, उपयोगकर्ता डेटा या स्थानीय सेटिंग्स जैसे वैश्विक डेटा के लिए बहुत अच्छा है।

सी। राज्य प्रबंधन पुस्तकालयों का उपयोग करना

बड़े ऐप्स के लिए, Redux या Zustand जैसी लाइब्रेरी आपके एप्लिकेशन में जटिल स्थितियों को कुशलतापूर्वक प्रबंधित करने में आपकी मदद कर सकती हैं। Redux उन ऐप्स के लिए बहुत अच्छा है जिनके लिए केंद्रीकृत स्थिति की आवश्यकता होती है, जबकि Zustand अधिक हल्का समाधान प्रदान करता है।

5. प्रदर्शन का अनुकूलन

जैसे-जैसे आपका ऐप बढ़ता है, प्रदर्शन एक मुद्दा बन सकता है। घटकों को तेज़ और प्रतिक्रियाशील बनाए रखने के लिए यहां कुछ तकनीकें दी गई हैं।

एक। React.memo के साथ संस्मरण

React.memo घटक के आउटपुट को उसके प्रॉप्स के आधार पर याद करके अनावश्यक री-रेंडर को रोकता है।

const ExpensiveComponent = React.memo(({ data }) => {

  return 
{data}
;

});

बी। कॉलबैक का उपयोग करें और मेमो का उपयोग करें

ये हुक कार्यों और मूल्यों को याद रखने में मदद करते हैं, यह सुनिश्चित करते हुए कि जब तक निर्भरता नहीं बदलती, तब तक उन्हें हर रेंडर पर दोबारा नहीं बनाया जाता है।

const MyComponent = ({ onClick }) => {

  const handleClick = React.useCallback(() => {

    console.log('Button clicked!');

  }, []);

return Click me;

};

निष्कर्ष

कुशल, स्केलेबल वेब अनुप्रयोगों के निर्माण के लिए रिएक्ट घटक डिजाइन में महारत हासिल करना आवश्यक है। पुन: प्रयोज्य घटकों पर ध्यान केंद्रित करके, एचओसी और कस्टम हुक जैसे उन्नत पैटर्न को अपनाकर, स्थिति को प्रभावी ढंग से प्रबंधित करना और प्रदर्शन को अनुकूलित करके, आप ऐसे ऐप्स बना सकते हैं जो लचीले और रखरखाव योग्य दोनों हैं।