डेवलपर / React

HTML से JSX कन्वर्टर

React के लिए HTML को JSX में बदलें: class को className, inline styles को ऑब्जेक्ट, void elements को बंद टैग, braces और comments को escaped रूप में बदलें, और चाहें तो component में लपेटें।

HTML से JSX कन्वर्टर: HTML को elements में parse किया जाता है, इसलिए React के लिए attributes के नाम बदले जाते हैं (class, for, tabindex, readonly, maxlength और अन्य), styles camelCase keys वाले ऑब्जेक्ट बन जाते हैं, और <br> तथा <img> जैसे void elements बंद कर दिए जाते हैं। टेक्स्ट में मौजूद braces और angle brackets को escaped रूप में बदला जाता है, comments {/* */} बन जाते हैं, और form values defaultValue तथा defaultChecked में बदल जाती हैं, ताकि फ़ील्ड editable रहें। टेस्ट पेजों का output TSX के रूप में compile होता है। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

श्रेणी: डेवलपर टूल्स
रन: आपके ब्राउज़र में
लागत: मुफ़्त · साइन अप की ज़रूरत नहीं
उपलब्धता: इस्तेमाल के लिए तैयार

HTML से JSXलोकल प्रोसेसिंग

पूरी तरह आपके ब्राउज़र में चलता है

HTML

<div class="card" style="margin-top: 8px; background-color: #fff">
  <label for="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required>
  <button onclick="send()" tabindex="0">Send</button>
  <!-- footer -->
  <p>Price: {price} &gt; 0</p>
</div>

कंपोनेंट में रैप करें

<button> पर onclick="send()" हटाया गया: इसे किसी फ़ंक्शन के रूप में लिखें, जैसे onClick={() => …}।

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

React के लिए एट्रिब्यूट के नाम बदले जाते हैं (class से className, for से htmlFor, tabindex से tabIndex), स्टाइल ऑब्जेक्ट बन जाती हैं, खाली और void एलिमेंट बंद किए जाते हैं, कमेंट {/* */} में बदल जाते हैं और फ़ॉर्म वैल्यू defaultValue बन जाती हैं, ताकि फ़ील्ड संपादन योग्य रहें।

कन्वर्ट करने के बाद

बार-बार दोहराए जाने वाले markup को props लेने वाले components में बदलें, hard-coded text को braces में variables से बदलें और inline styles को CSS classes या अपने styling system में ले जाएँ, क्योंकि हर render पर style objects दोबारा बनते हैं।

SVG icons के लिए SVG से JSX ऐसा component बनाता है जो props को आगे भेजता है; पहले comments और अतिरिक्त whitespace हटाने के लिए HTML मिनिफ़ायर का उपयोग करें।

वे अंतर जो लोगों को उलझाते हैं

JSX में एक root element होना चाहिए, इसलिए कई elements को fragment (<>…</>) में लपेटा जाता है। हर element बंद होना चाहिए, attribute names camelCase में होते हैं और { या } वाले text को {"{"} के रूप में लिखना पड़ता है, जो कन्वर्टर आपके लिए कर देता है।

इस्तेमाल करने का तरीका

किसी एक element से लेकर पूरे पेज के section तक का HTML पेस्ट करें।
चाहें तो परिणाम को किसी नाम वाले component में लपेटें।
JSX कॉपी करें और warnings में बताए गए inline event handlers को फिर से लिखें।

गोपनीयता और सीमाएँ

HTML आपके ब्राउज़र में बदला जाता है और कभी अपलोड नहीं होता।

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

onclick attributes क्यों हटाए जाते हैं?

HTML में ये code की strings होते हैं, जबकि React में इन्हें functions होना चाहिए। कन्वर्टर हर attribute की सूची देता है, ताकि आप उसे फिर से लिख सकें; उदाहरण के लिए onclick="save()" को onClick={save} में बदलें।

value, defaultValue में क्यों बदल जाता है?

React में value attribute फ़ील्ड को controlled बनाता है, इसलिए onChange handler के बिना उसमें टाइप नहीं किया जा सकता; defaultValue शुरुआती टेक्स्ट सेट करता है और फ़ील्ड को editable रखता है।

क्या यह SVG को संभालता है?

हाँ: stroke-width जैसे SVG attributes strokeWidth में बदल जाते हैं। पूरी SVG फ़ाइल को component में बदलने के लिए SVG से JSX टूल props जोड़ता है।

मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं

JSX

कन्वर्ट करने के बाद

वे अंतर जो लोगों को उलझाते हैं

इस्तेमाल करने का तरीका

गोपनीयता और सीमाएँ

संबंधित टूल्स

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