{"id":62019,"date":"2023-05-24T11:45:22","date_gmt":"2023-05-24T10:45:22","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=62019&post_type=knowledgebase&preview_id=62019"},"modified":"2025-10-01T20:15:52","modified_gmt":"2025-10-01T19:15:52","slug":"was-ist-jsx","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/","title":{"rendered":"Der unkomplizierte Leitfaden zur JSX-Syntax"},"content":{"rendered":"

Traditionell haben Entwickler<\/a> Markup und Logik in separaten Dateien getrennt. Sie haben HTML<\/a> f\u00fcr die Struktur und CSS<\/a> f\u00fcr das Styling verwendet und dann JavaScript<\/a> f\u00fcr die Interaktionen und die Datenmanipulation geschrieben.<\/p>\n

Aber was w\u00e4re, wenn es eine M\u00f6glichkeit g\u00e4be, diese Technologien zu kombinieren, um den Entwicklungsprozess zu vereinfachen und die Erstellung komplexer Benutzeroberfl\u00e4chen zu erleichtern? An dieser Stelle kommt JSX ins Spiel.<\/p>\n

In diesem Artikel erf\u00e4hrst du, was JSX ist, wie es funktioniert und warum es f\u00fcr die Erstellung dynamischer Benutzeroberfl\u00e4chen in der Webentwicklung<\/a> wichtig ist.<\/p>\n

Lass uns diese revolution\u00e4re Technologie genauer unter die Lupe nehmen.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was ist JSX?<\/h2>\n

JSX (JavaScript XML<\/a>) ist eine Syntaxerweiterung f\u00fcr JavaScript, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnlichen Code innerhalb einer JavaScript-Datei zu schreiben. Sie wurde von Meta (fr\u00fcher Facebook) entwickelt.<\/p>\n

Die Syntax von JSX \u00e4hnelt HTML, mit \u00f6ffnenden und schlie\u00dfenden Tags, Attributen und verschachtelten Elementen.<\/p>\n

Du k\u00f6nntest zum Beispiel den folgenden JSX-Code schreiben, um ein einfaches \u00dcberschriftenelement darzustellen:<\/p>\n

const heading = <h1>Hello, JSX!<\/h1>;<\/code><\/pre>\n
Dieser Code sieht aus wie HTML, aber er ist JavaScript<\/a>. Das Schl\u00fcsselwort const erstellt eine neue Variable namens heading, deren Wert das Ergebnis des JSX-Ausdrucks ist.<\/p>\n\n
Wie funktioniert JSX?<\/h2>\n
JSX wird in normales JavaScript umgewandelt, bevor es im Browser<\/a> ausgef\u00fchrt wird. Diese Umwandlung erfolgt mit einem Tool, das Transpiler genannt wird. Der beliebteste Transpiler f\u00fcr JSX ist Babel.<\/p>\n
Babel wandelt den JSX-Code in eine Reihe von Funktionsaufrufen um. Diese Funktionsaufrufe entsprechen dem HTML-\u00e4hnlichen Code, der in JSX geschrieben wurde. Der Browser kann dann den resultierenden JavaScript-Code ausf\u00fchren.<\/p>\n
Zum Beispiel der folgende JSX-Code:<\/p>\n
const element = <h1>Hello, world!<\/h1>;<\/code><\/pre>\n
wird in den folgenden JavaScript-Code umgewandelt:<\/p>\n
const element = React.createElement(\"h1\", null, \"Hello, world!\");<\/code><\/pre>\n
Diese Umwandlung erm\u00f6glicht es Entwicklern, Code in einer Syntax zu schreiben, die vertraut und leicht zu lesen ist, und gleichzeitig die Leistungsf\u00e4higkeit und Flexibilit\u00e4t von JavaScript zu nutzen.<\/p>\n
JSX und React<\/h2>\n
JSX ist ein integraler Bestandteil von React<\/a> und erm\u00f6glicht es Entwicklern, das Markup und die Logik f\u00fcr diese Komponenten in einer einzigen Datei zu schreiben.<\/p>\n
Hier ist ein einfaches Beispiel f\u00fcr JSX-Code in einer React-Komponente<\/a>:<\/p>\n
import React from 'react';\n\nfunction Greet() {\n  return <h1>Hello World!<\/h1>;\n}\n\nexport default Greeting;<\/code><\/pre>\n
In diesem Beispiel hast du eine funktionale Komponente namens Greet<\/code>, die ein h1<\/code> Element mit einer Begr\u00fc\u00dfungsnachricht darstellt.<\/p>\n
Der React-Compiler wandelt diesen Code in optimierten JavaScript-Code um, der vom Browser ausgef\u00fchrt werden kann, damit die Komponente auf dem Bildschirm dargestellt werden kann.<\/p>\n
So w\u00fcrde der React-Compiler die Komponente Greet<\/code> umwandeln:<\/p>\n
import React from 'react'\n\nfunction Greet() {\n  return React.createElement(\"h1\", {}, \"Hello, World!\")\n}<\/code><\/pre>\n
In diesem Code wurde der JSX-Code in einen React.createElement<\/code> -Aufruf umgewandelt, der die gleiche Struktur und den gleichen Inhalt wie der urspr\u00fcngliche JSX-Code erzeugt.<\/p>\n
Das passiert hinter den Kulissen, wenn React JSX-Code kompiliert, damit er vom Browser ausgef\u00fchrt werden kann. Allerdings kann der umgewandelte Code weniger gut lesbar sein als der urspr\u00fcngliche JSX-Code.<\/p>\n
In React Version 17 wurde eine neue JSX-Transformationsfunktion<\/a> eingef\u00fchrt, die automatisch spezielle Funktionen aus den neuen Einstiegspunkten des React-Pakets importiert und es Entwicklern erm\u00f6glicht, JSX zu verwenden, ohne React am Anfang ihrer Dateien importieren zu m\u00fcssen.<\/p>\n
\/\/ Inserted by a compiler (don't import it yourself!)\nimport {jsx as _jsx} from 'react\/jsx-runtime';\n\nfunction App() {\n  return _jsx('h1', { children: 'Hello world' });\n}<\/code><\/pre>\n
Verwendung von JavaScript-Ausdr\u00fccken mit JSX<\/h3>\n
In JSX k\u00f6nnen JavaScript-Ausdr\u00fccke direkt in das Markup eingebettet werden, um Inhalte dynamisch zu generieren. So k\u00f6nnen Entwickler\/innen JavaScript-Code verwenden, um Werte zu berechnen, Operationen durchzuf\u00fchren und Inhalte in ihren JSX-Komponenten bedingt darzustellen.<\/p>\n
Dieses Beispiel zeigt, wie man zwei JavaScript-Ausdr\u00fccke in JSX verwendet:<\/p>\n
import React from 'react';\n\nconst MyComponent = () => {\n  const name = 'John';\n  const age = 30;\n\n  return (\n    <div>\n      <h1>Hello, {name}!<\/h1>\n      <p>You are {age} years old.<\/p>\n      <p>Next year, you will be {age + 1} years old.<\/p>\n      {age >= 18 && <p>You are an adult.<\/p>}\n    <\/div>\n  );\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In diesem Beispiel werden JavaScript-Ausdr\u00fccke wie {name}<\/code>, {age}<\/code>, {age + 1}<\/code> und {age >= 18 && <p>You are an adult.<\/p>}<\/code> verwendet, um Inhalte basierend auf den Werten der Variablen Name und Alter dynamisch darzustellen.<\/p>\n
Verwendung von CSS mit JSX<\/h3>\n
CSS kann auf verschiedene Arten auf JSX-Komponenten angewendet werden, z. B. als Inline-Stile, separate CSS-Dateien oder CSS-in-JS-Bibliotheken. Inline-Stile werden direkt im JSX-Markup mithilfe von JavaScript-Objekten definiert, w\u00e4hrend separate CSS-Dateien oder CSS-in-JS-Bibliotheken ein externes und modulares Styling von Komponenten erm\u00f6glichen.<\/p>\n
In diesem Beispiel wird gezeigt, wie man Inline-Stile, die mit einem JavaScript-Objekt definiert wurden, mit dem Attribut style in JSX auf Elemente anwendet:<\/p>\n
import React from 'react';\n\nconst MyComponent = () => {\n  const styles = {\n    backgroundColor: 'blue',\n    color: 'white',\n    padding: '10px'\n  };\n\n  return (\n    <div style={styles}>\n      <h1>Hello, World!<\/h1>\n      <p>This is a component with inline styles.<\/p>\n    <\/div>\n  );\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In diesem Beispiel werden CSS-Eigenschaften wie backgroundColor<\/code>, color<\/code> und padding als Schl\u00fcssel-Wert-Paare im styles-Objekt festgelegt, und ihre Werte sind Strings, die die CSS-Werte darstellen.<\/p>\n
Hinweis:<\/strong> Inline-Stile bieten zwar Flexibilit\u00e4t und Einfachheit, aber f\u00fcr komplexere oder wiederverwendbare Stile in gr\u00f6\u00dferen Anwendungen empfiehlt es sich, CSS-Klassen oder CSS-in-JS-Bibliotheken zu verwenden.<\/p>\n
6 Wichtige JSX-Regeln<\/h2>\n
Wenn du JSX-Code schreibst, solltest du bestimmte Regeln befolgen, um sicherzustellen, dass der Code g\u00fcltig und leicht zu lesen ist.<\/p>\n
1. Gib immer ein einzelnes Wurzelelement zur\u00fcck<\/h3>\n
In JSX musst du immer ein einzelnes Root-Element zur\u00fcckgeben. Das bedeutet, dass dein gesamter JSX-Code in einem einzigen, \u00e4u\u00dfersten Element enthalten sein muss. Das ist zum Beispiel ein g\u00fcltiges JSX:<\/p>\n
return (\n  <div>\n    <h1>Hello World!<\/h1>\n    <p>This is my first React component.<\/p>\n  <\/div>\n)<\/code><\/pre>\n
Das ist es aber nicht, weil es zwei Elemente statt einem zur\u00fcckgibt:<\/p>\n
return (\n  <h1>Hello World!<\/h1>\n  <p>This is my first React component.<\/p>\n)<\/code><\/pre>\n
Das ist wichtig zu beachten, wenn du HTML-Code in JSX umwandelst.<\/p>\n
2. ClassName statt Class verwenden<\/h3>\n
In HTML w\u00fcrdest du das Attribut class<\/code> verwenden, um eine CSS-Klasse f\u00fcr ein Element anzugeben. In JSX musst du jedoch stattdessen das Attribut className<\/code> verwenden. Zum Beispiel:<\/p>\n
\/\/ Good\n<div className=\"my-class\">This element has a CSS class.<\/div>\n\n\/\/ Bad\n<div class=\"my-class\">This element has a CSS class.<\/div><\/code><\/pre>\n
Die Verwendung von className<\/code> anstelle von class<\/code> ist wichtig, um Namenskonflikte zu vermeiden, denn class<\/code> ist ein reserviertes Schl\u00fcsselwort in JavaScript.<\/p>\n
3. Geschweifte Klammern f\u00fcr JavaScript-Ausdr\u00fccke verwenden<\/h3>\n
Wenn du einen JavaScript-Ausdruck in deinen JSX-Code einf\u00fcgen willst, musst du ihn in geschweifte Klammern {}<\/strong> einschlie\u00dfen. Dies kann f\u00fcr alles verwendet werden, von der Anzeige dynamischer Daten bis zum bedingten Rendering von Komponenten. Hier ist ein Beispiel:<\/p>\n
\/\/ Good\n<div>{myVariable}<\/div>\n\n\/\/ Bad\n<div>myVariable<\/div><\/code><\/pre>\n
Du kannst innerhalb der geschweiften Klammern auch mathematische Operationen ausf\u00fchren, wie z. B.:<\/p>\n
<p>The total cost is {25*10}<\/p><\/code><\/pre>\n
Au\u00dferdem kannst du innerhalb der geschweiften Klammern mit Hilfe von tern\u00e4ren Operatoren bedingte Anweisungen formulieren:<\/p>\n
<h1>{(x) < 15 ? \"Welcome\" : \"Goodbye\"}<\/h1><\/code><\/pre>\n
Hier ist ein besseres Beispiel mit einer React-Komponente:<\/p>\n
function Greeting() {\n  const isLoggedIn = true;\n\n  return (\n    <div>\n      {isLoggedIn ? (\n        <h1>Welcome back!<\/h1>\n      ) : (\n        <h1>Please log in.<\/h1>\n      )}\n    <\/div>\n  );\n}<\/code><\/pre>\n
In diesem Beispiel definieren wir eine Gru\u00dfkomponente<\/strong>. Die Komponente verwendet den tern\u00e4ren Operator, um abh\u00e4ngig vom Wert von isLoggedIn<\/code> eine Begr\u00fc\u00dfung darzustellen. Wenn isLoggedIn<\/code> gleich true<\/code> ist, stellt die Komponente ein h1<\/code> Element mit dem Text „Welcome back!“ dar. Wenn isLoggedIn<\/code> false<\/code> ist, zeigt die Komponente ein h1<\/code> Element mit dem Text „Bitte loggen Sie sich ein.“ an.<\/p>\n
4. Verwende camelCase f\u00fcr die meisten Dinge in JSX<\/h3>\n
In JSX verwendest du f\u00fcr die meisten Dinge camelCase, auch f\u00fcr Attribute, Event-Handler und Variablennamen. Diese Konvention entspricht den JavaScript-Namenskonventionen und tr\u00e4gt zur besseren Lesbarkeit bei.<\/p>\n
Verwende zum Beispiel code>onClick anstelle von onclick<\/code> und className<\/code> anstelle von class<\/code>.<\/p>\n
\/\/ Good\n<button onClick={handleClick} className=\"btn\">Click me!<\/button>\n\n\/\/ Bad\n<button onclick={handle_click} class=\"btn\">Click me!<\/button><\/code><\/pre>\n
5. Tags immer schlie\u00dfen<\/h3>\n
In JSX musst du deine Tags immer schlie\u00dfen, auch wenn sie keinen Inhalt haben. Zum Beispiel:<\/p>\n
\/\/ Good\n<div><\/div>\n\n\/\/ Bad\n<div\/><\/code><\/pre>\n
6. Selbstschlie\u00dfende Tags f\u00fcr leere Elemente verwenden<\/h3>\n
Wenn du ein Element hast, das keinen Inhalt hat, kannst du ein selbstschlie\u00dfendes Tag anstelle eines \u00f6ffnenden und schlie\u00dfenden Tags verwenden. Zum Beispiel:<\/p>\n
\/\/ Good\n<img src=\"my-image.jpg\" alt=\"My Image\"\/>\n\n\/\/ Bad\n<img src=\"my-image.jpg\" alt=\"My Image\"><\/img><\/code><\/pre>\n
Warum ist JSX wichtig f\u00fcr die Webentwicklung?<\/h2>\n
JSX ist wichtig f\u00fcr die Webentwicklung, weil:<\/p>\n
    \n
  1. Es erm\u00f6glicht Entwicklern, Benutzeroberfl\u00e4chen auf eine intuitivere und vertrautere Weise zu erstellen.<\/li>\n<\/ol>\n
      \n
    1. Anstatt das DOM direkt zu manipulieren, k\u00f6nnen Entwickler JSX verwenden, um die Struktur ihrer Benutzeroberfl\u00e4che auf eine Weise zu beschreiben, die dem Schreiben von HTML \u00e4hnlicher ist.<\/li>\n<\/ol>\n
        \n
      1. Das erm\u00f6glicht eine effizientere und flexiblere Entwicklung. Da JSX nur JavaScript ist, k\u00f6nnen Entwickler alle Funktionen von JavaScript nutzen, um komplexere und dynamischere Benutzeroberfl\u00e4chen zu erstellen.<\/li>\n<\/ol>\n
          \n
        1. JSX ist ein wichtiger Bestandteil der React-Bibliothek<\/a>, die eine der beliebtesten Optionen f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen in der modernen Webentwicklung ist. Wenn du React nutzen willst, musst du JSX lernen.<\/li>\n<\/ol>\n\n
          Zusammenfassung<\/h2>\n
          JSX ist eine Syntaxerweiterung f\u00fcr JavaScript, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnliches Markup innerhalb einer JavaScript-Datei zu schreiben. Das macht es einfacher, dynamische und interaktive Benutzeroberfl\u00e4chen f\u00fcr Webanwendungen zu erstellen.<\/p>\n
          Du hast einige Regeln gelernt, die du bei der Verwendung von JSX beachten solltest. Wenn du diese Regeln befolgst, kannst du sauberen, lesbaren und wartbaren Code schreiben, der mit den JavaScript-Namenskonventionen \u00fcbereinstimmt.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Traditionell haben Entwickler Markup und Logik in separaten Dateien getrennt. Sie haben HTML f\u00fcr die Struktur und CSS f\u00fcr das Styling verwendet und dann JavaScript f\u00fcr …<\/p>\n","protected":false},"author":287,"featured_media":62020,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[951,991],"class_list":["post-62019","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-frameworks","topic-web-entwicklungs-tools"],"yoast_head":"\nDer unkomplizierte Leitfaden zur JSX-Syntax - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Erfahre alles \u00fcber JSX (JavaScript XML), eine Syntaxerweiterung f\u00fcr JavaScript, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnlichen Code innerhalb einer JavaScript-Datei zu schreiben.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Der unkomplizierte Leitfaden zur JSX-Syntax\" \/>\n<meta property=\"og:description\" content=\"Erfahre alles \u00fcber JSX (JavaScript XML), eine Syntaxerweiterung f\u00fcr JavaScript, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnlichen Code innerhalb einer JavaScript-Datei zu schreiben.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-24T10:45:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:15:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Erfahre alles \u00fcber JSX (JavaScript XML), eine Syntaxerweiterung f\u00fcr JavaScript, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnlichen Code innerhalb einer JavaScript-Datei zu schreiben.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Der unkomplizierte Leitfaden zur JSX-Syntax\",\"datePublished\":\"2023-05-24T10:45:22+00:00\",\"dateModified\":\"2025-10-01T19:15:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\"},\"wordCount\":1321,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\",\"name\":\"Der unkomplizierte Leitfaden zur JSX-Syntax - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg\",\"datePublished\":\"2023-05-24T10:45:22+00:00\",\"dateModified\":\"2025-10-01T19:15:52+00:00\",\"description\":\"Erfahre alles \u00fcber JSX (JavaScript XML), eine Syntaxerweiterung f\u00fcr JavaScript, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnlichen Code innerhalb einer JavaScript-Datei zu schreiben.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg\",\"width\":1500,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webentwicklungs-Tools\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/web-entwicklungs-tools\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Der unkomplizierte Leitfaden zur JSX-Syntax\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Der unkomplizierte Leitfaden zur JSX-Syntax - Kinsta\u00ae","description":"Erfahre alles \u00fcber JSX (JavaScript XML), eine Syntaxerweiterung f\u00fcr JavaScript, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnlichen Code innerhalb einer JavaScript-Datei zu schreiben.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/","og_locale":"de_DE","og_type":"article","og_title":"Der unkomplizierte Leitfaden zur JSX-Syntax","og_description":"Erfahre alles \u00fcber JSX (JavaScript XML), eine Syntaxerweiterung f\u00fcr JavaScript, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnlichen Code innerhalb einer JavaScript-Datei zu schreiben.","og_url":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-05-24T10:45:22+00:00","article_modified_time":"2025-10-01T19:15:52+00:00","og_image":[{"width":1500,"height":750,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Erfahre alles \u00fcber JSX (JavaScript XML), eine Syntaxerweiterung f\u00fcr JavaScript, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnlichen Code innerhalb einer JavaScript-Datei zu schreiben.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Der unkomplizierte Leitfaden zur JSX-Syntax","datePublished":"2023-05-24T10:45:22+00:00","dateModified":"2025-10-01T19:15:52+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/"},"wordCount":1321,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/","url":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/","name":"Der unkomplizierte Leitfaden zur JSX-Syntax - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg","datePublished":"2023-05-24T10:45:22+00:00","dateModified":"2025-10-01T19:15:52+00:00","description":"Erfahre alles \u00fcber JSX (JavaScript XML), eine Syntaxerweiterung f\u00fcr JavaScript, die es Entwicklern erm\u00f6glicht, HTML-\u00e4hnlichen Code innerhalb einer JavaScript-Datei zu schreiben.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/what-is-jsx.jpg","width":1500,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Webentwicklungs-Tools","item":"https:\/\/kinsta.com\/de\/thema\/web-entwicklungs-tools\/"},{"@type":"ListItem","position":3,"name":"Der unkomplizierte Leitfaden zur JSX-Syntax"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=62019"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62019\/revisions"}],"predecessor-version":[{"id":62480,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62019\/revisions\/62480"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62019\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62019\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62019\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62019\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62019\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62019\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62019\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62019\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62019\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/62020"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=62019"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=62019"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=62019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}