Zum Inhalt springen
đŸ› ïžToolsShed

HTML to JSX

Konvertiere HTML-Markup zu JSX-Syntax fĂŒr React mit automatischer Umwandlung von Attributen, Inline-Stilen und Void-Elementen.

Angewendete Konvertierungen:

  • class → className
  • for → htmlFor
  • style="..." → style={{...}}
  • Void-Elemente (br, hr, img, input) selbstschließend
  • HTML-Kommentare konvertiert zu {/* */}

Über dieses Tool

HTML to JSX ist ein Konverter, der Standard-HTML-Markup in syntaktisch gĂŒltige JSX-Syntax zur Verwendung in React-Anwendungen umwandelt. Bei der Erstellung von React-Komponenten mĂŒssen Entwickler hĂ€ufig HTML-Snippets in das JSX-Format konvertieren, was das Ändern von Attributnamen (class zu className), die unterschiedliche Behandlung von Inline-Stilen (String zu Objekt) und die Anpassung von void-Elementen erfordert. Dieses Tool automatisiert diese Transformationen, spart Zeit und reduziert Fehler bei der manuellen Konvertierung.

Um das Tool zu verwenden, fĂŒgen Sie Ihren HTML-Code in das Eingabefeld ein und klicken Sie auf "Konvertieren". Der Konverter erzeugt sofort eine gĂŒltige JSX-Ausgabe, die Sie direkt in Ihre React-Komponenten kopieren können. Er behandelt hĂ€ufige Konvertierungen wie HTML-Ereignishandler (onclick zu onClick), boolesche Attribute (checked, disabled), Datenattribute und CSS-Klassennamen. Typische AnwendungsfĂ€lle sind die Migration vorhandener HTML-Vorlagen zu React, die Integration von HTML-Snippets von Drittanbietern oder die schnelle Erstellung von Komponenten-JSX aus Mockups.

Der Konverter funktioniert vollstĂ€ndig in Ihrem Browser ohne Server-Upload, sodass Ihr Code privat bleibt. Beachten Sie, dass komplexe dynamische Vorlagen oder bedingte Rendering-Logik möglicherweise nach der Konvertierung immer noch manuelle Anpassungen erfordern. FĂŒr Komponenten mit komplexer Zustandsverwaltung oder benutzerdefinierten Logik dient das generierte JSX als solider Ausgangspunkt, den Sie weiter verfeinern können.

HĂ€ufig gestellte Fragen

Code-Implementierung

import re

def html_to_jsx(html: str) -> str:
    jsx = html
    # class -> className
    jsx = re.sub(r'\bclass=', 'className=', jsx)
    # for -> htmlFor
    jsx = re.sub(r'\bfor=', 'htmlFor=', jsx)
    # HTML comments to JSX
    jsx = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', jsx, flags=re.DOTALL)
    # Self-close void elements
    void_elements = ['area','base','br','col','embed','hr','img','input',
                     'link','meta','param','source','track','wbr']
    for tag in void_elements:
        jsx = re.sub(
            rf'<{tag}(\s[^>]*)?>',
            lambda m: m.group(0)[:-1] + ' />' if not m.group(0).endswith('/>') else m.group(0),
            jsx, flags=re.IGNORECASE
        )
    return jsx

html = '<div class="container"><br><img src="x.png" alt=""></div>'
print(html_to_jsx(html))
# <div className="container"><br /><img src="x.png" alt="" /></div>

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.