HTML in JSX umwandeln (React)

So funktioniert es

Wer fertiges HTML in ein React-Projekt übernimmt, muss jedes class in className und jedes for in htmlFor ändern und style-Zeichenketten in Objekte umschreiben; wird eine Stelle vergessen, meldet die Konsole Warnungen. Fügen Sie das HTML links ein, rechts entsteht das JSX. Aus <p style="color: #7a3; font-size: 14px"> wird zum Beispiel <p style={{ color: '#7a3', fontSize: '14px' }}>, und <br> schließt sich als <br /> selbst. Namen mit Bindestrich wie stroke-width in SVG werden zu strokeWidth; Namen mit data- oder aria- bleiben unverändert, weil React sie so erwartet. Event-Attribute wie onclick werden zu onClick, ihr Code wird in eine Funktion verpackt. Die Ergebniszeile nennt die Zahl der verarbeiteten Tags und der geänderten Attributnamen.

Dieses Werkzeug ist auch als html in jsx umwandeln, html zu jsx konverter, html to jsx, html in react umwandeln, html to react bekannt.

Was ist JSX?

JSX ist eine JavaScript-Erweiterung, mit der React-Komponenten ihre Oberfläche in einer HTML-ähnlichen Schreibweise beschreiben. Browser lesen JSX nicht direkt; Babel oder der TypeScript-Compiler übersetzen es in Aufrufe von React.createElement. Es sieht aus wie HTML, folgt aber den Regeln von JavaScript: Attributnamen sind DOM-Eigenschaftsnamen, jedes Tag muss geschlossen werden.

Was ist className und htmlFor?

class und for sind in JavaScript reservierte Wörter: Das eine deklariert eine Klasse, das andere beginnt eine Schleife. Da JSX JavaScript ist, verlangt React diese beiden Attribute unter ihren DOM-Eigenschaftsnamen className und htmlFor. Bleibt class im eingefügten Code stehen, warnt React ab Version 17 und übernimmt es trotzdem; ältere Versionen und manche Werkzeuge verlieren die Klasse stillschweigend.

Was ist der Unterschied zwischen HTML und JSX?

HTML ist eine Auszeichnungssprache, die Browser nachsichtig lesen: Sie ergänzen fehlende schließende Tags und ignorieren Groß- und Kleinschreibung in Attributnamen. JSX ist eine Syntax innerhalb von JavaScript und läuft durch einen Compiler: Jedes Tag muss geschlossen werden, Attributnamen stehen in camelCase, style ist ein Objekt statt einer Zeichenkette, und in geschweiften Klammern läuft JavaScript. Beides sieht ähnlich aus, doch in JSX gelten die Regeln von JavaScript.

Welche Umwandlungen werden vorgenommen?

Die Liste fasst die Regeln des Werkzeugs zusammen. Sie folgen den DOM-Attributnamen von React; ein Attribut, das hier fehlt, wird unverändert übernommen.

• class → className, for → htmlFor
• tabindex, readonly, maxlength, colspan in camelCase: tabIndex, readOnly
• style="a-b: c" → style={{ aB: 'c' }}; eine -webkit-Eigenschaft wird zu WebkitX
• Leere Tags wie br, img, input, hr und Elemente ohne Inhalt schließen sich selbst
• Kommentare werden zu {/* … */}; der Doctype entfällt
• { } und > im Text führen in JSX zu Fehlern und werden maskiert
• Leerzeichen und Zeilenumbrüche in pre bleiben als Zeichenkette erhalten

Formularfelder und Events

In React macht ein value-Attribut ein Eingabefeld schreibgeschützt: Niemand kann tippen, und die Konsole warnt. Deshalb wird value bei input und select zu defaultValue und checked zu defaultChecked; der Text in einer textarea wird ebenfalls zu defaultValue. Wenn Sie das Feld über den State steuern, stellen Sie später auf value mit onChange um.

In HTML ist onclick="senden()" eine Zeichenkette, React erwartet eine Funktion. Das Werkzeug verpackt den Code in eine Pfeilfunktion: onClick={(event) => { senden(); }}. Darin zeigt this nicht mehr auf das Element; nutzen Sie stattdessen event.currentTarget.

Häufige Fragen

Warum beginnt die Ausgabe manchmal mit <>?

Eine React-Komponente muss genau ein Wurzelelement zurückgeben. Wählen Sie die Komponentenausgabe und hat Ihr HTML mehrere Elemente auf oberster Ebene, umschließt das Werkzeug sie mit <> … </>, einem React-Fragment. Ein Fragment fügt der Seite kein zusätzliches Tag hinzu.

Warum wurden { } in meinem Text zu {'{'}?

In JSX beginnt eine geschweifte Klammer einen JavaScript-Ausdruck; eine einfache Klammer im Text wäre ein Übersetzungsfehler. Das Werkzeug schreibt sie als Zeichenkette, auf der Seite erscheinen weiterhin { und }. Aus demselben Grund wird > zu &gt;.

Funktioniert das Ergebnis auch in TypeScript (TSX)?

Ja. Das erzeugte JSX ist auch in einer TSX-Datei gültig. Je nach tsconfig müssen Sie dem Parameter event in den Event-Handlern einen Typ geben.

Wird mein Code hochgeladen?

Nein. HTML-Parser und JSX-Ausgabe laufen in Ihrem Browser; der eingefügte Code bleibt auf dieser Seite.