Was ist JSX?
JSX ist ein spezieller Syntax, der das Mischen von HTML und JavaScript in der selben Datei erleichtert. Es ist also eine “Template-Sprache”, die das Einsetzen von Werten in eine HTML-Struktur erleichtert, und Dinge wie Schleifen und Weichen beim Erzeugen HTML ermöglicht.
Dateien mit JSX-Code können die Endung jsx oder einfach nur js haben, jsx ist aber sinnvoll, um zu signalisieren, dass der Code kein reines JavaScript ist. JSX kann nicht direkt im Browser bzw. mit Node verarbeitet werden, der Code muss deshalb zu JavaScript kompiliert werden.
Mit Babel oder andern Build-Tools, z.B. kann der TypeScript-Compiler auch JSX verarbeiten werden.
Einführung in JSX
https://de.reactjs.org/docs/introducing-jsx.html
Details und technische Hintergründe
https://de.reactjs.org/docs/jsx-in-depth.html
Die wichtigsten Tipps und Fallen mit JSX (en)
Tipps und Fallen für konditionales rendern (en)
https://thoughtspile.github.io/2022/01/17/jsx-conditionals/
Offizielle Dokumentation (en)
https://facebook.github.io/jsx/
JSX ab React 17 – ohne importieren von React in jeder Datei (en)
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html