कुछ ऐसा है जो मुझे काम करते समय बहुत भ्रमित करता है React।
इंटरनेट पर ऐसे बहुत से उदाहरण उपलब्ध हैं जो .jsप्रतिक्रिया के साथ फाइलों का उपयोग करते हैं लेकिन कई अन्य .jsxफाइलों का उपयोग करते हैं।
मैंने .jsxफ़ाइलों के बारे में पढ़ा है और मेरी समझ यह है कि वे आपको केवल आपके भीतर html टैग लिखने देते हैं javascript। लेकिन यही बात .jsफाइलों में भी लिखी जा सकती है ।
तो इन दो एक्सटेंशनों के बीच वास्तविक अंतर क्या है .jsऔर .jsx?
जवाबों:
जब फ़ाइल एक्सटेंशन की बात आती है तो कोई नहीं होता है। आपका बंडल / ट्रांसपिलर / जो भी हल करने का ख्याल रखता है कि किस प्रकार की फ़ाइल सामग्री है।
वहाँ लेकिन कुछ अन्य कारणों पर निर्णय करते समय एक में डाल रहे हैं .jsया एक .jsxफ़ाइल प्रकार। चूंकि JSX मानक जावा स्क्रिप्ट एक है कि कुछ भी है कि "सादे" नहीं है बहस कर सकते नहीं है जावास्क्रिप्ट जाना चाहिए अपने स्वयं के एक्सटेंशन यानी में।, .jsxJSX के लिए और .tsउदाहरण के लिए टाइपप्रति के लिए।
.jsxआवश्यकता न हो
ज्यादातर मामलों में यह केवल ट्रांसपॉइलर / बंडल की जरूरत है, जिसे जेएसएक्स फाइलों के साथ काम करने के लिए कॉन्फ़िगर नहीं किया जा सकता है, लेकिन जेएस के साथ! तो आप JSX के बजाय JS फाइल का उपयोग करने के लिए मजबूर हैं।
और चूंकि प्रतिक्रिया जावास्क्रिप्ट के लिए सिर्फ एक पुस्तकालय है, इसलिए आपको JSX या JS के बीच चयन करने से कोई फर्क नहीं पड़ता है। वे पूरी तरह से विनिमेय हैं!
कुछ मामलों में, कोड को हाइलाइट करने के कारण उपयोगकर्ता / डेवलपर JSX पर भी JSX का चयन कर सकते हैं, लेकिन अधिकांश नए संपादक भी JS फाइलों में प्रतिक्रिया सिंटैक्स को सही ढंग से देख रहे हैं।
JSX टैग ( <Component/>) स्पष्ट रूप से मानक जावास्क्रिप्ट नहीं हैं और इसका कोई विशेष अर्थ नहीं है यदि आप उन्हें <script>उदाहरण के लिए नग्न टैग के अंदर रखते हैं । इसलिए सभी रिएक्ट फाइलें जिनमें वे शामिल हैं वे JSX हैं न कि JS।
कन्वेंशन द्वारा, एक रिएक्ट एप्लिकेशन का एंट्री पॉइंट आमतौर पर .jsx के बजाय .js होता है, हालांकि इसमें रिएक्ट घटक होते हैं। यह .jsx भी हो सकता है। किसी भी अन्य JSX फाइल में आमतौर पर .jsx एक्सटेंशन होता है।
किसी भी मामले में, अस्पष्टता का कारण यह है क्योंकि अंत में विस्तार बहुत ज्यादा मायने नहीं रखता है क्योंकि ट्रांसपिलर खुशी से किसी भी प्रकार की फाइलों को कुतर देता है जब तक कि वे वास्तव में JSX हैं।
मेरी सलाह होगी: इसके बारे में चिंता न करें।
var elem = <div>Text</div>;एक मानक HTML तत्व नहीं है; यह समर्थन नहीं करता है appendChild, classListऔर शायद अन्य HTML सुविधाएँ। आप html जावास्क्रिप्ट में सीधे टैग किए जाने पर चाहते हैं यह टेम्पलेट शाब्दिक (बैकटिक उपयोग करने के लिए बेहतर है `एक साथ के साथ) innerHtmlया outerHtml।
इस तथ्य के अलावा कि JSX टैग मानक जावास्क्रिप्ट नहीं हैं, इसका कारण मैं .jsx एक्सटेंशन का उपयोग करता हूं, क्योंकि इसके साथ Emmet अभी भी संपादक में काम करता है - आप जानते हैं, कि उपयोगी प्लगइन html कोड का विस्तार करता है, उदाहरण के लिए ul> li
<ul>
<li></li>
</ul>"emmet.includeLanguages": { "javascript": "javascriptreact" }करना संभव है।
जैसा कि अन्य उल्लेख JSXमानक जावास्क्रिप्ट विस्तार नहीं है। बेहतर है कि आप अपने एंट्री पॉइंट को एप्लीकेशन के आधार पर नाम दें .jsऔर बाकी कंपोनेंट्स के लिए आप इसका इस्तेमाल कर सकते हैं .jsx।
मेरे पास एक महत्वपूर्ण कारण है कि मैं .JSXसभी घटक फ़ाइल नामों का उपयोग क्यों कर रहा हूं । वास्तव में, कोड के विशाल समूह के साथ एक बड़े पैमाने पर परियोजना में, यदि हम .jsxविस्तार के साथ सभी रिएक्ट के घटक को सेट करते हैं, तो यह पूरे प्रोजेक्ट में विभिन्न जावास्क्रिप्ट फ़ाइलों (जैसे हेल्पर्स, मिडलवेयर, आदि) पर नेविगेट करते समय आसान होगा और आप यह जानते हैं। एक प्रतिक्रिया घटक और अन्य प्रकार की जावास्क्रिप्ट फ़ाइल नहीं।
JSX मानक जावास्क्रिप्ट नहीं है, एयरबीएनबी स्टाइल गाइड के आधार पर 'एसलिंट' इस पैटर्न पर विचार कर सकता है
// filename: MyComponent.js
function MyComponent() {
return <div />;
}एक चेतावनी के रूप में, यदि आपने अपनी फ़ाइल का नाम MyComponent.jsx रखा है, तो यह तब तक पास रहेगा, जब तक कि आप अनुरक्षण नियम को संपादित नहीं करते हैं, आप यहां स्टाइल गाइड की जांच कर सकते हैं