बुनियादी अवधारणाएँ (Basic Concepts of React.js)

इस अध्याय में, हम रिएक्ट.js की बुनियादी अवधारणाओं को कवर करेंगे जो किसी भी रिएक्ट डेवलपर के लिए आवश्यक हैं। आप सीखेंगे:

• JSX: जावास्क्रिप्ट सिंटैक्स एक्सटेंशन जो HTML जैसी संरचना को कोड में सम्मिलित करने की अनुमति देता है।
• कम्पोनेंट्स: UI के निर्माण खंड जो छोटे, पुन: उपयोग योग्य कोड के टुकड़े होते हैं।
• प्रॉप्स: कम्पोनेंट्स के बीच डेटा पास करने का तरीका।
• स्टेट: कम्पोनेंट्स के भीतर डेटा प्रबंधन और रेंडरिंग।

इन अवधारणाओं को समझने के बाद, आप रिएक्ट में विभिन्न प्रकार के यूजर इंटरफेस और एप्लिकेशन बनाने में सक्षम होंगे। इस अध्याय में दी गई जानकारी आपके रिएक्ट ज्ञान की नींव को मजबूत करेगी और आपको अधिक जटिल रिएक्ट विषयों को समझने में मदद करेगी।

JSX क्या है? (What is JSX?)

JSX (JavaScript XML) एक जावास्क्रिप्ट सिंटैक्स एक्सटेंशन है जो HTML जैसी संरचना को जावास्क्रिप्ट कोड में लिखने की अनुमति देता है। इसे रिएक्ट के साथ उपयोग करने के लिए डिज़ाइन किया गया है, जिससे UI कोडिंग अधिक पठनीय और प्रबंधनीय हो जाती है। JSX को रिएक्ट के अंदर जावास्क्रिप्ट कोड में एम्बेड किया जा सकता है, और यह एक सरल और सहज तरीका प्रदान करता है जिससे डेवलपर्स UI कम्पोनेंट्स को परिभाषित और रेंडर कर सकते हैं।

JSX का उपयोग (Using JSX)

JSX का उपयोग रिएक्ट में किया जाता है ताकि HTML और जावास्क्रिप्ट को मिलाया जा सके। यह एक ऐसा सिंटैक्स है जो HTML तत्वों को जावास्क्रिप्ट कोड में लिखने की अनुमति देता है। उदाहरण के लिए, निम्नलिखित कोड एक सरल JSX तत्व को दिखाता है:

const element = <h1>Hello, world!</h1>;

JSX के लाभ (Benefits of JSX)

1. अधिक पठनीयता: JSX का सिंटैक्स HTML के समान है, जिससे कोड को पढ़ना और समझना आसान हो जाता है।
2. बेहतर त्रुटि निर्धारण: JSX में त्रुटि निर्धारण करना आसान होता है क्योंकि यह स्पष्ट रूप से बताता है कि कोड किस प्रकार का तत्व रेंडर करेगा।
3. जटिल UI बनाने में सरलता: JSX का उपयोग करके जटिल UI कोड को सरल और अधिक प्रबंधनीय बनाना आसान होता है।

JSX का संकलन (Compilation of JSX)

JSX को सीधे ब्राउज़र में नहीं चलाया जा सकता है। इसे जावास्क्रिप्ट में बदलने के लिए एक ट्रांसपाइलर की आवश्यकता होती है, जैसे Babel। ट्रांसपाइलर JSX को वैध जावास्क्रिप्ट कोड में बदलता है जिसे ब्राउज़र समझ सकता है।

// JSX कोड
const element = <h1>Hello, world!</h1>;

// ट्रांसपाइल होने के बाद का जावास्क्रिप्ट कोड
const element = React.createElement('h1', null, 'Hello, world!');

JSX रिएक्ट के साथ UI कम्पोनेंट्स को परिभाषित और रेंडर करने का एक शक्तिशाली तरीका है। इसका HTML जैसा सिंटैक्स जावास्क्रिप्ट कोड को अधिक पठनीय और प्रबंधनीय बनाता है, जिससे डेवलपर्स जटिल यूजर इंटरफेस को आसानी से बना सकते हैं। JSX का उपयोग करके, आप रिएक्ट के साथ और अधिक कुशलता से काम कर सकते हैं और अपने वेब एप्लिकेशन को तेज़ी से विकसित कर सकते हैं।

