TSX फ़ाइल क्या है?

“.tsx” फ़ाइल एक्सटेंशन आमतौर पर टाइपस्क्रिप्ट फ़ाइलों से जुड़ा होता है जिसमें रिएक्ट कोड होता है। टाइपस्क्रिप्ट जावास्क्रिप्ट का एक सुपरसेट है जो भाषा में स्थिर टाइपिंग जोड़ता है, और रिएक्ट यूजर इंटरफेस बनाने के लिए एक जावास्क्रिप्ट लाइब्रेरी है। रिएक्ट और टाइपस्क्रिप्ट के साथ एक साथ काम करते समय, डेवलपर्स अक्सर अपनी फ़ाइलों के लिए “.tsx” एक्सटेंशन का उपयोग करते हैं ताकि यह इंगित किया जा सके कि उनमें टाइपस्क्रिप्ट और JSX (जावास्क्रिप्ट के लिए रिएक्ट का सिंटैक्स एक्सटेंशन) दोनों शामिल हैं।

टीएसएक्स फ़ाइल उदाहरण

टाइपस्क्रिप्ट आपको अपने वेरिएबल्स, फ़ंक्शन पैरामीटर्स और बहुत कुछ के लिए प्रकार परिभाषित करने की अनुमति देता है। आप अक्सर “.tsx” फ़ाइल में टाइपस्क्रिप्ट कोड देखेंगे जो रिएक्ट घटकों में उपयोग किए जाने वाले प्रॉप्स, स्टेट और अन्य वेरिएबल्स के प्रकार निर्दिष्ट करता है।

// उदाहरण: रिएक्ट घटक में टाइपस्क्रिप्ट कोड
इंटरफ़ेस MyComponentProps {
   नाम: स्ट्रिंग;
   उम्र: संख्या;
}
const MyComponent: React.FC<MyComponentProps> = ({नाम, उम्र }) => {
   //घटक तर्क यहाँ
   रिटर्न <div>{name} {आयु} वर्ष पुराना है।</div>;
};

JSX (रिएक्ट सिंटेक्स एक्सटेंशन)

JSX रिएक्ट द्वारा अनुशंसित जावास्क्रिप्ट के लिए एक सिंटैक्स एक्सटेंशन है। यह XML/HTML के समान दिखता है और इसका उपयोग यह बताने के लिए किया जाता है कि UI कैसा दिखना चाहिए।

// उदाहरण: रिएक्ट घटक में JSX
const MyComponent: React.FC<MyComponentProps> = ({नाम, उम्र }) => {
   रिटर्न <div>{name} {आयु} वर्ष पुराना है।</div>;
};

“.tsx” फ़ाइल में आमतौर पर कार्यात्मक घटकों या वर्ग घटकों का उपयोग करके एक रिएक्ट घटक की परिभाषा शामिल होगी।

// उदाहरण: ".tsx" फ़ाइल में प्रतिक्रिया घटक परिभाषा
const MyComponent: React.FC = () => {
   वापसी <div>हैलो, प्रतिक्रिया करें!</div>;
};

आप अक्सर फ़ाइल की शुरुआत में आवश्यक निर्भरताएँ और मॉड्यूल लाते हुए आयात विवरण देखेंगे।

// उदाहरण: ".tsx" फ़ाइल में विवरण आयात करें
'प्रतिक्रिया' से प्रतिक्रिया आयात करें;

TSX फ़ाइल कैसे खोलें?

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