React.js, फेसबुक द्वारा विकसित और अनुरक्षित, यूजर इंटरफेस, विशेष रूप से सिंगल-पेज एप्लिकेशन (एसपीए) के निर्माण के लिए सबसे लोकप्रिय जावास्क्रिप्ट लाइब्रेरी में से एक बन गया है। अपने लचीलेपन, दक्षता और उपयोग में आसानी के लिए जाना जाने वाला, रिएक्ट के पास सभी स्तरों पर डेवलपर्स के लिए एक बड़ा समुदाय और संसाधनों का खजाना है। चाहे आप एक शुरुआती या एक अनुभवी डेवलपर हों जो अपने कौशल सेट में रिएक्ट जोड़ना चाह रहे हों, यह ट्यूटोरियल आपको रिएक्ट.जेएस के बुनियादी सिद्धांतों के बारे में मार्गदर्शन करेगा।

1. React.js क्या है?

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

2. अपना प्रतिक्रिया वातावरण स्थापित करना

कोडिंग शुरू करने से पहले, आपको अपना विकास परिवेश स्थापित करना होगा। इन चरणों का पालन करें:

चरण 1: Node.js और npm स्थापित करें

• Node.js: रिएक्ट को अपने बिल्ड टूल के लिए Node.js की आवश्यकता है।
• npm: नोड पैकेज मैनेजर (npm) का उपयोग लाइब्रेरी और पैकेज स्थापित करने के लिए किया जाता है।

आप आधिकारिक वेबसाइट से Node.js डाउनलोड और इंस्टॉल कर सकते हैं। npm Node.js के साथ बंडल में आता है।

चरण 2: क्रिएट रिएक्ट ऐप इंस्टॉल करें

फेसबुक ने क्रिएट रिएक्ट ऐप नाम से एक टूल बनाया है जो आपको एक नया रिएक्ट प्रोजेक्ट जल्दी और कुशलता से सेट करने में मदद करता है। अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

npx create-react-app my-app

यह कमांड एक रिएक्ट प्रोजेक्ट शुरू करने के लिए सभी आवश्यक फाइलों और निर्भरताओं के साथ my-app नामक एक नई निर्देशिका बनाता है।

चरण 3: विकास सर्वर प्रारंभ करें

अपनी परियोजना निर्देशिका में नेविगेट करें और विकास सर्वर प्रारंभ करें:

cd my-app
npm start

आपका नया रिएक्ट ऐप अब http://localhost:3000 पर चलना चाहिए।

3. प्रतिक्रिया घटकों को समझना

रिएक्ट सभी घटकों के बारे में है। रिएक्ट में एक घटक एक स्व-निहित मॉड्यूल है जो कुछ आउटपुट प्रस्तुत करता है, आमतौर पर HTML। घटकों को या तो कार्यात्मक घटकों या वर्ग घटकों के रूप में परिभाषित किया जा सकता है।

कार्यात्मक घटक

एक कार्यात्मक घटक एक सरल जावास्क्रिप्ट फ़ंक्शन है जो HTML लौटाता है (JSX का उपयोग करके)।

उदाहरण:

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

कक्षा घटक

एक वर्ग घटक घटकों को परिभाषित करने का एक अधिक शक्तिशाली तरीका है और आपको स्थानीय स्थिति और जीवनचक्र विधियों को प्रबंधित करने की अनुमति देता है।

उदाहरण:

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

4. जेएसएक्स - जावास्क्रिप्ट एक्सएमएल

JSX जावास्क्रिप्ट के लिए एक सिंटैक्स एक्सटेंशन है जो HTML के समान दिखता है। यह आपको सीधे जावास्क्रिप्ट के भीतर HTML लिखने की अनुमति देता है, जो रिएक्ट फिर वास्तविक DOM तत्वों में बदल जाएगा।

उदाहरण:

const element = 
Hello, world!
;

JSX आपके यूआई की संरचना को लिखना और कल्पना करना आसान बनाता है। हालाँकि, हुड के तहत, JSX React.createElement() कॉल में परिवर्तित हो जाता है।

5. राज्य और सहारा

प्रॉप्स

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

