रियेक्ट कॉम्पोनेंट्स क्या है | React Components In Hindi

React Components In Hindi – दोस्तों React Components के बारे में समझने से पहले आपको यह समझना होगा की रियेक्ट क्या है और कैसे काम करती है.

React क्या है?

दोस्तों React एक JavaScript library है जो की ओपन सोर्स है, इसको फ़ेसबुक के द्वारा maintain किया जाता है. React का उपयोग डेवलपर्स एप्लीकेशन की UI बनाने के लिए करते हैं.

अभी के समय में React काफ़ी पॉपुलर लाइब्रेरी बन गई है जिसके इस्तेमाल से काफ़ी बड़ी-बड़ी एप्लीकेशन बनाई जा रही है क्योंकि react से बनायी गई एप्लीकेशन काफ़ी fast होती है.

React के ख़ास फीचर की बात की जाये तो react एक component based architecture देता है जिससे डेवलपर्स reusable components बना सकते हैं और भविस्य में बनाने वाली एप्लीकेशन के लिये इस्तेमाल भी कर सकते हैं.

React Components In Hindi

यह react एप्लीकेशन के fundamental building blocks होते हैं जो कि यह बताते हैं की आपके अलग-अलग घटक कैसे दिखाई देंगे, या इन्हें आसान भाषा में समझा जाये तो React Components एक react application के अलग-अलग टुकड़े होते हैं जो की एक होकर पूरी एप्लीकेशन तैयार करते हैं.

React Components 2 प्रकार के होते हैं जिनके बारे में नीचे आप डिटेल से पढ़ सकते हैं.

1. Functional Components
2. Class Components

Functional Components (Stateless Components)

दोस्तों Functional Components रियेक्ट के सबसे सरल Components माने जाते हैं और इन्हें जावास्क्रिप्ट के function की तरह ही लिखा जाता है इसलिए इन्हें सबसे सरल माना जाता है.

Functional components में आप property(props) को पैरामीटर के रूप में पास कर सकते हैं और यह JSX (जावास्क्रिप्ट XML) elements को लौटाते हैं जो की यह बताता है कि क्या display किया जाना चाहिए.

नीचे इसका आप एक example देख सकते हैं.

import React from 'react';

function FunctionalComponent(props) {
  return <div>{props.message}</div>;
}

Class Components (Stateful Components)

इन्हें ES6 classes के रूप में परिभाषित किया गया है और इनमें props प्राप्त करने के अलावा अपनी internal state को manage करने की क्षमता होती है.

दोस्तों Class Components का इस्तेमाल ज़्यादा नहीं किया जाता है इनका इस्तेमाल उसी परिस्थिति में किया जाता है जहां आपको काम्प्लेक्स डेटा get करना हो वरना आप simple Functional Components का इस्तेमाल कर सकते हैं.

नीचे Class Component का एक अच्छा example देख सकते हैं.

import React, { Component } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

Conclusion

आज के आर्टिकल React Components In Hindi में आपने पढ़ा की React में कितने प्रकार के Components होते हैं और कैसे काम करते हैं, react components में Functional Components कैसे काम करते हैं और Class Components कैसे काम करते हैं.

उम्मीद है आज के आर्टिकल में आपने कुछ नया सीखा होगा.

ध्न्यवाद.