HTML zu JSX Konverter

Was ist dieses Tool?

Dieses kostenlose Online-Tool konvertiert standardmäßiges HTML in gültige JSX-Syntax zur Verwendung mit React. Es ist der schnellste Weg, bestehenden HTML-Code in Komponenten für moderne Frontend-Anwendungen umzuwandeln.

Wie man es benutzt

1. Fügen Sie Ihr HTML in den Editor ein oder tippen Sie es ein.
2. Klicken Sie auf Konvertieren, um JSX-Code zu generieren.
3. Laden Sie Ihren konvertierten JSX herunter, kopieren oder teilen Sie ihn sofort.

Melden Sie sich mit Google oder GitHub an, um Ihre Konvertierungen zu speichern und jederzeit darauf zuzugreifen.

Was ist JSX?

JSX (JavaScript XML) ist eine Syntaxerweiterung für JavaScript, die in React verwendet wird, um UI-Komponenten deklarativ zu definieren. JSX ermöglicht es Ihnen, HTML-ähnliche Tags direkt in Ihrem JavaScript-Code zu schreiben.

Im Gegensatz zu traditionellem HTML verwendet JSX spezielle Regeln (wie className anstelle von class) und unterstützt das Einbetten von JavaScript-Ausdrücken in geschweifte Klammern.

Ein einfaches JSX-Beispiel:

const element = (
  <h1 className="greeting">
    Hallo, Welt!
  </h1>
);
    

Erfahren Sie mehr in der offiziellen React-Dokumentation.

HTML vs JSX Beispiel

HTML

<div>
  <div class="awesome" style="border: 1px solid red">
    <label for="name">Geben Sie Ihren Namen ein: </label>
    <input type="text" id="name" />
  </div>
  <p>Geben Sie Ihr HTML hier ein</p>
</div>
    

Konvertiertes JSX

<div>
  <div className="awesome" style={{ border: '1px solid red' }}>
    <label htmlFor="name">Geben Sie Ihren Namen ein: </label>
    <input type="text" id="name" />
  </div>
  <p>Geben Sie Ihr HTML hier ein</p>
</div>