Warum JSX sich von HTML unterscheidet
JSX ist eine Syntaxerweiterung für JavaScript, die wie HTML aussieht, aber den JavaScript-Namenskonventionen folgt. Da class und for reservierte Wörter in JavaScript sind, verwendet React stattdessen className und htmlFor. Inline-Styles müssen JavaScript-Objekte mit camelCase-Eigenschaften sein statt CSS-Strings. Das Verständnis dieser Unterschiede ist wesentlich für das Schreiben korrekter React-Komponenten.
Wichtige Attributtransformationen
Die häufigsten Transformationen umfassen class zu className, for zu htmlFor, tabindex zu tabIndex und onclick zu onClick. Inline-Styles wechseln von Strings zu Objekten, bei denen Eigenschaftsnamen camelCase verwenden: background-color wird zu backgroundColor. Boolesche Attribute wie disabled und checked funktionieren ohne explizite Werte in JSX und entsprechen ihrem HTML-Verhalten bei Einhaltung der JSX-Syntaxregeln.
Selbstschließende Tags in JSX
HTML erlaubt leere Elemente wie img, br und input ohne schließende Tags oder abschließende Schrägstriche. JSX erfordert, dass alle Elemente explizit geschlossen werden; leere Elemente müssen die selbstschließende Syntax mit einem abschließenden Schrägstrich verwenden wie <img /> und <br />. Diese strenge Anforderung stellt sicher, dass der JSX-Parser den Komponentenbaum korrekt aufbauen kann, ohne Mehrdeutigkeit bei den Elementgrenzen.
Best Practices nach der Konvertierung
Nach der Konvertierung von HTML zu JSX überprüfen Sie die Ausgabe auf hartcodierte Werte, die zu Props oder State-Variablen werden sollten. Extrahieren Sie wiederholte JSX-Muster in wiederverwendbare Komponenten. Ersetzen Sie statische Klassennamen durch dynamische Ausdrücke mit Template-Literals oder Bibliotheken wie clsx. Konvertieren Sie Inline-Styles zu CSS-Modulen oder Styled Components für bessere Wartbarkeit in Produktions-React-Anwendungen.
