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

रिएक्ट घटक क्या हैं?

रिएक्ट घटक किसी भी रिएक्ट एप्लिकेशन के निर्माण खंड हैं। वे कोड के पुन: प्रयोज्य टुकड़े हैं जो परिभाषित करते हैं कि यूआई का एक निश्चित भाग कैसा दिखना और व्यवहार करना चाहिए। घटकों को कस्टम HTML तत्वों के रूप में सोचा जा सकता है, और वे दो मुख्य प्रकारों में आते हैं: कार्यात्मक घटक और वर्ग घटक।

1. कार्यात्मक घटक
कार्यात्मक घटक सरल जावास्क्रिप्ट फ़ंक्शन हैं जो रिएक्ट तत्व लौटाते हैं। उन्हें अक्सर उनकी सादगी और पठनीयता के लिए पसंद किया जाता है।

कार्यात्मक घटक का उदाहरण:

function Greeting(props) {
    return 
Hello, {props.name}!
;
}

2. कक्षा घटक
वर्ग के घटक अधिक जटिल हैं। उन्हें ES6 कक्षाओं के रूप में परिभाषित किया गया है जो React.Component से विस्तारित हैं। वर्ग के घटक अपनी स्वयं की स्थिति बनाए रख सकते हैं और जीवनचक्र विधियों का उपयोग कर सकते हैं।

क्लास घटक का उदाहरण:

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

घटकों का उपयोग क्यों करें?

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

प्रॉप्स को समझना

प्रॉप्स (गुणों के लिए संक्षिप्त) डेटा को एक घटक से दूसरे घटक में स्थानांतरित करने के लिए एक तंत्र है। वे अपरिवर्तनीय हैं, जिसका अर्थ है कि एक घटक अपने स्वयं के प्रॉप्स को संशोधित नहीं कर सकता है।

प्रॉप्स का उपयोग करना
आप किसी घटक में प्रॉप्स को वैसे ही पास कर सकते हैं जैसे आप किसी HTML तत्व में विशेषताएँ पास करते हैं।

पासिंग प्रॉप्स का उदाहरण:

function App() {
    return ;
}

इस उदाहरण में, ऐप घटक ग्रीटिंग घटक को प्रस्तुत करता है, नाम प्रोप को "जॉन" मान के साथ पास करता है।

प्रॉप्स तक पहुंच
घटक के भीतर, प्रॉप्स को प्रॉप्स ऑब्जेक्ट के माध्यम से एक्सेस किया जा सकता है।

एक्सेसिंग प्रॉप्स का उदाहरण:

function Greeting(props) {
    return 
Hello, {props.name}!
;
}

राज्य का प्रबंधन

स्टेट एक अंतर्निहित ऑब्जेक्ट है जो घटकों को अपना डेटा रखने और प्रबंधित करने की अनुमति देता है। प्रॉप्स के विपरीत, स्थिति परिवर्तनशील है और समय के साथ बदल सकती है, अक्सर उपयोगकर्ता के कार्यों के जवाब में।

कार्यात्मक घटकों में राज्य का उपयोग करना
कार्यात्मक घटकों में, आप स्थिति को प्रबंधित करने के लिए यूज़स्टेटहुक का उपयोग कर सकते हैं।

useStateHook का उपयोग करने का उदाहरण:

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0); // Initialize state

    return (
        

            
Count: {count}
             setCount(count   1)}>Increment
        
    );
}

इस उदाहरण में, यूज़स्टेट काउंट स्टेट वेरिएबल को 0 से प्रारंभ करता है, और सेटकाउंट एक फ़ंक्शन है जो स्टेट को अपडेट करता है

कक्षा घटकों में राज्य का उपयोग करना

क्लास घटकों में, राज्य को this.state ऑब्जेक्ट और setState पद्धति का उपयोग करके प्रबंधित किया जाता है।

कक्षा घटकों में राज्य का उपयोग करने का उदाहरण:

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 }; // Initialize state
    }

    increment = () => {
        this.setState({ count: this.state.count   1 }); // Update state
    }

    render() {
        return (
            

                
Count: {this.state.count}
                Increment
            
        );
    }
}

राज्य बनाम प्रॉप्स

• स्थिति: घटक के भीतर प्रबंधित। समय के साथ बदल सकता है, आमतौर पर उपयोगकर्ता की गतिविधियों के जवाब में।
• प्रॉप्स: माता-पिता द्वारा घटक को दिया गया। घटक के भीतर अपरिवर्तनीय।

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

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

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

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