मुफ़्त HTML से JSX/React कनवर्टर

यह कैसे काम करता है

1. HTML पेस्ट करें: इनपुट क्षेत्र में मानक HTML स्निपेट दर्ज करें, divs, फ़ॉर्म, टेबल या पूर्ण ब्लॉक।
2. विकल्प चुनें: React Fragment रैपिंग और pretty-print फ़ॉर्मेटिंग आवश्यकतानुसार सक्षम करें।
3. JSX तुरंत प्राप्त करें: कन्वर्टर स्वचालित रूप से class → className आदि रूपांतरित करता है।
4. अपने प्रोजेक्ट में कॉपी करें: JSX आउटपुट को सीधे अपने React घटकों में पेस्ट करें।

HTML → JSX क्यों इस्तेमाल करें?

HTML टेम्पलेट को React में माइग्रेट करते समय, मैन्युअल रूपांतरण त्रुटि-प्रवण है। एक className भूलना मूक विफलता पैदा करता है।

मुख्य रूपांतरण

• class → className: React घटकों में आवश्यक
• for → htmlFor: label तत्वों के लिए
• style स्ट्रिंग → ऑब्जेक्ट: जैसे "color:red" → {color:'red'}
• स्वयं-बंद टैग: <br> → <br />
• Fragment रैपिंग: वैकल्पिक बाहरी <>…</>

JSX वास्तव में क्या है

JSX का मतलब «JavaScript XML.» है। यह JavaScript का एक syntactic extension है जिसे Jordan Walke ने Facebook में 2013 में JSConf US में original React announcement के part के रूप में invent किया। JSX आपको JavaScript code के अंदर directly XML-like markup लिखने देता है, <div className="hello">World</div>: और एक transpiler (आज almost always Babel) इसे plain function calls में compile करता है: React.createElement('div', {className: 'hello'}, 'World')। Browser JSX directly नहीं देखता; जो ship होता है वह regular JavaScript है।

Walke की original motivation यह थी कि template languages (Mustache, Handlebars, Angular के पुराने directives) host language के second-class citizens थे, वे natively JavaScript के loops, conditionals या variables use नहीं कर सकते थे, इसलिए हर एक ने अपना reinvent किया। JSX ने relationship invert किया: templates जो occasionally JavaScript करते हैं, उसकी बजाय यह ऐसा JavaScript दिया जो occasionally markup करता है। यह fact कि {condition && <Item />} एक normal JS expression है जो React element return करता है, load-bearing idea है।

React 17 (October 2020) से, automatic JSX runtime का मतलब है अब आपको हर file में import React from 'react' नहीं करना जो JSX use करती है, Babel runtime imports automatically insert करता है। JSX को React से बहुत आगे adopt किया गया है: Preact, Solid, Qwik, Hono JSX, Million, Lit, और TypeScript के .tsx सभी same syntax consume करते हैं। JSX draft spec at facebook.github.io/jsx intentionally framework-agnostic है।

HTML→JSX differences की पूरी list

