वेब विकास की तेजी से विकसित हो रही दुनिया में, रिएक्ट गतिशील और प्रदर्शनशील यूजर इंटरफेस के निर्माण के लिए आधारशिला बना हुआ है। चाहे आप एक अनुभवी डेवलपर हों या अभी शुरुआत कर रहे हों, इसकी पूरी क्षमता का लाभ उठाने के लिए रिएक्ट की मूल अवधारणाओं को समझना आवश्यक है। इस लेख में, हम रिएक्ट के बुनियादी सिद्धांतों का पता लगाएंगे, इसकी लाइब्रेरी स्थिति से लेकर हुक की शक्ति तक, और आपको अपने रिएक्ट कौशल को बढ़ाने के लिए एक स्पष्ट आधार प्रदान करेंगे। चलो इसमें गोता लगाएँ! ?

1. क्या रिएक्ट एक फ्रेमवर्क या लाइब्रेरी है?

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

2. वर्चुअल डोम

DOM का मतलब सरल शब्दों में दस्तावेज़ ऑब्जेक्ट मॉडल है जो किसी एप्लिकेशन के यूआई का प्रतिनिधित्व करता है। हर बार जब हम यूआई बदलते हैं, तो उस परिवर्तन को दर्शाने के लिए DOM अपडेट हो जाता है। DOM को ट्री डेटा संरचना के रूप में दर्शाया गया है। जब हम यूआई बदलते हैं, तो डीओएम अपने बच्चों को पुनः प्रस्तुत और अपडेट करता है। यूआई का पुनः प्रतिपादन एप्लिकेशन को धीमा कर देता है।

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

वर्चुअल DOM हर बार एक पेड़ बनाता है और तत्वों को एक नोड के रूप में दर्शाया जाता है। यदि कोई भी तत्व बदलता है तो एक नया वर्चुअल DOM ट्री बनाया जाता है। फिर नए पेड़ की तुलना पिछले पेड़ से की जाती है या "अंतर" की जाती है।

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

सारांश:

1. संपूर्ण वर्चुअल DOM अपडेट हो जाता है।
2. वर्चुअल डोम की तुलना आपके अपडेट करने से पहले जैसी दिखती थी, उससे की जाती है। रिएक्ट यह पता लगाता है कि कौन सी वस्तुएँ बदल गई हैं।
3. परिवर्तित ऑब्जेक्ट, और केवल परिवर्तित ऑब्जेक्ट, वास्तविक DOM पर अपडेट हो जाते हैं।
4. वास्तविक DOM पर परिवर्तन के कारण स्क्रीन बदल जाती है।

3. जेएसएक्स

JSX (जावास्क्रिप्ट XML) आपको रिएक्ट में HTML जैसा कोड लिखने की अनुमति देता है। यह React.createElement(component,props,…children) फ़ंक्शन का उपयोग करके HTML टैग को React तत्वों में परिवर्तित करता है।

उदाहरण के लिए:
जेएसएक्स कोड:

  Hello, Good Morning!

यह उदाहरण इस प्रकार संकलित है:

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

नोट: उपयोगकर्ता-परिभाषित घटकों को बड़े अक्षर से शुरू होना चाहिए। लोअरकेस टैग को HTML तत्वों के रूप में माना जाता है।

4. JSX में प्रॉप्स

प्रॉप्स को JSX में कई तरीकों से निर्दिष्ट किया जा सकता है:

प्रॉप्स के रूप में जावास्क्रिप्ट अभिव्यक्तियाँ:

यहाँ,props.sum का मूल्यांकन 6 है।

स्ट्रिंग अक्षर:

उपर्युक्त दोनों उदाहरण समकक्ष हैं।

प्रॉप्स डिफ़ॉल्ट से "सही"
यदि हम किसी प्रोप के लिए कोई मान पास नहीं करते हैं, तो यह डिफ़ॉल्ट रूप से सत्य हो जाता है।

उदाहरण के लिए,

उपर्युक्त दोनों उदाहरण समकक्ष हैं।

5. कक्षा घटक

रिएक्ट में घटकों को कक्षाओं या कार्यों के रूप में परिभाषित किया जा सकता है। यहां क्लास घटक को परिभाषित करने का तरीका बताया गया है:

class Greetings extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

6. घटक जीवनचक्र

घटकों में जीवनचक्र विधियां होती हैं जिन्हें आप विशिष्ट चरणों में कोड चलाने के लिए ओवरराइड कर सकते हैं:

माउंटिंग: जब एक घटक बनाया जा रहा है और DOM में डाला जा रहा है।

• कंस्ट्रक्टर()
• प्रदान करना()
• componentDidMount()

अपडेट कर रहा है: जब प्रॉप्स या स्थिति बदलती है।

• प्रदान करना()
• componentDidUpdate()

अनमाउंटिंग: जब किसी घटक को DOM से हटाया जा रहा हो।

• componentWillUnmount()

7. वर्ग गुण

defaultProps आपको प्रॉप्स के लिए डिफ़ॉल्ट मान परिभाषित करने की अनुमति देता है:

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

यदि प्रॉप्स.कलर प्रदान नहीं किया गया है, तो यह डिफ़ॉल्ट रूप से 'ग्रे' हो जाता है।

8. प्रॉप-प्रकार

हम घटकों के पारित गुणों के प्रकारों की जांच के लिए प्रोप-प्रकार का उपयोग कर सकते हैं। जब वे मेल नहीं खाते तो यह त्रुटियाँ देता है।

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

यह आईडी के प्रकार के बेमेल के बारे में चेतावनी देगा।

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

रिएक्ट को प्रदर्शन के लिए डिज़ाइन किया गया है, लेकिन आप इसे और अधिक अनुकूलित कर सकते हैं:

प्रोडक्शन बिल्ड का उपयोग करना:

npm run build

यह अनुकूलन के साथ एक उत्पादन निर्माण बनाता है।

स्रोत कोड को छोटा करें: रिएक्ट के स्रोत कोड में बदलाव से सावधान रहें।

कोड विभाजन: आवश्यकतानुसार लोड करने के लिए जावास्क्रिप्ट कोड को टुकड़ों में बंडल करें।

10. रिएक्ट हुक्स

हुक ऐसे फ़ंक्शन हैं जो आपको फ़ंक्शन घटकों में राज्य और अन्य रिएक्ट सुविधाओं का उपयोग करने देते हैं। दो सबसे लोकप्रिय हुक हैं:

useState: फ़ंक्शन घटकों में राज्य जोड़ता है।

function Example() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

useEffect: फ़ंक्शन घटकों में साइड इफेक्ट प्रबंधित करता है।

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

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

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

पढ़ने के लिए धन्यवाद, और कोडिंग का आनंद लें! ?