उदाहरण:

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

राज्य

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

उदाहरण:

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

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

  render() {
    return (
      

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

6. घटनाओं को संभालना

रिएक्ट में घटनाओं को संभालना DOM तत्वों में घटनाओं को संभालने के समान है। हालाँकि, कुछ वाक्यात्मक अंतर हैं:

• प्रतिक्रिया घटनाओं को लोअरकेस के बजाय कैमलकेस का उपयोग करके नाम दिया गया है।
• JSX के साथ, आप एक स्ट्रिंग के बजाय एक फ़ंक्शन को इवेंट हैंडलर के रूप में पास करते हैं।

उदाहरण:

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    
      Click me
    
  );
}

7. जीवनचक्र विधियाँ

रिएक्ट में क्लास घटकों में विशेष जीवनचक्र विधियां होती हैं जो आपको घटक के जीवन के दौरान विशेष समय पर कोड चलाने की अनुमति देती हैं। इसमे शामिल है:

• componentDidMount: घटक माउंट होने के बाद कॉल किया जाता है।
• componentDidUpdate: घटक अपडेट के बाद कॉल किया गया।
• componentWillUnmount: घटक को अनमाउंट करने से पहले कॉल किया जाता है।

उदाहरण:

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      

        
{this.state.date.toLocaleTimeString()}
      
    );
  }
}

8. सशर्त प्रतिपादन

रिएक्ट में, आप अपने घटक की स्थिति के आधार पर अलग-अलग दृश्य बना सकते हैं।

उदाहरण:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return 
Welcome back!
;
  }
  return 
Please sign up.
;
}

9. सूचियाँ और कुंजियाँ

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

उदाहरण:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    

{listItems}

10. रिएक्ट हुक्स

रिएक्ट हुक आपको कार्यात्मक घटकों में राज्य और अन्य रिएक्ट सुविधाओं का उपयोग करने की अनुमति देता है। सबसे अधिक उपयोग किए जाने वाले कुछ हुक में शामिल हैं:

• useState: आपको एक कार्यात्मक घटक में राज्य जोड़ने की अनुमति देता है।
• useEffect: आपको अपने फ़ंक्शन घटकों में साइड इफेक्ट करने देता है।
• useContext: प्रत्येक स्तर पर प्रॉप्स को मैन्युअल रूप से पास किए बिना घटक ट्री के माध्यम से डेटा पास करने का एक तरीका प्रदान करता है।

उपयोग राज्य का उदाहरण:

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

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

11। रिएक्ट अनुप्रयोगों का निर्माण और तैनाती

एक बार आपका एप्लिकेशन तैयार हो जाए, तो आप इसे उत्पादन के लिए बना सकते हैं। निम्नलिखित कमांड का उपयोग करें:

npm run build

यह बिल्ड फ़ोल्डर में आपके रिएक्ट ऐप का एक अनुकूलित उत्पादन बिल्ड बनाएगा। फिर आप इसे किसी भी वेब सर्वर पर तैनात कर सकते हैं।

निष्कर्ष

React.js आधुनिक वेब एप्लिकेशन बनाने के लिए एक शक्तिशाली उपकरण है। घटकों, राज्य प्रबंधन, इवेंट हैंडलिंग और हुक को समझकर, आप गतिशील और इंटरैक्टिव उपयोगकर्ता इंटरफ़ेस बना सकते हैं। यह ट्यूटोरियल मूल बातें शामिल करता है, लेकिन रिएक्ट का पारिस्थितिकी तंत्र बहुत कुछ प्रदान करता है, जिसमें Redux के साथ उन्नत राज्य प्रबंधन, रिएक्ट राउटर के साथ रूटिंग और नेक्स्ट.जेएस के साथ सर्वर-साइड रेंडरिंग शामिल है।

जैसे ही आप रिएक्ट के साथ अपनी यात्रा जारी रखते हैं, आधिकारिक रिएक्ट दस्तावेज़ीकरण, सामुदायिक फ़ोरम और ट्यूटोरियल सहित ऑनलाइन संसाधनों का लाभ उठाना याद रखें। हैप्पी कोडिंग!