{"id":70524,"date":"2024-07-05T08:30:10","date_gmt":"2024-07-05T07:30:10","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=70524&#038;preview=true&#038;preview_id=70524"},"modified":"2024-07-11T14:31:18","modified_gmt":"2024-07-11T13:31:18","slug":"react-19-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/","title":{"rendered":"Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer"},"content":{"rendered":"<p>Als <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-entwickler-engagiert\/\">WordPress-Entwickler<\/a> integrieren wir oft benutzerdefinierte <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React-Komponenten<\/a> in unsere <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\">Themes<\/a> und <a href=\"https:\/\/kinsta.com\/de\/thema\/wordpress-plugins\/\">Plugins<\/a>, um dynamische und reaktionsf\u00e4hige Benutzeroberfl\u00e4chen zu schaffen.<\/p>\n<p>Mit der <a href=\"https:\/\/react.dev\/blog\/2024\/04\/25\/react-19\" target=\"_blank\" rel=\"noopener noreferrer\">bevorstehenden Ver\u00f6ffentlichung von React 19<\/a> ist es wichtig, sich auf \u00c4nderungen und Verwerfungen vorzubereiten, die sich auf unsere bestehenden Codebasen auswirken k\u00f6nnten. <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-6\/\">WordPress 6.6<\/a>, das am 16. Juli ver\u00f6ffentlicht wird, enth\u00e4lt React 18.3. Diese Version ist fast identisch mit 18.2, enth\u00e4lt aber zus\u00e4tzlich Warnungen f\u00fcr veraltete Funktionen, um dich auf React 19 vorzubereiten.<\/p>\n<p>Die Ber\u00fccksichtigung dieser veralteten Funktionen ist wichtig, um die Kompatibilit\u00e4t mit React 19 zu gew\u00e4hrleisten. Wenn du sie ignorierst, kann das zu Fehlern oder Problemen in deinen <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-blocke\/\">benutzerdefinierten Bl\u00f6cken<\/a>, Plugins oder <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-react-theme\/\">Themes<\/a> f\u00fchren, wenn React 19 ver\u00f6ffentlicht und in WordPress integriert wird.<\/p>\n<p>In diesem Artikel werden die einzelnen Verwerfungen beschrieben, mit Codebeispielen versehen und es wird erl\u00e4utert, wie du veraltete Funktionen ersetzen kannst, um eine reibungslose Funktionalit\u00e4t zu gew\u00e4hrleisten.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Um dir das Upgrade zu erleichtern, hat das React-Team in Zusammenarbeit mit dem Team von <a href=\"http:\/\/codemod.com\" target=\"_blank\" rel=\"noopener noreferrer\">Codemod<\/a> Codemods ver\u00f6ffentlicht, die deinen Code automatisch auf viele der neuen APIs und Patterns in React 19 aktualisieren.<\/p>\n<p>Alle Codemods sind im <a href=\"https:\/\/github.com\/reactjs\/react-codemod\" target=\"_blank\" rel=\"noopener noreferrer\">react-codemod Repo<\/a> auf GitHub verf\u00fcgbar. Au\u00dferdem f\u00fcgen wir den Codemod-Befehl f\u00fcr jede Verwerfung bei (falls verf\u00fcgbar), damit du deinen Code automatisch aktualisieren kannst.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Remote Verwerfungen in React<\/h2>\n<p>Mehrere veraltete APIs und Funktionen wurden entfernt, um die React-Bibliothek zu vereinfachen und Best Practices zu f\u00f6rdern. In diesem Abschnitt geht es um die wichtigsten \u00c4nderungen und wie du deinen Code entsprechend aktualisieren kannst.<\/p>\n<h3>1. Abschaffung von defaultProps f\u00fcr Funktionskomponenten<\/h3>\n<p>Mit React 19 wird <code>defaultProps<\/code> f\u00fcr Funktionskomponenten zugunsten von <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-react\/\">ES6-Standardparametern<\/a> abgeschafft. Nach Angaben des <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/07\/preparation-for-react-19-upgrade\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-Teams<\/a> wird diese Abschaffung am h\u00e4ufigsten in Plugins und Themes verwendet.<\/p>\n<p>Als WordPress-Entwickler verwendest du vielleicht <code>defaultProps<\/code>, um Standardwerte f\u00fcr Props in deinen Funktionskomponenten bereitzustellen und sicherzustellen, dass sich die Komponenten auch dann korrekt verhalten, wenn bestimmte Props nicht \u00fcbergeben werden.<\/p>\n<p>Hier siehst du, wie dein aktueller Code mit <code>defaultProps<\/code> aussehen k\u00f6nnte:<\/p>\n<pre><code class=\"language-jsx\">function CustomButton({ label, color }) {\n    return &lt;button style={{ backgroundColor: color }}&gt;{ label }&lt;\/button&gt;;\n}\n\nCustomButton.defaultProps = {\n    label: 'Click me',\n    color: 'blue',\n};<\/code><\/pre>\n<p>In diesem Beispiel hat eine <code>CustomButton<\/code> Komponente die Standardwerte <code>label<\/code> und <code>color<\/code>, die von <code>defaultProps<\/code> bereitgestellt werden. In React 19 f\u00fchrt dies zu einer Fehlermeldung, die dich auffordert, stattdessen ES6-Standardparameter zu verwenden.<\/p>\n<p>Hier ist der aktualisierte Code mit ES6-Standardparametern:<\/p>\n<pre><code class=\"language-jsx\">function CustomButton({ label = 'Click me', color = 'blue' }) {\n    return &lt;button style={{ backgroundColor: color }}&gt;{ label }&lt;\/button&gt;;\n}<\/code><\/pre>\n<p>Bei der Verwendung von ES6-Standardparametern stehen die Standardwerte jetzt direkt in der Funktionssignatur, wodurch der Code leichter zu lesen und zu pflegen ist.<\/p>\n<h3>2. Die Entfernung von propTypes f\u00fcr Funktionskomponenten<\/h3>\n<p><code>propTypes<\/code> wurde <a href=\"https:\/\/legacy.reactjs.org\/blog\/2017\/04\/07\/react-v15.5.0.html#new-deprecation-warnings\" target=\"_blank\" rel=\"noopener noreferrer\">in React 15.5.0 veraltet<\/a> und wird in v19 auch vollst\u00e4ndig aus dem React-Paket entfernt. Wenn du <code>propTypes<\/code> verwendest, wird empfohlen, dass du zu <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-typescript\/\">TypeScript<\/a> oder einer anderen L\u00f6sung f\u00fcr die Typ\u00fcberpr\u00fcfung migrierst.<\/p>\n<p>M\u00f6glicherweise hast du <code>propTypes<\/code> verwendet, um die an deine Funktionskomponenten \u00fcbergebenen Props zu validieren und sicherzustellen, dass sie die richtigen Typen und Werte erhalten. Zum Beispiel:<\/p>\n<pre><code class=\"language-jsx\">import PropTypes from 'prop-types';\n\nfunction CustomButton({ label, color }) {\n    return &lt;button style={{ backgroundColor: color }}&gt;{ label }&lt;\/button&gt;;\n}\n\nCustomButton.defaultProps = {\n    label: 'Click me',\n    color: 'blue',\n};\n\nCustomButton.propTypes = {\n    label: PropTypes.string,\n    color: PropTypes.string,\n};<\/code><\/pre>\n<p>Heute kannst du TypeScript f\u00fcr diese Typ\u00fcberpr\u00fcfungen verwenden:<\/p>\n<pre><code class=\"language-jsx\">type CustomButtonProps = {\n    label?: string;\n    color?: string;\n};\n\nconst CustomButton = ({ label = 'Click me', color = 'blue' }: CustomButtonProps) =&gt; {\n    return &lt;button style={{ backgroundColor: color }}&gt;{ label }&lt;\/button&gt;;\n};<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Damit du von <code>propTypes<\/code> auf TypeScript umsteigen kannst, kannst du den folgenden codemod-Befehl verwenden:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/prop-types-typescript<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<h3>3. Beseitigung von Legacy Context (contextTypes und getChildContext)<\/h3>\n<p>Da viele Plugins und Codebases in WordPress schon lange existieren, verwendest du in deinen Klassenkomponenten vielleicht noch die alten APIs <code>contextTypes<\/code> und <code>getChildContext<\/code>. Diese APIs wurden verwendet, um Daten von einer \u00fcbergeordneten Komponente an ihre Nachkommen weiterzugeben, ohne dass auf jeder Ebene explizit Props \u00fcbergeben wurden.<\/p>\n<p>Es ist jedoch wichtig zu wissen, dass Legacy Context <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html\" target=\"_blank\" rel=\"noopener noreferrer\">in React 16.6.0 veraltet<\/a> ist und in React v19 abgeschafft wird. Diese \u00c4nderung soll React etwas kleiner und schneller machen, da die Legacy Context API subtile Bugs hatte, die oft leicht zu \u00fcbersehen waren.<\/p>\n<p>Die Legacy-Methode wurde durch die neue <code>contextType<\/code> API ersetzt.<\/p>\n<p>Hier ist ein Beispiel daf\u00fcr, wie du die veraltete Context-API in einem WordPress-Plugin verwenden kannst, um globale Einstellungen wie den Titel der Website von einer \u00fcbergeordneten Komponente an eine untergeordnete Komponente zu \u00fcbergeben, ohne Prop Drilling:<\/p>\n<pre><code class=\"language-jsx\">import PropTypes from 'prop-types';\n\nclass SettingsProvider extends React.Component {\n  static childContextTypes = {\n    siteTitle: PropTypes.string.isRequired,\n  };\n\n  getChildContext() {\n    return { siteTitle: 'My WordPress Site' };\n  }\n\n  render() {\n    return &lt;SettingsConsumer \/&gt;;\n  }\n}\n\nclass SettingsConsumer extends React.Component {\n  static contextTypes = {\n    siteTitle: PropTypes.string.isRequired,\n  };\n\n  render() {\n    return &lt;div&gt;Site Title: {this.context.siteTitle}&lt;\/div&gt;;\n  }\n}<\/code><\/pre>\n<p>Im Gegensatz dazu verwendet der moderne Ansatz die Methode <code>createContext<\/code>. Diese Methode solltest du \u00fcbernehmen, wenn du dich auf React 19 vorbereitest:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n\nconst SettingsContext = React.createContext();\n\nclass SettingsProvider extends React.Component {\n  render() {\n    return (\n      &lt;SettingsContext value={{ siteTitle: 'My WordPress Site' }}&gt;\n        &lt;SettingsConsumer \/&gt;\n      &lt;\/SettingsContext&gt;\n    );\n  }\n}\n\nclass SettingsConsumer extends React.Component {\n  static contextType = SettingsContext;\n\n  render() {\n    const { siteTitle } = this.context;\n    return &lt;div&gt;Site Title: { siteTitle }&lt;\/div&gt;;\n  }\n}<\/code><\/pre>\n<h3>4. Entfernung von String Refs<\/h3>\n<p>Die Verwendung von String Refs war fr\u00fcher eine g\u00e4ngige Methode, um auf ein DOM-Element in React-Komponenten zuzugreifen. <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/03\/27\/update-on-async-rendering.html\">Seit React 16.3.0 gelten sie jedoch als veraltet<\/a> und werden in Version 19 entfernt.<\/p>\n<p>String-Refs waren zwar einfach, hatten aber <a href=\"https:\/\/github.com\/facebook\/react\/issues\/1373\" target=\"_blank\" rel=\"noopener noreferrer\">einige Probleme<\/a>, wie z. B. m\u00f6gliche Namenskonflikte und mangelnde Flexibilit\u00e4t.<\/p>\n<p>Betrachte ein Beispiel f\u00fcr die Verwendung von String-Refs in einem benutzerdefinierten WordPress-Block. Stell dir vor, du hast einen benutzerdefinierten Gutenberg-Block, der ein Eingabefeld enth\u00e4lt, und du m\u00f6chtest, dass das Eingabefeld automatisch fokussiert wird, wenn der Block dem Editor hinzugef\u00fcgt wird. So h\u00e4ttest du das mit String-Refs machen k\u00f6nnen:<\/p>\n<pre><code class=\"language-jsx\">class CustomBlock extends React.Component {\n  componentDidMount() {\n    this.refs.input.focus();\n  }\n\n  render() {\n    return &lt;input ref=\"input\" placeholder=\"Enter text...\" \/&gt;;\n  }\n}<\/code><\/pre>\n<p>Um dich auf React 19 vorzubereiten, musst du String Refs durch Callbacks <code>refs<\/code> oder die <code>React.createRef<\/code> API ersetzen. Hier ist das gleiche Beispiel mit einem Callback <code>ref<\/code>:<\/p>\n<pre><code class=\"language-jsx\">class CustomBlock extends React.Component {\n  componentDidMount() {\n    this.input.focus();\n  }\n\n  render() {\n    return &lt;input ref={(input) =&gt; (this.input = input)} placeholder=\"Enter text...\" \/&gt;;\n  }\n}<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Um von der Verwendung von String Refs auf Callback <code>ref<\/code> umzusteigen, kannst du den folgenden Codemod-Befehl verwenden:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/19\/replace-string-ref<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<h3>5. Entfernung von Modul-Musterfabriken<\/h3>\n<p>Ein weiteres <a href=\"https:\/\/legacy.reactjs.org\/blog\/2019\/08\/08\/react-v16.9.0.html#deprecating-module-pattern-factories\" target=\"_blank\" rel=\"noopener noreferrer\">veraltetes Feature<\/a>, das in React 19 entfernt wird, sind die Modul-Muster-Fabriken. Dieses Muster wurde nur selten verwendet und f\u00fchrte dazu, dass React etwas gr\u00f6\u00dfer und langsamer war als n\u00f6tig.<\/p>\n<p>Modul-Musterfabriken erm\u00f6glichten es Entwicklern, Komponenten weniger konventionell zu erstellen. Hier ist ein Beispiel daf\u00fcr, wie du es vielleicht verwendest:<\/p>\n<pre><code class=\"language-jsx\">function SettingsPanelFactory() {\n  return {\n    render() {\n      return (\n        &lt;div className=\"settings-panel\"&gt;\n          &lt;h2&gt;Settings&lt;\/h2&gt;\n          {\/* other settings UI components *\/}\n        &lt;\/div&gt;\n      );\n    }\n  };\n}<\/code><\/pre>\n<p>Bei diesem Muster gibt <code>SettingsPanelFactory<\/code> ein Objekt mit einer <code>render<\/code> Methode zur\u00fcck, anstatt JSX direkt zur\u00fcckzugeben.<\/p>\n<p>Um die Anforderungen von React 19 zu erf\u00fcllen, musst du die Modulmuster-Fabriken in regul\u00e4re Funktionen umwandeln, die JSX direkt zur\u00fcckgeben. Hier ist das aktualisierte Beispiel:<\/p>\n<pre><code class=\"language-jsx\">function SettingsPanel() {\n  return (\n    &lt;div className=\"settings-panel\"&gt;\n      &lt;h2&gt;Settings&lt;\/h2&gt;\n      {\/* other settings UI components *\/}\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<h3>6. Abschaffung der createFactory API<\/h3>\n<p>In React 19 wird <code>React.createFactory<\/code> entfernt. Diese Methode wurde h\u00e4ufiger verwendet, bevor <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\">JSX<\/a> weithin unterst\u00fctzt wurde. Sie erm\u00f6glichte es Entwicklern, React-Elemente zu erstellen, ohne die JSX-Syntax zu verwenden.<\/p>\n<p>Mit der Verbreitung von JSX ist <code>createFactory<\/code> jedoch \u00fcberfl\u00fcssig geworden und kann durch einfacheren, besser lesbaren JSX-Code ersetzt werden.<\/p>\n<p>Hier ist ein Beispiel f\u00fcr die Verwendung von <code>createFactory<\/code> zur Erstellung eines <code>button<\/code> Elements. Dies k\u00f6nnte Teil eines benutzerdefinierten WordPress-Plugins sein, das auf der Grundlage von Benutzereingaben dynamisch <code>button<\/code> Elemente erzeugt:<\/p>\n<pre><code class=\"language-jsx\">import { createFactory } from 'react';\n\nconst button = createFactory('button');\n\nfunction CustomButton() {\n  return button({ className: 'custom-button', type: 'button' }, 'Click Me');\n}<\/code><\/pre>\n<p>Um diesen Code f\u00fcr React 19 zu aktualisieren, ersetze <code>createFactory<\/code> durch JSX. Diese \u00c4nderung macht den Code moderner, lesbarer und wartbarer:<\/p>\n<pre><code class=\"language-jsx\">function CustomButton() {\n  return &lt;button className=\"custom-button\" type=\"button\"&gt;Click Me&lt;\/button&gt;;\n}<\/code><\/pre>\n<h3>7. Entfernung von react-test-renderer\/shallow<\/h3>\n<p>React 19 verabschiedet sich von <code>react-test-renderer\/shallow<\/code>, um die Test-Utilities zu vereinfachen und Best Practices zu f\u00f6rdern. In React 18 wurde <code>react-test-renderer\/shallow<\/code> aktualisiert und exportiert nun <code><a href=\"https:\/\/github.com\/enzymejs\/react-shallow-renderer\" target=\"_blank\" rel=\"noopener noreferrer\">react-shallow-renderer<\/a><\/code>.<\/p>\n<p>Zuvor konntest du <code>react-test-renderer\/shallow<\/code> verwenden, um flache Render-Tests f\u00fcr deine React-Komponenten zu erstellen:<\/p>\n<pre><code class=\"language-js\">import ShallowRenderer from 'react-test-renderer\/shallow';\n\ntest('MyComponent shallow render', () =&gt; {\n  const renderer = new ShallowRenderer();\n  renderer.render(&lt;MyComponent \/&gt;);\n  const result = renderer.getRenderOutput();\n  expect(result.type).toBe('div');\n});<\/code><\/pre>\n<p>Um React 19 zu entsprechen, musst du die <code><a href=\"https:\/\/www.npmjs.com\/package\/react-shallow-renderer\" target=\"_blank\" rel=\"noopener noreferrer\">react-shallow-renderer<\/a><\/code>:<\/p>\n<pre><code class=\"language-bash\">npm install react-shallow-renderer --save-dev<\/code><\/pre>\n<p>Und aktualisiere deinen Import:<\/p>\n<pre><code class=\"language-js\">import ShallowRenderer from 'react-shallow-renderer';\n\ntest('MyComponent shallow render', () =&gt; {\n  const renderer = new ShallowRenderer();\n  renderer.render(&lt;MyComponent \/&gt;);\n  const result = renderer.getRenderOutput();\n  expect(result.type).toBe('div');\n});<\/code><\/pre>\n<p>Das React-Team empfiehlt, auf die <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/intro\/\" target=\"_blank\" rel=\"noopener noreferrer\">React Testing Library<\/a> umzusteigen, die robustere Testverfahren bietet, indem sie sich darauf konzentriert, wie Nutzer mit deinen Komponenten interagieren.<\/p>\n<p>Dazu installierst du die <code><a href=\"https:\/\/www.npmjs.com\/package\/@testing-library\/react\" target=\"_blank\" rel=\"noopener noreferrer\">@testing-library\/react<\/a><\/code> Bibliothek als Dev-Abh\u00e4ngigkeit:<\/p>\n<pre><code class=\"language-bash\">npm install @testing-library\/react --save-dev<\/code><\/pre>\n<p>Als N\u00e4chstes kannst du die gleiche Komponente mit diesem modernen Ansatz testen:<\/p>\n<pre><code class=\"language-js\">import { render, screen } from '@testing-library\/react';\nimport MyBlock from '.\/MyBlock';\n\ntest('MyBlock renders correctly', () =&gt; {\n  render(&lt;MyBlock \/&gt;);\n  const element = screen.getByText('MyBlock content');\n  expect(element).toBeInTheDocument();\n});<\/code><\/pre>\n<h2>Entfernte Verwerfungen in React DOM<\/h2>\n<p>React DOM hat sich in React 19 ebenfalls ver\u00e4ndert, indem bestimmte veraltete Methoden abgeschafft wurden. Dieser Abschnitt beschreibt diese \u00c4nderungen und f\u00fchrt dich durch die Aktualisierung deines DOM-bezogenen Codes.<\/p>\n<h3>1. Abschaffung der react-dom\/test-utils API<\/h3>\n<p>Die <code><a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">react-dom\/test-utils<\/a><\/code> API wird in React 19 ebenfalls abgeschafft. Das wirkt sich darauf aus, wie wir Tests f\u00fcr unsere React-Komponenten schreiben. Konkret wurde das Dienstprogramm <code>act<\/code> von <code>react-dom\/test-utils<\/code> in das Paket <code>react<\/code> verschoben.<\/p>\n<p>Au\u00dferdem wurden die meisten anderen Hilfsprogramme aus <code>react-dom\/test-utils<\/code> <a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">entfernt<\/a>. Hier erf\u00e4hrst du, wie du deine Tests an diese \u00c4nderungen anpassen kannst.<\/p>\n<p>Das Dienstprogramm <code>act<\/code> ist wichtig, um sicherzustellen, dass alle Aktualisierungen, die deine Tests betreffen, verarbeitet und auf das DOM angewendet wurden. In React 19 solltest du <code>act<\/code> direkt von <code>react<\/code> anstatt von <code>react-dom\/test-utils<\/code> importieren.<\/p>\n<pre><code class=\"language-jsx\">\/\/ Before\nimport { act } from 'react-dom\/test-utils';\n\n\/\/ Now\nimport { act } from 'react';<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Um die Umstellung von <code>react-dom\/test-utils<\/code> auf die neuen Importe zu erleichtern, kannst du den folgenden codemod-Befehl verwenden:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/19\/replace-act-import<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<p>Das React-Team empfiehlt au\u00dferdem, dass du deine Tests auf die React Testing Library umstellst, um ein modernes und gut unterst\u00fctztes Testerlebnis zu haben. Hier sind einige h\u00e4ufige Anwendungsf\u00e4lle und wie du sie aktualisieren kannst.<\/p>\n<p>Das Dienstprogramm <code>renderIntoDocument<\/code> wird entfernt. Du kannst es durch <code>render<\/code> von <code>@testing-library\/react<\/code> ersetzen.<\/p>\n<pre><code class=\"language-js\">\/\/ Before\nimport { renderIntoDocument } from 'react-dom\/test-utils';\n\nrenderIntoDocument(&lt;Component \/&gt;);\n\n\/\/ Now\nimport { render } from '@testing-library\/react';\n\nrender(&lt;Component \/&gt;);<\/code><\/pre>\n<p>Auch das Dienstprogramm <code>Simulate<\/code> zur Simulation von Ereignissen wurde entfernt. Stattdessen verwendest du nun <code>fireEvent<\/code> aus <code>@testing-library\/react<\/code>, das ein tats\u00e4chliches Ereignis auf dem Element ausl\u00f6st.<\/p>\n<pre><code class=\"language-js\">\/\/ Before\nimport { Simulate } from 'react-dom\/test-utils';\n\nconst element = document.querySelector('button');\nSimulate.click(element);\n\n\/\/ Now\nimport { fireEvent } from '@testing-library\/react';\n\nconst element = document.querySelector('button');\nfireEvent.click(element);<\/code><\/pre>\n<p>Beachte, dass <code>fireEvent<\/code> ein echtes Ereignis ausl\u00f6st, das hei\u00dft, es interagiert nat\u00fcrlicher mit dem Element als die synthetischen Ereignisse, die von <code>Simulate<\/code> erzeugt werden. Um die React-Testbibliothek richtig zu verstehen, lies die <a href=\"https:\/\/testing-library.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dokumentation<\/a>.<\/p>\n<h3>2. Abschaffung der findDOMNode API<\/h3>\n<p>Eine weitere wichtige \u00c4nderung in React 19 ist die Abschaffung von <code>ReactDOM.findDOMNode<\/code>, die <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html#deprecations-in-strictmode\" target=\"_blank\" rel=\"noopener noreferrer\">in React 16.6.0 veraltet<\/a> war.<\/p>\n<p>Diese Funktion wurde verwendet, um auf den zugrundeliegenden DOM-Knoten einer React-Komponente zuzugreifen. Sie hatte jedoch <a href=\"https:\/\/legacy.reactjs.org\/docs\/strict-mode.html#warning-about-deprecated-finddomnode-usage\" target=\"_blank\" rel=\"noopener noreferrer\">mehrere Nachteile<\/a>, z. B. war sie langsam in der Ausf\u00fchrung, anf\u00e4llig f\u00fcr Refactoring und brach Abstraktionsebenen.<\/p>\n<p>Stattdessen solltest du <a href=\"https:\/\/react.dev\/learn\/manipulating-the-dom-with-refs\" target=\"_blank\" rel=\"noopener noreferrer\">DOM refs<\/a> verwenden, die eine zuverl\u00e4ssigere und effizientere M\u00f6glichkeit bieten, mit DOM-Elementen in deinen React-Komponenten zu interagieren.<\/p>\n<p>Hier ist ein Beispiel f\u00fcr die Verwendung von <code>findDOMNode<\/code>, um den Text in einem Eingabefeld auszuw\u00e4hlen, wenn die Komponente hochgefahren wird:<\/p>\n<pre><code class=\"language-jsx\">import { findDOMNode } from 'react-dom';\n\nfunction AutoselectingInput() {\n  useEffect(() =&gt; {\n    const input = findDOMNode(this);\n    input.select()\n  }, []);\n\n  render() {\n    return &lt;input defaultValue=\"Hello\" \/&gt;;\n  }\n}<\/code><\/pre>\n<p>Um diesen Code f\u00fcr React 19 zu aktualisieren, ersetze <code>findDOMNode<\/code> durch <code>ref<\/code>. Diese \u00c4nderung macht den Code robuster und passt ihn an moderne React-Praktiken an:<\/p>\n<pre><code class=\"language-jsx\">import React, { useEffect, useRef } from 'react';\n\nfunction AutoselectingInput() {\n  const inputRef = useRef(null);\n\n  useEffect(() =&gt; {\n    inputRef.current.select();\n  }, []);\n\n  return &lt;input ref={inputRef} defaultValue=\"Hello\" \/&gt;;\n}<\/code><\/pre>\n<h3>3. Entfernung der Render-API<\/h3>\n<p>Mit React 19 verabschieden wir uns von <code>ReactDOM.render<\/code>. Diese Methode wurde <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">in React 18.0.0<\/a> zugunsten der <code>createRoot<\/code> API von <code>react-dom\/<\/code>abgeschafft, die eine effizientere und modernere Methode zum Initialisieren und Rendern von React-Anwendungen bietet. Diese \u00c4nderung ist Teil der laufenden Bem\u00fchungen von React, die Bibliothek zu rationalisieren und zu optimieren.<\/p>\n<p>In einem typischen WordPress-Setup hast du vielleicht einen benutzerdefinierten Block oder ein Plugin, das eine React-Anwendung initialisiert, wenn das DOM bereit ist. Bisher hast du <code>ReactDOM.render<\/code> verwendet:<\/p>\n<pre><code class=\"language-jsx\">import { render } from 'react-dom';\nrender(&lt;App \/&gt;, document.getElementById('root'));<\/code><\/pre>\n<p>Mit React 19 solltest du <code>createRoot<\/code> verwenden, um deine React-Anwendung zu initialisieren und zu rendern:<\/p>\n<pre><code class=\"language-jsx\">import { createRoot } from 'react-dom\/client';\nconst root = createRoot(document.getElementById('root'));\nroot.render(&lt;App \/&gt;);<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Um von der Verwendung von <code>ReactDOM.render<\/code> auf die <code>createRoot<\/code> API von <code>react-dom\/client<\/code> umzusteigen, kannst du den folgenden codemod-Befehl verwenden:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/19\/replace-reactdom-render<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<h3>4. Entfernung der unmountComponentAtNode API<\/h3>\n<p>React 19 entfernt auch die Methode <code>ReactDOM.unmountComponentAtNode<\/code>, die <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">in React 18.0.0 veraltet<\/a> war. Diese Methode wurde verwendet, um eine React-Komponente aus dem DOM auszubauen.<\/p>\n<p>In React 19 solltest du auf die Methode <code>root.unmount()<\/code> umsteigen, die besser mit der aktualisierten API f\u00fcr die Erstellung und Hydrierung von Roots \u00fcbereinstimmt.<\/p>\n<pre><code class=\"language-js\">\/\/ Before\nunmountComponentAtNode(document.getElementById('root'));\n\n\/\/ Now\nroot.unmount();<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Um von <code>unmountComponentAtNode<\/code> auf <code>root.unmount<\/code> umzusteigen, kannst du den folgenden codemod-Befehl verwenden:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/19\/replace-reactdom-render<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<h3>5. Entfernung der Hydrate-API<\/h3>\n<p>ReactDOM.hydrate wurde <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">in React 18<\/a> nicht weiter unterst\u00fctzt und wird in React 19 vollst\u00e4ndig entfernt werden.<\/p>\n<p>Die neue Methode der React DOM-Client-API, <code>hydrateRoot<\/code>, ersetzt <code>ReactDOM.hydrate<\/code> und bietet eine effizientere und modernere M\u00f6glichkeit, servergerenderte React-Anwendungen zu hydrieren.<\/p>\n<p>In einem WordPress-Kontext k\u00f6nntest du das serverseitige Rendering (SSR) verwenden, um den urspr\u00fcnglichen HTML-Inhalt zu liefern, damit die Seite schneller geladen wird. Um diese Inhalte in eine interaktive React-Anwendung zu \u00fcberf\u00fchren, hast du bisher <code>ReactDOM.hydrate<\/code> verwendet:<\/p>\n<pre><code class=\"language-jsx\">import { hydrate } from 'react-dom';\nimport App from '.\/App.js';\n\nhydrate(\n  &lt;App \/&gt;,\n  document.getElementById('root')\n);<\/code><\/pre>\n<p>Mit React 19 solltest du <code>hydrateRoot<\/code> von <code>react-dom\/client<\/code> f\u00fcr die Hydrierung verwenden:<\/p>\n<pre><code class=\"language-jsx\">import { hydrateRoot } from 'react-dom\/client';\nimport App from '.\/App.js';\n\nhydrateRoot(\n  document.getElementById('root'),\n  &lt;App \/&gt;\n);<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Um von <code>ReactDOM.hydrate<\/code> auf <code>ReactDOMClient.hydrateRoot<\/code> zu wechseln, kannst du den folgenden Codemod-Befehl verwenden:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/19\/replace-reactdom-render<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<h2>Abgeschaffte, veraltete TypeScript-Typen<\/h2>\n<p>WordPress-Entwickler verwenden h\u00e4ufig TypeScript, um Typsicherheit hinzuzuf\u00fcgen und die Codequalit\u00e4t in React-Komponenten zu verbessern. Mit React 19 wurden mehrere veraltete TypeScript-Typen entfernt oder in relevantere Pakete verlagert.<\/p>\n<p>Das Verst\u00e4ndnis dieser \u00c4nderungen ist wichtig, um sicherzustellen, dass deine Codebasis robust und kompatibel mit der neuesten React-Version bleibt.<\/p>\n<p>Um die Umstellung zu erleichtern, hat das React-Team ein Tool namens <code><a href=\"https:\/\/github.com\/eps1lon\/types-react-codemod\/\" target=\"_blank\" rel=\"noopener noreferrer\">types-react-codemod<\/a><\/code> zur Verf\u00fcgung gestellt, das deine Codebasis automatisch an diese \u00c4nderungen anpassen kann.<\/p>\n<p>Um es zu nutzen, f\u00fchre den folgenden codemod-Befehl aus, der mehrere Transformationen enth\u00e4lt, um veraltete Typen zu aktualisieren.<\/p>\n<pre><code class=\"language-bash\">npx types-react-codemod@latest preset-19 .\/path-to-app<\/code><\/pre>\n<p>Das Tool bietet auch einen interaktiven Modus, in dem du bestimmte Transformationen ausw\u00e4hlen kannst, die angewendet werden sollen:<\/p>\n<pre><code class=\"language-bash\">? Pick transforms to apply (Press  to select,  to toggle all,  to invert selection, and  to proceed)\n\u276f\u25ef context-any\n\u25c9 deprecated-react-type\n\u25c9 deprecated-sfc-element\n\u25c9 deprecated-sfc\n\u25c9 deprecated-stateless-component\n\u25ef implicit-children\n\u25ef useCallback-implicit-any<\/code><\/pre>\n<p>Schauen wir uns einige wichtige \u00c4nderungen mit Beispielen an.<\/p>\n<h3>1. Ref Cleanup erforderlich<\/h3>\n<p>Mit React 19 verbessern die Cleanup-Funktionen von <code>ref<\/code> die Typsicherheit, indem sie explizite R\u00fcckgaben in <code>ref<\/code> R\u00fcckrufen erzwingen. Implizite R\u00fcckgaben k\u00f6nnen dazu f\u00fchren, dass TypeScript den R\u00fcckgabewert falsch interpretiert.<\/p>\n<pre><code class=\"language-tsx\">\/\/ Before\n (instance = current)} \/&gt;\n\n\/\/ Now\n { instance = current }} \/&gt;<\/code><\/pre>\n<h3>2. useRef erfordert ein Argument<\/h3>\n<p>Zuvor konnte <code>useRef<\/code> ohne Argumente aufgerufen werden, was zu potenziellen Typproblemen f\u00fchrte. In React 19 ben\u00f6tigt <code>useRef<\/code> ein Argument, um sicherzustellen, dass Refs immer ver\u00e4nderbar sind.<\/p>\n<pre><code class=\"language-tsx\">\/\/ Before \u2014 @ts-expect-error: Expected 1 argument but saw none\nuseRef();\n\n\/\/ Now \u2014 correct usage with an argument\nuseRef(undefined);<\/code><\/pre>\n<h3>3. \u00c4nderungen am ReactElement TypeScript-Typ<\/h3>\n<p>Der Standardtyp f\u00fcr <code>ReactElement<\/code> props wurde von <code>any<\/code> auf <code>unknown<\/code> ge\u00e4ndert, was die Typsicherheit erh\u00f6ht, da unbekannte Typen explizit behandelt werden m\u00fcssen.<\/p>\n<pre><code class=\"language-tsx\">\/\/ Previously, this was 'any'\ntype Example = ReactElement[\"props\"];\n\n\/\/ Now, this is 'unknown'\ntype Example = ReactElement[\"props\"];<\/code><\/pre>\n<p>Wenn dein Code auf <code>any<\/code> basierte, musst du ihn aktualisieren, um <code>unknown<\/code> explizit zu behandeln oder ihn auf <code>any<\/code> zu casten.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Als WordPress-Entwickler ist es wichtig, mit den neuesten Entwicklungen bei React Schritt zu halten. Dieser Leitfaden stellt sicher, dass du die verschiedenen \u00c4nderungen an React verstehst, damit du sie in deinen WordPress-Projekten anwenden kannst.<\/p>\n<p>Eine letzte Information: Mit React 19 wird die neue JSX-Transformation erforderlich sein. Die gute Nachricht ist, dass sie <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/06\/jsx-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">bereits in WordPress 6.6 enthalten<\/a> ist. Wenn die neue Transformation nicht aktiviert ist, wirst du diese Warnung sehen:<\/p>\n<pre><code class=\"language-bash\">Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https:\/\/react.dev\/link\/new-jsx-transform<\/code><\/pre>\n<p>Alles, was du tun musst, ist, die React-Importe f\u00fcr JSX-Transformationen nicht mehr zu verwenden, da sie nicht mehr notwendig sind.<\/p>\n<p><em>Haben wir etwas \u00fcbersehen? Bitte teile es uns in den Kommentaren mit!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Als WordPress-Entwickler integrieren wir oft benutzerdefinierte React-Komponenten in unsere Themes und Plugins, um dynamische und reaktionsf\u00e4hige Benutzeroberfl\u00e4chen zu schaffen. Mit der bevorstehenden Ver\u00f6ffentlichung von React 19 &#8230;<\/p>\n","protected":false},"author":287,"featured_media":70525,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[975],"class_list":["post-70524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Hier erf\u00e4hrst du die wichtigsten Neuerungen, Kompatibilit\u00e4tstipps und bew\u00e4hrte Verfahren, um einen reibungslosen \u00dcbergang und eine verbesserte Leistung der Website zu gew\u00e4hrleisten.\" \/>\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\/react-19-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer\" \/>\n<meta property=\"og:description\" content=\"Hier erf\u00e4hrst du die wichtigsten Neuerungen, Kompatibilit\u00e4tstipps und bew\u00e4hrte Verfahren, um einen reibungslosen \u00dcbergang und eine verbesserte Leistung der Website zu gew\u00e4hrleisten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/\" \/>\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=\"2024-07-05T07:30:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-11T13:31:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\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=\"Hier erf\u00e4hrst du die wichtigsten Neuerungen, Kompatibilit\u00e4tstipps und bew\u00e4hrte Verfahren, um einen reibungslosen \u00dcbergang und eine verbesserte Leistung der Website zu gew\u00e4hrleisten.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users-1024x512.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=\"15\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer\",\"datePublished\":\"2024-07-05T07:30:10+00:00\",\"dateModified\":\"2024-07-11T13:31:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/\"},\"wordCount\":2083,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/\",\"name\":\"Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"datePublished\":\"2024-07-05T07:30:10+00:00\",\"dateModified\":\"2024-07-11T13:31:18+00:00\",\"description\":\"Hier erf\u00e4hrst du die wichtigsten Neuerungen, Kompatibilit\u00e4tstipps und bew\u00e4hrte Verfahren, um einen reibungslosen \u00dcbergang und eine verbesserte Leistung der Website zu gew\u00e4hrleisten.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer\"}]},{\"@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":"Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer - Kinsta\u00ae","description":"Hier erf\u00e4hrst du die wichtigsten Neuerungen, Kompatibilit\u00e4tstipps und bew\u00e4hrte Verfahren, um einen reibungslosen \u00dcbergang und eine verbesserte Leistung der Website zu gew\u00e4hrleisten.","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\/react-19-wordpress\/","og_locale":"de_DE","og_type":"article","og_title":"Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer","og_description":"Hier erf\u00e4hrst du die wichtigsten Neuerungen, Kompatibilit\u00e4tstipps und bew\u00e4hrte Verfahren, um einen reibungslosen \u00dcbergang und eine verbesserte Leistung der Website zu gew\u00e4hrleisten.","og_url":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-07-05T07:30:10+00:00","article_modified_time":"2024-07-11T13:31:18+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Hier erf\u00e4hrst du die wichtigsten Neuerungen, Kompatibilit\u00e4tstipps und bew\u00e4hrte Verfahren, um einen reibungslosen \u00dcbergang und eine verbesserte Leistung der Website zu gew\u00e4hrleisten.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users-1024x512.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"15\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer","datePublished":"2024-07-05T07:30:10+00:00","dateModified":"2024-07-11T13:31:18+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/"},"wordCount":2083,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/","url":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/","name":"Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","datePublished":"2024-07-05T07:30:10+00:00","dateModified":"2024-07-11T13:31:18+00:00","description":"Hier erf\u00e4hrst du die wichtigsten Neuerungen, Kompatibilit\u00e4tstipps und bew\u00e4hrte Verfahren, um einen reibungslosen \u00dcbergang und eine verbesserte Leistung der Website zu gew\u00e4hrleisten.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/react-19-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/de\/thema\/react\/"},{"@type":"ListItem","position":3,"name":"Vorbereitung auf React 19: Ein Leitfaden f\u00fcr WordPress 6.6-Nutzer"}]},{"@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\/70524","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=70524"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/70524\/revisions"}],"predecessor-version":[{"id":70604,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/70524\/revisions\/70604"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70524\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70524\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70524\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70524\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70524\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70524\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70524\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70524\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/70524\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/70525"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=70524"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=70524"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=70524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}