विज्ञापन
सभी tools निःशुल्क

HTML पेस्ट करें और साफ React JSX पाएँ — class, className बन जाता है, एट्रिब्यूट camelCase हो जाते हैं, style स्ट्रिंग ऑब्जेक्ट बन जाती हैं और टैग स्वयं-बंद हो जाते हैं। सब कुछ आपके ब्राउज़र में चलता है। मुफ्त।

सब कुछ आपके ब्राउज़र में चलता है — आपका मार्कअप कभी आपके डिवाइस से बाहर नहीं जाता।

snippet.html
1
Component.jsx

							
{ } आपका JSX यहाँ दिखाई देगा

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

HTML to JSX Converter सादा HTML markup को वास्तविक समय में React-तैयार JSX में बदलता है। यह class को className और for को htmlFor में फिर से लिखता है, kebab-case और SVG attributes को camelCase करता है, inline style strings को JSX style objects में बदलता है, और img व br जैसे void elements को self-close करता है — वे ही सटीक बदलाव जो आप अन्यथा हाथ से करते।

एक snippet, पूरा page section, या किसी design tool से export की गई markup पेस्ट करें, और आपके टाइप करते ही JSX पैनल syntax highlighting के साथ अपडेट होता है। एक वैकल्पिक wrapper आउटपुट को एक named function component में बदल देता है, ताकि परिणाम बिना और edit किए सीधे React project में चला जाए।

यह converter एक पूरी तरह client-side HTML to JSX टूल है: आपकी markup को आपके ब्राउज़र में JavaScript द्वारा बदला जाता है और यह कभी आपकी डिवाइस से बाहर नहीं जाती, जो इसे proprietary templates और internal pages के साथ उपयोग करने के लिए सुरक्षित बनाता है।

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

  1. अपना HTML बाएँ पैनल में पेस्ट करें, या एक उदाहरण लोड करने के लिए Sample पर क्लिक करें।
  2. जैसे ही आप टाइप या edit करते हैं, JSX पैनल को तुरंत अपडेट होते हुए देखें।
  3. यदि आप एक तैयार function component चाहते हैं तो Wrap in a component टॉगल करें और एक component name सेट करें।
  4. JSX पाने के लिए Copy पर क्लिक करें, या Component.jsx के रूप में सहेजने के लिए Download पर।
  5. दोनों पैनलों को रीसेट करने और दूसरा snippet बदलने के लिए Clear का उपयोग करें।

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

यह class को className और for को htmlFor का नाम देता है, dashed attributes (SVG attributes सहित) को camelCase करता है, inline style strings को JSX style objects में बदलता है, और img, br व input जैसे void tags को self-close करता है, ताकि आउटपुट valid JSX हो।

हाँ। Wrap in a component सक्षम करें और एक component name चुनें, और टूल बदली गई markup के चारों ओर एक पूरा function component उत्पन्न करता है, जो आपके project में पेस्ट करने या .jsx फ़ाइल के रूप में डाउनलोड करने के लिए तैयार है।

हाँ। style="margin-top: 10px" जैसा एक style attribute style={{marginTop: '10px'}} जैसे JSX object में बदल जाता है, जहाँ हर CSS property camelCased होती है, vendor-prefixed properties सहित।

नहीं। रूपांतरण पूरी तरह आपके ब्राउज़र में होता है, इसलिए आपकी markup कभी आपकी डिवाइस से बाहर नहीं जाती। आप internal templates और unreleased pages को सुरक्षित रूप से बदल सकते हैं।

हाँ, यह पूरी तरह मुफ़्त है। कोई अकाउंट आवश्यकता नहीं, कोई credit खर्च नहीं और आप कितने भी snippets बदलें, कोई सीमा नहीं।

इसे साझा करें
मदद चाहिए?
इस टूल में कोई समस्या मिली? हमारी टीम को बताएं।
समस्या की रिपोर्ट करें

इस मुफ़्त टूल को अपनी वेबसाइट पर जोड़ें — नीचे दिया गया कोड कॉपी और पेस्ट करें।