TypeScript for React Components From Beginners to Masters

आप क्या सीखेंगे

• रिएक्ट घटकों में प्रकारों का उपयोग करना सीखेंगे
• रिएक्ट घटकों के लिए डिफ़ॉल्ट प्रोप्स को परिभाषित करने का तरीका जानेंगे
• रिएक्ट घटकों में जेनेरिक्स का उपयोग करना सीखेंगे

मुख्य अवधारणाएं

रिएक्ट और टाइपस्क्रिप्ट के साथ काम करने के लिए, आपको कुछ मुख्य अवधारणाओं को समझना होगा:

• रिएक्ट घटकों को परिभाषित करने के लिए टाइपस्क्रिप्ट का उपयोग करना
• डिफ़ॉल्ट प्रोप्स को परिभाषित करने का तरीका
• जेनेरिक्स का उपयोग करके रिएक्ट घटकों को अधिक लचीला बनाना

कोड उदाहरण

interface ContainerProps {
  heading: string;
}

const Container: React.FC<ContainerProps> = ({ heading }) => {
  return <h1>{heading}</h1>;
};

यह कोड रिएक्ट घटक के लिए एक इंटरफ़ेस परिभाषित करता है और फिर उस इंटरफ़ेस का उपयोग करके एक घटक बनाता है।

const Heading: React.FC<{ title: string }> = ({ title }) => {
  return <h1>{title}</h1>;
};

यह कोड एक रिएक्ट घटक बनाता है जो एक शीर्षक प्राप्त करता है और उसे प्रदर्शित करता है।

पाठ सारांश

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

अभ्यास व्यायाम

एक रिएक्ट घटक बनाएं जो एक प्रोप के रूप में एक स्ट्रिंग प्राप्त करता है और उसे प्रदर्शित करता है। फिर, उस घटक को एक अन्य घटक के भीतर उपयोग करें जो उसे एक प्रोप के रूप में एक स्ट्रिंग प्रदान करता है।

आगे क्या है

अगले पाठ में, हम रिएक्ट हुक्स के बारे में सीखेंगे और देखेंगे कि कैसे हम उन्हें अपने रिएक्ट अनुप्रयोगों में उपयोग कर सकते हैं।