HTML से JSX कन्वर्टर
मुफ़्त ऑनलाइन HTML से JSX कन्वर्टर। HTML पेस्ट करें और तुरंत साफ़ React JSX पाएं — className, htmlFor, कैमलकेस स्टाइल ऑब्जेक्ट, सेल्फ़-क्लोज़िंग टैग और सुरक्षित कमेंट, पूरी तरह ब्राउज़र में।
HTML से JSX कन्वर्टर क्या करता है?
यह साधारण HTML मार्कअप को उस JSX में बदलता है जिसे React रेंडर कर सके। इनपुट एरिया में HTML पेस्ट करें और बराबर का JSX आउटपुट पैनल में दिखेगा, टाइप करते ही छोटे डिबाउंस के साथ अपडेट होता है।
कौन-से एट्रिब्यूट बदले जाते हैं?
class बनकर className, for बनकर htmlFor और tabindex बनकर tabIndex जाता है। maxlength, colspan, stroke-width जैसे हाइफ़न वाले एट्रिब्यूट React के कैमलकेस नामों में बदल जाते हैं। data-* और aria-* ज्यों के त्यों रहते हैं।
style एट्रिब्यूट कैसे बदलता है?
style="background-color: red; font-size: 12px" जैसी CSS स्ट्रिंग एक JavaScript ऑब्जेक्ट बन जाती है: style={{backgroundColor:'red', fontSize:'12px'}}। हर CSS प्रॉपर्टी कैमलकेस में जाती है और वैल्यू कोट्स में रखी जाती है।
void एलिमेंट कैसे हैंडल होते हैं?
जिन एलिमेंट में चिल्ड्रन नहीं हो सकते — img, br, input, hr, meta, link वगैरह — सेल्फ़-क्लोज़िंग सिंटैक्स में बदल जाते हैं: <img> बन जाता है <img />, जैसा JSX माँगता है। खाली div और span भी इसी तरह बंद होते हैं।
HTML कमेंट्स का क्या होता है?
वे JSX कमेंट बन जाते हैं: <!-- note --> बन जाता है {/* note */}। कमेंट को जल्दी बंद कर देने वाली सीक्वेंस बेअसर कर दी जाती है, ताकि बना कोड हमेशा कंपाइल हो।
एंटिटी और स्पेशल कैरेक्टर कैसे ट्रीट होते हैं?
& या © जैसी एंटिटी असली कैरेक्टर में डिकोड होती हैं, फिर कर्ली और ऐंगल ब्रैकेट JSX-सेफ तरीके से दोबारा एस्केप होते हैं, इसलिए { } या < वाला टेक्स्ट कंपोनेंट तोड़े बिना सही रेंडर होता है।
फ़ंक्शन कंपोनेंट ऑप्शन क्या करता है?
यह बदले हुए मार्कअप को तैयार टेम्पलेट में लपेटता है: function Component() { return ( ...आपका JSX... ) }। इसे ऑन करें जब स्निपेट को सीधे React फ़ाइल में पेस्ट करना हो।
क्या मेरा HTML कहीं अपलोड होता है?
नहीं। पार्सिंग पूरी तरह आपके ब्राउज़र में बिल्ट-इन DOMParser से होती है। कुछ भी सर्वर पर नहीं जाता, प्राइवेट मार्कअप भी सुरक्षित है, और टूल ऑफ़लाइन भी चलता है।
HTML से JSX कन्वर्टर का उपयोग कैसे करें
ब्राउज़र छोड़े बिना साधारण HTML को इस्तेमाल-तैयार React JSX में बदलें। सब कुछ बिल्ट-इन DOMParser से लोकल पार्स होता है — आपका मार्कअप कभी अपलोड नहीं होता।
- अपना HTML बाएँ एडिटर में पेस्ट करें; JSX नतीजा दाईं ओर दिखता है और टाइप करते ही अपडेट होता है (300 ms डिबाउंस)।
- "इंडेंट" में इंडेंट चौड़ाई चुनें — हर नेस्टिंग लेवल पर 2 या 4 स्पेस।
- "फ़ंक्शन कंपोनेंट" टॉगल करके आउटपुट को function Component() { return ( ... ) } में लपेटें, जो सीधे React फ़ाइल में पेस्ट होने के लिए तैयार है।
- नतीजा लेने के लिए "कॉपी", सैंपल लोड करने के लिए "उदाहरण" और नए सिरे से शुरू करने के लिए "साफ़ करें" इस्तेमाल करें।
class, for और tabindex बन जाते हैं className, htmlFor और tabIndex; style स्ट्रिंग कैमलकेस ऑब्जेक्ट बनती है; img या br जैसे void एलिमेंट सेल्फ-क्लोज़िंग रूप में निकलते हैं — बिल्कुल वही जो JSX चाहता है।
संबंधित टूल
- HTML ब्यूटीफायर HTML कोड को तुरंत प्रारूपित और सुंदर बनाएं। मिनीफाइड HTML को साफ, पठनीय कोड में बदलें। मुफ्त ऑनलाइन टूल, कोई पंजीकरण नहीं।
- कोड से इमेज सिंटैक्स हाइलाइटिंग, कस्टम थीम और विंडो सजावट के साथ कोड स्निपेट को साझा करने योग्य छवियों में बदलें। 100% गोपनीयता, सब आपके ब्राउज़र में।
- फ़ाइल हैश MD5, SHA-1, SHA-256, SHA-512 फ़ाइल हैश स्थानीय रूप से गणना और सत्यापन
- Chmod कैलकुलेटर चेकबॉक्स के साथ Linux फ़ाइल अनुमतियों को विज़ुअलाइज़ और गणना करने के लिए मुफ्त ऑनलाइन chmod कैलकुलेटर। संख्यात्मक (755, 644) और प्रतीकात्मक (rwxr-xr-x) अंकन के बीच तुरंत कन्वर्ट करें। setuid, setgid, sticky bit जैसी विशेष अनुमतियों का समर्थन करता है।
- ASCII तालिका दशमलव, हेक्साडेसिमल, ऑक्टल, बाइनरी कोड, HTML एंटिटी और वर्णन के साथ पूर्ण ASCII वर्ण एन्कोडिंग संदर्भ। तुरंत खोजें और फ़िल्टर करें।
- हेक्स व्यूअर खोज, ऑफसेट नेविगेशन और वर्चुअल स्क्रॉलिंग के साथ हेक्स डंप प्रारूप में फ़ाइल सामग्री देखें
- MIME प्रकार खोज फ़ाइल एक्सटेंशन से तुरंत MIME प्रकार खोजें या MIME प्रकार से एक्सटेंशन खोजें। 1000+ प्रविष्टियों के साथ मुफ्त ऑनलाइन संदर्भ।
- स्क्रीन रिज़ॉल्यूशन चेकर स्क्रीन रिज़ॉल्यूशन, व्यूपोर्ट आकार, DPI और रंग गहराई को रीयल-टाइम में पता लगाएं।