{"id":60933,"date":"2023-04-13T07:32:42","date_gmt":"2023-04-13T06:32:42","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=60933&post_type=knowledgebase&preview_id=60933"},"modified":"2025-10-01T20:16:13","modified_gmt":"2025-10-01T19:16:13","slug":"react-must-be-in-scope-when-using-jsx","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/react-must-be-in-scope-when-using-jsx\/","title":{"rendered":"So behebst du den Fehler „react must be in scope when using jsx“ (5 Methoden)"},"content":{"rendered":"

Die Arbeit mit React<\/a> kann manchmal knifflig sein, besonders wenn es um Fehler geht, die nicht immer leicht zu verstehen sind.<\/p>\n

Ein h\u00e4ufiger Fehler, auf den Entwickler\/innen sto\u00dfen k\u00f6nnen, ist der Fehler „React must be in scope when using JSX“. Dieser Fehler tritt auf, wenn React in einer Komponente, die JSX-Syntax verwendet, nicht richtig importiert oder initialisiert wird.<\/p>\n

In diesem Artikel gehen wir auf die Ursachen dieses Fehlers ein und zeigen L\u00f6sungen auf, wie er behoben werden kann.<\/p>\n

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

Was ist die Ursache f\u00fcr den Fehler „react must be in scope when using jsx“?<\/h2>\n

JSX (JavaScript XML) ist eine Syntaxerweiterung, mit der du HTML<\/a>-\u00e4hnlichen Code in JavaScript<\/a> schreiben kannst. Browser verstehen JSX nicht, aber vorkonfigurierte Toolkits wie Create React App enthalten unter der Haube ein JSX-Transformationswerkzeug, das den JSX-Code in g\u00fcltigen JavaScript-Code umwandelt, der von Browsern interpretiert werden kann.<\/p>\n

In React-Versionen vor 17.0 wurde JSX vom JSX-Transformer zur Kompilierzeit in React.createElement()<\/code> Funktionsaufrufe umgewandelt. Dies erforderte den Import von React, damit die React-Elemente funktionieren. Mit der Einf\u00fchrung einer neuen JSX-Transformation in React v17.0 werden spezielle Funktionen aus den neuen Einstiegspunkten des React-Pakets automatisch importiert, sodass React nicht mehr in jeder Datei, die JSX explizit verwendet, importiert werden muss.<\/p>\n

Schauen wir uns als Beispiel die folgende funktionale Komponente an:<\/p>\n

function App() {\n  return <h1>Welcome to Kinsta!<\/h1>;\n}<\/code><\/pre>\n
Zur Kompilierzeit wird sie in normales JavaScript umgewandelt:<\/p>\n
function App() {\n  return React.createElement('h1', null, 'Welcome to Kinsta!');\n}<\/code><\/pre>\n
Da React undefiniert ist, wird immer die Fehlermeldung „react‘ must be in scope when using jsx“ ausgegeben.<\/p>\n\n
2 Wege zur Behebung des Fehlers „react must be in scope when using jsx“<\/h2>\n
Dieser Fehler kann auf verschiedene Arten behoben werden, je nachdem, welche Version von React du verwendest.<\/p>\n