React.js एक JavaScript फ्रेमवर्क है जो हमें डेवलपर्स के रूप में कोड को एनकैप्सुलेट करके इसे अधिक पुन: प्रयोज्य बनाने की अनुमति देता है। इन एनकैप्सुलेटेड कोड स्निपेट्स को कंपोनेंट्स कहा जाता है। वे अपने स्वयं के लॉजिक और स्टेट को रख सकते हैं बिना डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) में चल रही चीजों में हस्तक्षेप किए।

अपनी वेबसाइट के हिस्सों को इन छोटे बाइट-साइज़ कंपोनेंट्स में एब्सट्रैक्ट करके डेटा को पास करने से आपका कोड पुन: प्रयोज्य और अधिक DRY (Don't Repeat Yourself) बन जाता है। React में दो मुख्य प्रकार के कंपोनेंट्स हैं जिनका आप सामना करेंगे: फंक्शनल और क्लास कंपोनेंट्स।

उच्च स्तरीय अवलोकन

बहुत उच्च स्तर पर, React कंपोनेंट्स मूल रूप से JavaScript फंक्शन्स हैं जो props को पैरामीटर के रूप में स्वीकार करते हैं और कुछ React एलिमेंट्स लौटाते हैं जो मूल रूप से वर्णन करते हैं कि स्क्रीन पर क्या होना चाहिए।

फंक्शनल कंपोनेंट्स

फंक्शनल कंपोनेंट्स, जैसा कि हमने पहले उल्लेख किया है, मूल रूप से JavaScript फंक्शन्स हैं। React कंपोनेंट्स बनाते समय आप EcmaScript 5 (ES5) या EcmaScript 6 (ES6) सिंटैक्स का उपयोग कर सकते हैं। एक नियम के रूप में, React कंपोनेंट्स को कैपिटलाइज़्ड होना चाहिए ताकि यह संकेत मिल सके कि वे वास्तव में कंपोनेंट्स हैं।

ES5 फंक्शनल कंपोनेंट

import React from 'react';
import ReactDOM from 'react-dom';

function Animal(props) {
  const element = 
My cat's name is {props.name}
;
  return element;
}

function App() {
  return ;
}

const domContainer = document.querySelector('#root');
ReactDOM.render(, domContainer);

ES6 फंक्शनल कंपोनेंट

const Animal = (props) => {
  const element = 
My cat's name is {props.name}
;
  return element;
}

const App = () => {
  return ;
}

const domContainer = document.querySelector('#root');
ReactDOM.render(, domContainer);

React v.16 से पहले, फंक्शनल कंपोनेंट्स को स्टेटलेस कंपोनेंट्स के रूप में जाना जाता था। इसका मतलब है कि कंपोनेंट का मुख्य उद्देश्य प्रेजेंटेशनल होना था – पेज पर अच्छा दिखना। अक्सर, डेटा को इन फंक्शनल कंपोनेंट्स में पास किया जाता था ताकि वे यूजर इंटरफेस पर कुछ प्रदर्शित कर सकें।

React v.16 के आगमन के साथ यह सब बदल गया। हम थोड़ी देर में उस पर आएंगे। अभी के लिए, बस इतना जान लें कि फंक्शनल कंपोनेंट्स किसी पैरेंट या किसी ग्लोबल ऑब्जेक्ट से किसी प्रकार का डेटा प्राप्त करके क्लाइंट को कुछ प्रस्तुत करने के लिए मौजूद होते हैं।

क्लास कंपोनेंट्स

क्लास कंपोनेंट्स "सिर्फ" एक JavaScript फंक्शन की तुलना में थोड़े अधिक जटिल हैं। React में क्लास कंपोनेंट्स ES6 JavaScript क्लास की अवधारणा को उधार लेते हैं। JavaScript में क्लास की संरचना बहुत हद तक एक ऑब्जेक्ट की तरह होती है जिसमें एट्रिब्यूट्स और मेथड्स जुड़े होते हैं। हम उस ऑब्जेक्ट के इंस्टेंस को एक्सेस करने और उसके साथ इंटरैक्ट करने के लिए this कीवर्ड का उपयोग करते हैं।

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

क्लास कंपोनेंट उदाहरण

import React from 'react';
import ReactDOM from 'react-dom';
import Name from './Name';

class Animal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      species: ['fox', 'tiger', 'bear', 'kangaroo', 'fish', 'cat', 'dog', 'squirrel']
    }
  }

  render() {
    return (
      

        {this.state.species.map(animal => {
          return 
        })}
      
    )
  }
}

ReactDOM.render(, document.getElementById('root'));

स्टेट प्रॉपर्टीज और मानों से भरा एक ऑब्जेक्ट है। यहां हमारे स्टेट में species नाम की एक प्रॉपर्टी है और इसका मान जानवरों से भरा एक सरणी है। इस सरणी को संदर्भित करने या इसके साथ इंटरैक्ट करने के लिए, हम this.state.species का उपयोग करते हैं।

उपरोक्त क्लास कंपोनेंट का उद्देश्य जानवर के नाम को <Name /> कंपोनेंट में पास करना है। <Name /> कंपोनेंट का काम उस डेटा के साथ कुछ करना है जब वह इसे प्राप्त करता है। Animal का स्टेट एक प्रॉप्स ऑब्जेक्ट का हिस्सा बन जाएगा जब इसे एक फंक्शनल या अन्य क्लास कंपोनेंट में पास किया जाएगा। यह चाइल्ड कंपोनेंट्स में तब तक एक्सेस करने योग्य होगा जब तक इसे पास किया जाता रहता है।

