हल: रिएक्ट नेटिव हुक कैसे स्थापित करें

निश्चित रूप से, यह लेख इस प्रकार है:

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

रिएक्ट नेटिव हुक आपके कोडबेस को छोटा, सरल और समझने में आसान बना सकता है। यह आलेख आपको अपने एप्लिकेशन में रिएक्ट नेटिव हुक्स को स्थापित और कार्यान्वित करने के तरीके के बारे में मार्गदर्शन करेगा।

रिएक्ट नेटिव हुक की स्थापना

हुक्स का उपयोग शुरू करने के लिए, आपको रिएक्ट और रिएक्ट नेटिव के एक विशेष संस्करण की आवश्यकता है। रिएक्ट संस्करण 16.8 या उससे अधिक नवीनतम होना चाहिए, और रिएक्ट नेटिव संस्करण 0.59 या उससे अधिक नवीनतम होना चाहिए।

npm install react@^16.8.3 react-native@^0.59.8 --save

उपरोक्त कमांड आवश्यक रिएक्ट और रिएक्ट नेटिव संस्करण स्थापित करेगा और उन्हें आपके प्रोजेक्ट में निर्भरता के रूप में सहेजेगा।

रिएक्ट नेटिव प्रोजेक्ट में हुक का परिचय

रिएक्ट नेटिव हुक ऐसे फ़ंक्शन हैं जो आपको क्लास लिखे बिना राज्य और अन्य रिएक्ट सुविधाओं का उपयोग करने देते हैं। इन्हें रिएक्ट 16.8 संस्करण में जोड़ा गया था। आइए देखें कि उन्हें आपके रिएक्ट नेटिव प्रोजेक्ट में कैसे शामिल किया जा सकता है।

import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me!" />
    </View>
  );
}
export default App;

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

अन्य लोकप्रिय हुक की खोज

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

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me!" />
    </View>
  );
}
export default App;

उपयोग करें रिएक्ट कक्षाओं में कंपोनेंटडिडमाउंट, कंपोनेंटडिडअपडेट और कंपोनेंटविलअनमाउंट के समान उद्देश्य को पूरा करता है, लेकिन एक एकल एपीआई में एकीकृत होता है। यह प्रत्येक रेंडर के बाद चलता है।

रिएक्ट नेटिव हुक आपके कोड को सरल बना सकता है और स्थिति और साइड इफेक्ट्स को प्रबंधित करना आसान बना सकता है, जिससे अधिक सरल कोड और एप्लिकेशन बन सकते हैं जिन्हें बनाए रखना और डीबग करना आसान हो जाता है।