इस लेख में
React के लिए HTML को रूपांतरण की आवश्यकता क्यों है
JSX दिखने में HTML जैसा है लेकिन JavaScript सिंटैक्स नियमों का पालन करता है। React, UI संरचना का वर्णन करने के लिए JSX का उपयोग करता है, और हालाँकि यह HTML जैसा दिखता है, कई एट्रिब्यूट और पैटर्न भिन्न होते हैं। किसी React कंपोनेंट में कच्चे HTML को पेस्ट करने से आमतौर पर कंपाइलेशन त्रुटियाँ या अप्रत्याशित व्यवहार होता है।
सबसे आम अंतरों में एट्रिब्यूट नामकरण (class बन जाता है className, for बन जाता है htmlFor), इनलाइन स्टाइल सिंटैक्स (स्ट्रिंग camelCase प्रॉपर्टी वाले ऑब्जेक्ट बन जाते हैं), सेल्फ-क्लोज़िंग टैग (प्रत्येक वॉइड एलिमेंट को स्वयं बंद होना चाहिए), और इवेंट हैंडलर नामकरण (onclick बन जाता है onClick) शामिल हैं। एक कन्वर्टर इन थकाऊ परिवर्तनों को स्वचालित कर देता है।
क्या-क्या रूपांतरित होता है
CheckTown का HTML से JSX कन्वर्टर HTML और JSX सिंटैक्स के बीच के सभी मानक परिवर्तनों को संभालता है।
- एट्रिब्यूट का नाम बदलना — class से className, for से htmlFor, tabindex से tabIndex, और अन्य सभी React-विशिष्ट एट्रिब्यूट नाम
- स्टाइल स्ट्रिंग पार्सिंग — CSS स्ट्रिंग वाले इनलाइन स्टाइल एट्रिब्यूट को camelCase प्रॉपर्टी नाम और स्ट्रिंग मानों वाले JavaScript स्टाइल ऑब्जेक्ट में बदल दिया जाता है
- सेल्फ-क्लोज़िंग टैग — <img>, <br>, <hr>, और <input> जैसे एलिमेंट को <img />, <br />, <hr />, <input /> में बदल दिया जाता है
- बूलियन एट्रिब्यूट — checked, disabled, readonly को उनके JSX समकक्षों में बदल दिया जाता है
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
HTML को JSX में बदलें →HTML को JSX में बदलते समय आम मुश्किलें
स्वचालित रूपांतरण के बावजूद, कुछ ऐसे पैटर्न होते हैं जिन पर प्रारंभिक परिवर्तन के बाद मैन्युअल ध्यान देने की आवश्यकता होती है।
- HTML कमेंट को JSX कमेंट सिंटैक्स में बदल दिया जाता है — जाँच लें कि नेस्टेड कमेंट टूटते तो नहीं
- stroke-width और fill-opacity जैसे SVG एट्रिब्यूट JSX में camelCase (strokeWidth, fillOpacity) का उपयोग करते हैं — SVG-भारी सामग्री को सत्यापित करें
- JavaScript स्ट्रिंग वाले इनलाइन इवेंट हैंडलर (onclick="alert()") को JSX एरो फ़ंक्शन हैंडलर में मैन्युअल रूपांतरण की आवश्यकता होती है
- HTML एंटिटी को Unicode अक्षरों या JSX एक्सप्रेशन में बदलने की आवश्यकता हो सकती है
अक्सर पूछे जाने वाले प्रश्न
क्या रूपांतरण सभी HTML के लिए 100% सटीक है?
कन्वर्टर मानक HTML-से-JSX एट्रिब्यूट मैपिंग, स्टाइल पार्सिंग, और सेल्फ-क्लोज़िंग टैग को सटीकता से संभालता है। हालाँकि, इनलाइन JavaScript इवेंट हैंडलर, एम्बेडेड स्क्रिप्ट, या गैर-मानक एट्रिब्यूट जैसे जटिल पैटर्न को रूपांतरण के बाद मैन्युअल समायोजन की आवश्यकता हो सकती है।
क्या मैं गतिशील डेटा वाले HTML टेम्पलेट को रूपांतरित कर सकता हूँ?
कन्वर्टर स्थिर HTML मार्कअप पर काम करता है। अन्य फ़्रेमवर्क से टेम्पलेट सिंटैक्स (जैसे Angular का *ngFor या Vue का v-for) को ज्यों-का-त्यों बनाए रखा जाएगा लेकिन यह React में काम नहीं करेगा। आपको टेम्पलेट डायरेक्टिव को JSX एक्सप्रेशन में मैन्युअल रूप से बदलना होगा।
क्या कन्वर्टर dangerouslySetInnerHTML को संभालता है?
नहीं। कन्वर्टर HTML संरचना को JSX संरचना में बदलता है। यदि आपको React के अंदर कच्ची HTML स्ट्रिंग रेंडर करने की आवश्यकता है, तो आप dangerouslySetInnerHTML का उपयोग मैन्युअल रूप से करेंगे। कन्वर्टर संरचनात्मक माइग्रेशन के लिए डिज़ाइन किया गया है, रनटाइम HTML इंजेक्शन के लिए नहीं।