कौन-से HTML attribute का नाम बदलकर JSX किया जाता है?

class बनता है className और for बनता है htmlFor। कई सभी-lowercase attribute को camelCase किया जाता है — tabindex को tabIndex, colspan को colSpan, maxlength को maxLength, readonly को readOnly — जबकि data-* और aria-* attribute ठीक वैसे ही रखे जाते हैं जैसे लिखे हैं।

यह एक inline style attribute को कैसे बदलता है?

एक style="color: red; font-size: 12px" स्ट्रिंग एक React style object, style={{ color: 'red', fontSize: '12px' }}, में parse होती है, हर CSS property camelCase के साथ। --brand जैसी CSS custom property और vendor prefix संरक्षित रहते हैं।

क्या यह और जैसे void element को self-close करता है?

हाँ। HTML void element — br, img, input, hr, meta, link, source, और बाक़ी — self-close किए हुए ( , ) आउटपुट होते हैं ताकि JSX मान्य हो। खाली non-void element भी self-close किए जाते हैं।

रूपांतरण के दौरान HTML comment का क्या होता है?

HTML comment को JSX comment सिंटैक्स में फिर से लिखा जाता है। यदि comment टेक्स्ट में एक star-slash क्रम हो तो उसे तोड़ दिया जाता है ताकि यह JSX comment को जल्दी बंद न कर सके और आपका build न तोड़ सके।

क्या यह आउटपुट को एक React component में लपेट सकता है?

'Wrap in component' चालू करें और इसे एक नाम दें। टूल एक exported function देता है जो आपका JSX लौटाता है, कई top-level element को एक fragment में लपेटते हुए ताकि एक अकेला root element हो।

क्या यह onclick और अन्य inline event handler को बदलेगा?

inline event attribute को camelCase किया जाता है — onclick को onClick, onchange को onChange — पर मान एक string ही रहता है। आपको अपने component में string को एक असली handler function से बदलना होगा।

HTML to JSX कन्वर्टर

HTML को मान्य React JSX में बदलें, आपके ब्राउज़र में — class बनता है className, void tag self-close होते हैं, और inline style, style object बन जाते हैं। आपका markup आपके डिवाइस पर ही रहता है।

HTML to JSX कन्वर्टर पूरी तरह आपके ब्राउज़र में चलता है। आपके द्वारा पेस्ट किया गया markup आपके डिवाइस पर parse और रूपांतरित होता है और कभी ArrayKit पर अपलोड नहीं होता।

HTML Formatter खोलें

HTML to JSX कन्वर्टर के बारे में

HTML to JSX कन्वर्टर HTML के एक ब्लॉक को ऐसे JSX में बदलता है जिसे आप सीधे एक React component में डाल सकते हैं। यह उन attribute का नाम बदलता है जिन पर React ज़ोर देता है — class बनता है className और for बनता है htmlFor — बाक़ी को camelCase करता है (tabindex → tabIndex, colspan → colSpan), और br, img और input जैसे void element को self-close करता है ताकि markup मान्य हो। inline style="color:red" स्ट्रिंग camelCase property वाले style={{ color: 'red' }} object में parse होती हैं, और HTML comment, JSX comment बन जाते हैं। सब कुछ एक exported function में लपेटने के लिए component विकल्प चालू करें। यह किसी design, एक email template, या एक static पेज को React में पोर्ट करने वाले डेवलपर्स के लिए बना है। हर रूपांतरण आपके ब्राउज़र में चलता है — आपके द्वारा पेस्ट किया गया markup कभी आपके डिवाइस से बाहर नहीं जाता।

विशेषताएँ

class का नाम अपने-आप className और for का htmlFor कर देता है
br, img, input और hr जैसे void element को self-close करता है
inline style स्ट्रिंग को camelCase किए गए style object में बदलता है
ज्ञात attribute को camelCase करता है: tabindex को tabIndex, colspan को colSpan
HTML comment को JSX comment सिंटैक्स में फिर से लिखता है
data-* और aria-* attribute तथा boolean prop को यथावत रखता है
वैकल्पिक रूप से परिणाम को एक exported React function component में लपेटता है
JSX कॉपी करें या इसे एक .jsx फ़ाइल के रूप में डाउनलोड करें, सब आपके ब्राउज़र में