कम्पोनेंट क्या हैं? (What are Components?)

रिएक्ट.js (React.js) में, कम्पोनेंट्स UI (User Interface) के निर्माण खंड होते हैं। ये छोटे, पुन: उपयोग योग्य कोड के टुकड़े होते हैं जो किसी वेब एप्लिकेशन के विशिष्ट हिस्से के UI को परिभाषित और रेंडर करते हैं। कम्पोनेंट्स को समझना और उपयोग करना रिएक्ट में कुशलतापूर्वक काम करने के लिए महत्वपूर्ण है।

कम्पोनेंट्स के प्रकार (Types of Components)

रिएक्ट में मुख्य रूप से दो प्रकार के कम्पोनेंट्स होते हैं:

1. फ़ंक्शनल कम्पोनेंट्स (Functional Components):
   • ये सरल जावास्क्रिप्ट फ़ंक्शन्स होते हैं जो UI को परिभाषित करते हैं और रेंडर करते हैं।
   • ये प्रॉप्स (props) के माध्यम से डेटा स्वीकार करते हैं और JSX को रिटर्न करते हैं।
   • फ़ंक्शनल कम्पोनेंट्स हल्के होते हैं और स्टेटलेस होते हैं।

     function Welcome(props) {
       return <h1>Hello, {props.name}</h1>;
     }
     

      

2. क्लास कम्पोनेंट्स (Class Components):
   • ये ES6 क्लासेस का उपयोग करके बनाए जाते हैं और अधिक जटिल होते हैं।
   • ये रिएक्ट.Component से एक्सटेंड करते हैं और रेंडर मेथड को परिभाषित करते हैं।
   • क्लास कम्पोनेंट्स स्टेट और लाइफसाइकल मेथड्स को हैंडल कर सकते हैं।

     class Welcome extends React.Component {
       render() {
         return <h1>Hello, {this.props.name}</h1>;
       }
     }
     

      

प्रॉप्स क्या हैं? (What are Props?)

प्रॉप्स (Props) रिएक्ट कम्पोनेंट्स के बीच डेटा पास करने का एक तरीका हैं। ये कम्पोनेंट्स के पैरामीटर्स होते हैं और कम्पोनेंट्स को अधिक डायनामिक और पुन: उपयोग योग्य बनाते हैं। प्रॉप्स केवल पढ़ने के लिए होते हैं और इन्हें कम्पोनेंट्स द्वारा बदला नहीं जा सकता।

स्टेट क्या है? (What is State?)

स्टेट (State) एक कम्पोनेंट के अंदर डेटा प्रबंधन का तरीका है। स्टेट एक कम्पोनेंट की स्थिति को दर्शाता है और यह समय के साथ बदल सकता है। जब भी स्टेट बदलता है, कम्पोनेंट स्वतः रीरेंडर होता है, जिससे UI अपडेट हो जाता है।

कम्पोनेंट लाइफसाइकल (Component Lifecycle)

रिएक्ट कम्पोनेंट्स का एक निश्चित लाइफसाइकल होता है, जिसमें तीन मुख्य चरण होते हैं:

1. माउंटिंग (Mounting): कम्पोनेंट का निर्माण और DOM में सम्मिलित होना।
2. अपडेटिंग (Updating): कम्पोनेंट का री-रेंडर होना जब प्रॉप्स या स्टेट बदलते हैं।
3. अनमाउंटिंग (Unmounting): कम्पोनेंट का DOM से हटाया जाना।

कम्पोनेंट्स का महत्व (Importance of Components)

• पुन: उपयोगिता (Reusability): कम्पोनेंट्स को विभिन्न हिस्सों में पुन: उपयोग किया जा सकता है, जिससे कोड की पुनरावृत्ति कम होती है।
• मॉड्यूलरिटी (Modularity): कम्पोनेंट्स को छोटे, स्वतंत्र टुकड़ों में विभाजित किया जा सकता है, जिससे कोड प्रबंधन आसान हो जाता है।
• पठन योग्य कोड (Readable Code): कम्पोनेंट्स का उपयोग कोड को अधिक संरचित और पठनीय बनाता है।