बस याद रखें कि React में, डेटा पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट तक केवल एक स्तर नीचे बहता है। यदि आपको पैरेंट के ग्रैंडचाइल्ड कंपोनेंट में डेटा की आवश्यकता है तो आपको इसे एक और स्तर नीचे पास करना होगा।

लाइफसाइकिल मेथड्स

React में क्लास कंपोनेंट्स की एक और विशेषता यह है कि हमारे पास लाइफसाइकिल मेथड्स तक पहुंच है और हम अपने स्टेट को ट्रैक करने के लिए उनका उपयोग करते हैं। React लाइफसाइकिल्स में आमतौर पर तीन चरण होते हैं: वे बनाए जाते हैं (Mounting), वे जीते हैं (Update) और वे मरते हैं (Unmounting)। लाइफसाइकिल मेथड के प्रत्येक चरण में स्टेट को एक्सेस और/या बदलने के लिए मेथड्स हैं:

1. componentDidMount() – यह वह लाइफसाइकिल मेथड है जहां हम स्टेट को इनिशियलाइज़ करने के लिए AJAX रिक्वेस्ट/नेटवर्क रिक्वेस्ट करेंगे। अपने पुनर्प्राप्त डेटा को स्टेट में लोड करने के लिए this.setState() का उपयोग करें।
2. componentDidUpdate() – यूजर द्वारा एप्लिकेशन के साथ इंटरैक्ट करने के बाद स्टेट में कोई भी अपडेट यहां होता है।
3. componentWillUnmount() – यह एक क्लीनअप फंक्शन है जो तब होता है जब कंपोनेंट अनमाउंट होता है। यह टाइमर्स, AJAX रिक्वेस्ट आदि का ख्याल रखेगा।

इनसे अधिक लाइफसाइकिल मेथड्स हैं – सूचीबद्ध केवल मुख्य हैं। इन मेथड्स के बारे में अधिक जानकारी के लिए React डॉक्यूमेंटेशन देखें।

अंत में, फंक्शनल कंपोनेंट के रिटर्न स्टेटमेंट के विपरीत, क्लास कंपोनेंट्स render() मेथड का उपयोग करते हैं। यह मेथड ReactDOM.render() द्वारा Animal कंपोनेंट को पास करने और React द्वारा इसके कंस्ट्रक्टर को कॉल करने के बाद इनवोक किया जाता है। स्टेट तब इनिशियलाइज़ होता है और फिर कंटेंट को वास्तव में स्क्रीन पर रखने के लिए render मेथड को कॉल किया जाता है।

फंक्शनल कंपोनेंट्स और useState()

2018 में, React ने React Hooks का विचार पेश किया। Hooks, फंक्शनल कंपोनेंट के अंदर लाइफसाइकिल मेथड्स और स्टेट का उपयोग करने का एक साफ और संक्षिप्त तरीका है।

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

useState() के साथ उदाहरण

import React, {useState} from 'react';
import ReactDOM from 'react-dom';

const Animal = (props) => {
  const element = 
My cat's name is {props.name}
;
  return element;
}

const App = () => {
  const [state, setState] = useState('Marshmallow');
  return ;
}

const domContainer = document.querySelector('#root');
ReactDOM.render(, domContainer);

हमारे पास दो कंपोनेंट्स हैं, एक Animal और एक App। ऐसा लगता है कि App, Animal को वापस कर रहा है और name नाम का एक प्रॉप पास कर रहा है जिसका मान "Marshmallow" है।

मानें या न मानें, इसे कुछ स्टेटफुल लॉजिक में बदलने के लिए हमें ज्यादा कुछ नहीं करना है। आइए कंपोनेंट पर एक नज़र डालें। हम इन चरणों का पालन करने जा रहे हैं:

1. import React, {useState} from 'react'; – यह लाइन हमारे हुक, useState को इम्पोर्ट करेगी।
2. const [ state, setState ] = useState('Marshmallow'); – यह लाइन हमारे स्टेट को इनिशियलाइज़ करती है। State और setState यहां मनमाने शब्द हैं। आप इन्हें जो चाहें नाम दे सकते हैं। यह प्रथागत है कि उन्हें उस मान के नाम पर रखा जाए जो वे धारण करते हैं।
3. state हमारा वास्तविक स्टेट है। इनिशियल स्टेट useState() में पैरेंथेसिस के अंदर है।
4. setState this.setState() के समान है। यह वह मेथड है जो हमारे एप्लिकेशन के माध्यम से यात्रा करते समय हमारे स्टेट को बदलेगा।
5. return – "Marshmallow" को {state} से बदलें। जब हमें JSX में JavaScript लिखने की आवश्यकता होती है, तो हम कर्ली ब्रेसेस का उपयोग करते हैं। यहां कर्ली ब्रेसेस हमें अपना वेरिएबल पास करने की अनुमति देते हैं।

क्लास कंपोनेंट्स को परिभाषित करने वाली विशेषताओं में से एक, React लाइफसाइकिल, अपने विभिन्न मेथड्स के साथ, एक बेसिक हुक तक सीमित हो गई है जो सभी मेथड्स को एनकैप्सुलेट करता है! useEffect() हुक उस React कंपोनेंट को माउंट, अपडेट और अनमाउंट कर सकता है जिसमें यह है।

निष्कर्ष

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

भले ही React Hooks अधिक लोकप्रिय हो रहा है, फिर भी सभी विभिन्न प्रकार के कंपोनेंट्स से परिचित होना महत्वपूर्ण होगा – लिगेसी कोड शायद कुछ समय के लिए क्लास कंपोनेंट्स का उपयोग करेगा और अभी भी इसे समझने की आवश्यकता होगी ताकि आप इसके साथ काम कर सकें!