कंपोनेंट्स और प्रॉप्स क्या है | What is Components and Props?

कंपोनेंट्स (Components) और प्रॉप्स (Props) React में महत्वपूर्ण अवयव हैं जो वेब या मोबाइल ऐप्लिकेशन की विकास में उपयोग किए जाते हैं।

1. कंपोनेंट्स (Components) क्या है? What is Components?

कंपोनेंट्स (Components) React में रीयलटेड इंटरफेस (UI) के लिए बनाए गए पुनरावर्ती, स्वतंत्र और पुनर्योगी रूप हैं। इन्हें आप जैसा चाहें वैसे अनेक बार पुन: प्रयोग किया जा सकता है। (Components) कंपोनेंट्स React एप्लिकेशन को छोटे, संरचित, और प्रबंधनीय हिस्सों में विभाजित करते हैं, जिससे उन्हें विकास और परिचालन करना आसान होता है।

कंपोनेंट्स (Components) के कुछ मुख्य विशेषताएँ निम्नलिखित हैं:

• रीयलटेड इंटरफेस (UI) के लिए बनाए गए: (Components) कंपोनेंट्स एक UI तत्व को प्रतिनिधित करते हैं, जैसे कि एक बटन, फ़ॉर्म, या मेनू।
• अलग-अलग प्रॉपर्टीज़ के साथ बनाए जा सकते हैं: (Components) कंपोनेंट्स जो प्रॉपर्टीज़ को स्वीकार कर सकते हैं, वे अपने प्रारंभिक स्थिति, दृश्य और व्यवहार को सेट करने के लिए प्रॉपर्टीज़ का उपयोग करते हैं।

नीचे उदाहरण में देखो - Functional कंपोनेंट्स और Class कंपोनेंट्स

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

2. प्रॉप्स (Props) क्या है? What is React Props?

प्रॉप्स (Props) React कंपोनेंट्स के साथ डेटा को पास करने का माध्यम होते हैं। ये कंपोनेंट्स को डाइनामिक बनाने और विभिन्न डेटा और कॉन्‍टेंट्स को प्रदर्शित करने में मदद करते हैं।

प्रॉप्स (Props)के कुछ मुख्य विशेषताएँ निम्नलिखित हैं:

• डेटा पास करना: (Props) प्रॉप्स के माध्यम से कंपोनेंट्स को डेटा को पास किया जा सकता है, जो उन्हें डाइनामिक बनाता है।
• इम्यूटेबल (Immutable): (Props) प्रॉप्स एक बार पास किए गए हैं, तो उन्हें बदला नहीं जा सकता है। यानी वे रियलटाइम में बदले नहीं जा सकते हैं।
• React (Components) कंपोनेंट्स के बीच डेटा संचार: (Props) प्रॉप्स (Components) कंपोनेंट्स के बीच डेटा को पास करने का माध्यम होते हैं, जिससे एक कंपोनेंट दूसरे कंपोनेंट को उपयोग करने के लिए जानकारी प्रदान कर सकता है।

नीचे उदाहरण में देखो - Parent कंपोनेंट और Child कंपोनेंट

// Parent Component
function App() {
return <Welcome name="John" />;
}
// Child Component
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}


What is React Components?

Components are the building blocks of a React application. They are JavaScript functions or classes that return React elements, which describe what should appear on the screen. Components can be reused, composed, and nested to create complex user interfaces.

How may types of react components?

1. Functional Components: These are simple JavaScript functions that accept props as input and return JSX elements to render UI. These are JavaScript functions that take props as input and return React elements. They are simpler and more lightweight compared to class components.

Example below code -

function MyComponent(props) {
return <div>Hello, {props.name}!</div>;
}

2. Class Components:These are ES6 classes that extend React.Component. They have a render() method that returns JSX elements. These are ES6 classes that extend React.Component. They have a render method that returns the UI for the component. Class components are used when you need to manage state or use lifecycle methods.

Example below code -

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


What is React Props?

Props (short for properties) are a mechanism for passing data from parent components to child components. They are immutable and are used to customize the behavior and appearance of components. Props are passed as attributes to components and accessed within the component via props object.

Example below code -

function ParentComponent() {
return <ChildComponent name="John" />;
}
function ChildComponent(props) {
return <div>Hello, {props.name}!</div>;
}


In this example, the ParentComponent passes the name prop with the value "John" to the ChildComponent. The ChildComponent then displays a greeting message using this prop.

निष्कर्ष (Conclusion)

In summary, components and props are core concepts in React.js that enable the creation of modular, reusable, and dynamic user interfaces. Components represent UI elements, while props allow components to accept and utilize data and configurations from their parent components.