HTML to JSX कन्वर्टर का उपयोग कैसे करें

अपना HTML बाईं ओर के इनपुट बॉक्स में पेस्ट करें
दाईं ओर के आउटपुट पैनल में बदला हुआ JSX पढ़ें
एक तैयार-उपयोग component पाने के लिए 'Wrap in component' टॉगल करें और इसे नाम दें
JSX कॉपी करें या इसे एक .jsx फ़ाइल के रूप में डाउनलोड करें

उदाहरण

इनपुट

<label for="name" class="lbl" tabindex="0">Name</label>
<input type="text" required>

आउटपुट

<label htmlFor="name" className="lbl" tabIndex="0">Name</label>
<input type="text" required />

for बनता है htmlFor, class बनता है className, tabindex बनता है tabIndex, और void <input> self-close होता है।

सामान्य त्रुटियाँ और समस्या निवारण

React चेतावनी देता है कि 'class' एक अमान्य DOM property या attribute है। — HTML को कन्वर्टर से चलाएँ — यह हर class का नाम className (और for का htmlFor) कर देता है ताकि चेतावनी गायब हो जाए।
JSX <img> या <br> पर 'Expected corresponding closing tag' के साथ compile होने में विफल होता है। — JSX में void element self-close होने चाहिए। कन्वर्टर <img … /> और <br /> आउटपुट करता है ताकि tag साफ़ ढंग से parse हों।
style attribute 'style prop expects a mapping, not a string' के साथ त्रुटि देता है। — React style object होते हैं, string नहीं। HTML पेस्ट करें और टूल style="color:red" को style={{ color: 'red' }} में बदल देता है।
टेक्स्ट में एक literal curly brace या एक कच्चा < JSX को तोड़ देता है। — कन्वर्टर text node के भीतर { } और < > को escape करता है ({ और < के रूप में), इसलिए वे वर्ण JSX के रूप में पढ़े जाने के बजाय टेक्स्ट के रूप में render होते हैं।

अक्सर पूछे जाने वाले प्रश्न

कौन-से HTML attribute का नाम बदलकर JSX किया जाता है?: class बनता है className और for बनता है htmlFor। कई सभी-lowercase attribute को camelCase किया जाता है — tabindex को tabIndex, colspan को colSpan, maxlength को maxLength, readonly को readOnly — जबकि data-* और aria-* attribute ठीक वैसे ही रखे जाते हैं जैसे लिखे हैं।
यह एक inline style attribute को कैसे बदलता है?: एक style="color: red; font-size: 12px" स्ट्रिंग एक React style object, style={{ color: 'red', fontSize: '12px' }}, में parse होती है, हर CSS property camelCase के साथ। --brand जैसी CSS custom property और vendor prefix संरक्षित रहते हैं।
क्या यह <br> और <img> जैसे void element को self-close करता है?: हाँ। HTML void element — br, img, input, hr, meta, link, source, और बाक़ी — self-close किए हुए (<br />, <img … />) आउटपुट होते हैं ताकि JSX मान्य हो। खाली non-void element भी self-close किए जाते हैं।
रूपांतरण के दौरान HTML comment का क्या होता है?: HTML comment को JSX comment सिंटैक्स में फिर से लिखा जाता है। यदि comment टेक्स्ट में एक star-slash क्रम हो तो उसे तोड़ दिया जाता है ताकि यह JSX comment को जल्दी बंद न कर सके और आपका build न तोड़ सके।
क्या यह आउटपुट को एक React component में लपेट सकता है?: 'Wrap in component' चालू करें और इसे एक नाम दें। टूल एक exported function देता है जो आपका JSX लौटाता है, कई top-level element को एक fragment में लपेटते हुए ताकि एक अकेला root element हो।
क्या यह onclick और अन्य inline event handler को बदलेगा?: inline event attribute को camelCase किया जाता है — onclick को onClick, onchange को onChange — पर मान एक string ही रहता है। आपको अपने component में string को एक असली handler function से बदलना होगा।