• Reserved word renames। class → className (क्योंकि class JS में reserved है)। for → htmlFor (same reason, for loop keyword है)। ये दो हैं जिनसे पहले सबको bite होती है।
• All other attributes camelCased होते हैं। tabindex → tabIndex, readonly → readOnly, maxlength → maxLength, contenteditable → contentEditable।
• दो important exceptions kebab-case रहती हैं। aria-* attributes (aria-label, aria-hidden) और data-* attributes (data-testid) अपनी HTML form रखते हैं। Same for xmlns।
• Void elements के लिए Self-closing tags mandatory हैं: <br> becomes <br />, <img> becomes <img />, <input> becomes <input />। HTML forgiving होता है जहाँ JSX XML-strict है।
• Inline styles एक object लेती हैं, string नहीं। style="color: red; background-color: blue" becomes style={{ color: 'red', backgroundColor: 'blue' }}। तीन बातें note करें: double curly braces (एक JSX expression के लिए, एक object literal के लिए), camelCase property names, quoted string values। Numeric pixel values unit omit करते हैं: marginTop: 16, '16px' नहीं।
• Event handlers camelCased होते हैं और function references लेते हैं। onclick="handleClick()" becomes onClick={handleClick}: note करें missing parentheses। onClick={handleClick()} render time पर handleClick को call करेगा और उसकी return value को handler assign करेगा, जो almost always एक bug है।
• Comments {/* … */} use करते हैं JSX के अंदर, <!-- … --> नहीं। HTML comment syntax का JSX के अंदर कोई meaning नहीं है।
• Fragments multiple siblings wrap करते हैं। एक component को single root return करना होता है, इसलिए multiple top-level elements को <>…</> (या longer <React.Fragment>…</React.Fragment>) से wrap करना होता है।
• Conditional rendering JS expressions use करती है। {isVisible && <Item />} item को तभी render करता है जब condition truthy हो; {condition ? <A /> : <B />} दो में से एक pick करता है।
• Text में Curly braces को escape करना होता है। JSX text content के अंदर literal { को expression की start के रूप में interpret किया जाता है। {'{'} या HTML entity equivalent use करें।

SVG, accessibility, और बाकी सब

SVG most attributes के लिए same camelCase rule के साथ JSX के अंदर काम करता है, viewBox, strokeWidth, fillOpacity। Notable exceptions: xlink:href special xlinkHref spelling use करता है (अब plain href के favour में deprecated), और xmlns as is रहता है। Accessibility attributes ARIA के own kebab-case convention follow करते हैं exception के रूप में: aria-label, aria-describedby, role सब as written रहते हैं।

CSS के लिए, JSX का inline style object एक option है। अधिकांश production codebases तीन richer alternatives में से एक use करती हैं: CSS Modules (bundler द्वारा compile किए गए per-file scoped class names), Tailwind CSS (utility classes जो className के माध्यम से cleanly pass through करती हैं), या CSS-in-JS libraries जैसे styled-components, Emotion या Vanilla Extract। Tailwind 2022 से new projects में most common choice बन गया है; Tailwind classes को HTML से JSX move करते समय बिल्कुल conversion नहीं चाहिए, वे ordinary className strings के रूप में pass through होती हैं।

सामान्य conversion समस्याएं

• Inline event handlers जो function call करते हैं। HTML में onclick="alert(1)" generally JSX में onClick={() => alert(1)} बन जाता है, arrow function में wrapped ताकि alert click पर fire हो, render पर नहीं। एक naive converter जो onClick={alert(1)} produce करता है alert को render time पर pop करेगा, user के click पर नहीं। यह converter common cases handle करता है लेकिन output eyeball करने लायक है।
• HTML comments drop हो जाते हैं। अधिकांश JSX converters HTML comments को {/* */} form में translate करने की बजाय strip करते हैं, क्योंकि latter केवल JSX के अंदर specific positions पर काम करता है। Comments manually वहां add करें जहाँ आप चाहते हैं।
• SVG attribute renames automated converters द्वारा always handle नहीं होती। stroke-width, fill-rule, clip-path, text-anchor सब camelCase forms चाहते हैं, output carefully check करें यदि आप Heroicons या Lucide जैसे icon set से SVG paste कर रहे हैं।
• Boolean attributes। HTML में <input disabled> JSX में <input disabled /> बन जाता है। HTML में <input disabled="false"> actually disabled है (कोई भी value इसे enable करती है), लेकिन JSX में disabled={false} correctly off है, JSX semantic HTML से अधिक sensible है।
• HTML entities। © JSX text content में काम करता है लेकिन literal Unicode character (©) use करना preferred है।   भी same काम करता है।
• tabindex case। tabIndex होना चाहिए। आसानी से भूल जाते हैं क्योंकि value अक्सर 0 या -1 होती है और numeric लगती है, लेकिन attribute name को अभी भी camelCase चाहिए।

इसे कब Use करें

• Server-rendered templates को React में migrate करना। किसी existing site के HTML का एक chunk paste करके JSX पाना canonical use case है।
• Icons, badges, या design-tool exports pull करना। Heroicons, Lucide, Figma का «Copy as SVG» सब raw HTML/SVG देते हैं जिसे rename pass चाहिए।
• HTML examples से Tailwind UI / Flowbite / DaisyUI snippets convert करना React project के लिए JSX में। Tailwind classes unchanged pass through होती हैं; केवल structural attributes को conversion चाहिए।
• Developers को onboard करना जो HTML जानते हैं लेकिन JSX नहीं: mechanical rules को automatically applied देखना differences की list पढ़ने से faster है।
• Quick prototyping जब आपने markup plain HTML में sketch करने के लिए draft किया हो और इसे React component के अंदर चाहते हों।

Output किसी भी JSX consumer के लिए काम करता है, React, Preact, Solid, Qwik, Hono JSX, Million, Lit का html template literal (minor adjustments के साथ)। यह React Native के लिए काम नहीं करता, जो HTML elements की बजाय native primitive components जैसे <View> और <Text> use करता है।

More Questions

JSX और HTML में क्या Difference है?

HTML एक markup language है जिसे browser directly parse करता है। JSX एक JavaScript expression syntax है जो React.createElement calls में compile होता है, यह browser तक JSX के रूप में कभी नहीं पहुंचता। JSX XML-strict दिखता है (हर tag close होनी चाहिए, attributes camelCase use करते हैं) क्योंकि यह forgiving HTML के बजाय JavaScript expressions के रूप में parsed होता है। Visual similarity intentional है लेकिन underlying semantics काफी different हैं।

क्या मुझे हर JSX File में React Import करना होगा?

React 17 (October 2020) से नहीं, जिसने automatic JSX runtime introduce किया। इसके साथ, Babel necessary runtime imports inject करता है, इसलिए केवल JSX use करने वाली files को top-of-file import React from 'react' की ज़रूरत नहीं है। Classic runtime पुराने toolchains के लिए अभी भी available है। अधिकांश new projects automatic runtime use करते हैं।

क्या मैं React के बिना JSX Use कर सकता हूं?

हां। JSX एक generic syntax है जिसका facebook.github.io/jsx पर एक draft spec है, और कई frameworks इसे consume करते हैं: Preact, Solid, Qwik, Hono JSX, Million, Lit, और htm tagged-template variant। Frameworks differ करते हैं कि JSX किसमें compile होता है (Preact h(…) use करता है, Solid fine-grained reactive primitives में compile करता है, आदि) लेकिन syntax shared है।

Style object क्यों लेती है, string की बजाय?

क्योंकि JSX expression syntax already JavaScript values embed करने के लिए curly braces provide करता है, और object literal एक property bag की सबसे natural JS representation है। Style object numbers भी allow करता है (अधिकांश automatically px get करते हैं) और JS expressions, जो string नहीं कर सकता। Trade-off slightly awkward double-brace style={{ … }} syntax है, outer braces «this is a JSX expression» के लिए, inner braces object literal के लिए।

क्या कुछ Server को Send होता है?

नहीं। Conversion logic pure JavaScript है जो आपकी HTML string walk करती है और attributes rewrite करती है, सब आपके browser में। आप जो HTML paste करते हैं वह page नहीं छोड़ता, useful है जब proprietary internal templates या component markup migrate कर रहे हों जिनमें API endpoints baked in हों।