{"id":77423,"date":"2024-07-05T08:31:35","date_gmt":"2024-07-05T07:31:35","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=77423&#038;preview=true&#038;preview_id=77423"},"modified":"2024-07-12T10:57:22","modified_gmt":"2024-07-12T09:57:22","slug":"react-19-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/","title":{"rendered":"Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6"},"content":{"rendered":"<p>En tant que <a href=\"https:\/\/kinsta.com\/fr\/blog\/engager-developpeur-wordpress\/\">d\u00e9veloppeurs WordPress<\/a>, nous int\u00e9grons souvent des composants <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a> personnalis\u00e9s dans nos <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">th\u00e8mes<\/a> et nos <a href=\"https:\/\/kinsta.com\/fr\/sujets\/extensions-wordpress\/\">extensions<\/a> pour cr\u00e9er des interfaces utilisateur dynamiques et r\u00e9actives.<\/p>\n<p>Avec la <a href=\"https:\/\/react.dev\/blog\/2024\/04\/25\/react-19\" target=\"_blank\" rel=\"noopener noreferrer\">sortie prochaine de React 19<\/a>, il est crucial de se pr\u00e9parer aux changements et aux d\u00e9pr\u00e9ciations qui pourraient avoir un impact sur nos bases de code existantes. <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-6-6\/\">WordPress 6.6<\/a>, qui sera publi\u00e9 le 16 juillet, inclut React 18.3. Cette version est presque identique \u00e0 la 18.2 mais ajoute des avertissements pour les fonctionnalit\u00e9s d\u00e9pr\u00e9ci\u00e9es afin de t&rsquo;aider \u00e0 te pr\u00e9parer \u00e0 React 19.<\/p>\n<p>Il est essentiel de tenir compte de ces d\u00e9pr\u00e9ciations pour assurer la compatibilit\u00e9 avec React 19. Les ignorer peut entrainer des bugs ou des probl\u00e8mes dans vos <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">blocs personnalis\u00e9s<\/a>, vos extensions ou vos <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/\">th\u00e8mes<\/a> lorsque React 19 sera publi\u00e9 et inclus dans WordPress.<\/p>\n<p>Cet article d\u00e9crit chaque d\u00e9pr\u00e9ciation, fournit des exemples de code et vous guide dans le remplacement des fonctionnalit\u00e9s d\u00e9pr\u00e9ci\u00e9es pour maintenir une fonctionnalit\u00e9 fluide.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Pour aider \u00e0 la mise \u00e0 niveau, l&rsquo;\u00e9quipe React a travaill\u00e9 avec l&rsquo;\u00e9quipe de <a href=\"http:\/\/codemod.com\" target=\"_blank\" rel=\"noopener noreferrer\">Codemod<\/a> pour publier des codemods qui mettront automatiquement \u00e0 jour ton code vers un grand nombre des nouvelles API et des nouveaux mod\u00e8les de React 19.<\/p>\n<p>Tous les codemods sont disponibles dans le <a href=\"https:\/\/github.com\/reactjs\/react-codemod\" target=\"_blank\" rel=\"noopener noreferrer\">repo react-codemod<\/a> sur GitHub. De plus, nous joindrons la commande codemod de chaque d\u00e9pr\u00e9ciation (si elle est disponible) pour t&rsquo;aider \u00e0 mettre \u00e0 jour automatiquement votre code.<\/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>D\u00e9pr\u00e9cations supprim\u00e9es dans React<\/h2>\n<p>Plusieurs API et fonctionnalit\u00e9s d\u00e9pr\u00e9ci\u00e9es ont \u00e9t\u00e9 supprim\u00e9es pour rationaliser la biblioth\u00e8que React et encourager les meilleures pratiques. Cette section couvre les principaux changements et la fa\u00e7on de mettre \u00e0 jour votre code en cons\u00e9quence.<\/p>\n<h3>1. Suppression de defaultProps pour les composants de fonction<\/h3>\n<p>React 19 supprimera <code>defaultProps<\/code> pour les composants de fonction en faveur des param\u00e8tres par d\u00e9faut <a href=\"https:\/\/kinsta.com\/fr\/blog\/javascript-react\/\">ES6<\/a>. Selon l&rsquo;<a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/07\/preparation-for-react-19-upgrade\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00e9quipe de WordPress<\/a>, cette d\u00e9pr\u00e9ciation est le plus souvent utilis\u00e9e dans les extensions et les th\u00e8mes.<\/p>\n<p>En tant que d\u00e9veloppeur WordPress, vous plourriez utiliser <code>defaultProps<\/code> pour fournir des valeurs par d\u00e9faut pour les props dans vos composants de fonction, ce qui garantit que les composants se comportent correctement m\u00eame si certaines props ne sont pas pass\u00e9es.<\/p>\n<p>Voici \u00e0 quoi peut ressembler ton code actuel avec <code>defaultProps<\/code>:<\/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>Dans cet exemple, un composant <code>CustomButton<\/code> a des valeurs par d\u00e9faut <code>label<\/code> et <code>color<\/code> fournies par <code>defaultProps<\/code>. Avec React 19, cela provoquera une erreur d&rsquo;avertissement, vous incitant \u00e0 utiliser plut\u00f4t les param\u00e8tres par d\u00e9faut ES6.<\/p>\n<p>Voici le code mis \u00e0 jour avec les param\u00e8tres par d\u00e9faut ES6 :<\/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>En utilisant les param\u00e8tres par d\u00e9faut ES6, les valeurs par d\u00e9faut se trouvent maintenant directement dans la signature de la fonction, ce qui rend le code plus facile \u00e0 lire et \u00e0 maintenir.<\/p>\n<h3>2. Suppression des propTypes pour les composants de fonction.<\/h3>\n<p><code>propTypes<\/code> a \u00e9t\u00e9 <a href=\"https:\/\/legacy.reactjs.org\/blog\/2017\/04\/07\/react-v15.5.0.html#new-deprecation-warnings\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9pr\u00e9ci\u00e9 dans React 15.5.0<\/a> et sera \u00e9galement compl\u00e8tement supprim\u00e9 dans le package React dans la v19. Si tu utilises <code>propTypes<\/code>, il est recommand\u00e9 de migrer vers <a href=\"https:\/\/kinsta.com\/fr\/blog\/guide-complet-typescript\/\">TypeScript<\/a> ou une autre solution de v\u00e9rification de type.<\/p>\n<p>Vous avez peut-\u00eatre utilis\u00e9 <code>propTypes<\/code> pour valider les props pass\u00e9s \u00e0 vos composants de fonction afin de vous assurer qu&rsquo;ils re\u00e7oivent les bons types et les bonnes valeurs. Par exemple :<\/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>Aujourd&rsquo;hui, vous pouvez commencer \u00e0 utiliser TypeScript pour ces v\u00e9rifications de type :<\/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>Pour vous aider \u00e0 passer de l&rsquo;utilisation de <code>propTypes<\/code> \u00e0 TypeScript, vous pouvez utiliser la commande codemod suivante :<\/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. Suppression des contextes h\u00e9rit\u00e9s (contextTypes et getChildContext)<\/h3>\n<p>\u00c9tant donn\u00e9 l&rsquo;anciennet\u00e9 de nombreuses extensions et bases de code dans WordPress, il se peut que vous utilisiez encore les anciennes API <code>contextTypes<\/code> et <code>getChildContext<\/code> dans vos composants de classe. Ces API \u00e9taient utilis\u00e9es pour transmettre des donn\u00e9es d&rsquo;un composant parent \u00e0 ses descendants sans passer explicitement des props \u00e0 chaque niveau.<\/p>\n<p>Cependant, il est important de noter que le contexte h\u00e9rit\u00e9 a \u00e9t\u00e9 <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9pr\u00e9ci\u00e9 dans React 16.6.0<\/a> et sera supprim\u00e9 dans React v19. Ce changement vise \u00e0 rendre React l\u00e9g\u00e8rement plus petit et plus rapide, car l&rsquo;API Legacy Context comportait des bugs subtils qu&rsquo;il \u00e9tait souvent facile de n\u00e9gliger.<\/p>\n<p>La m\u00e9thode h\u00e9rit\u00e9e a \u00e9t\u00e9 remplac\u00e9e par la nouvelle API <code>contextType<\/code>.<\/p>\n<p>Voici un exemple de la fa\u00e7on dont vous pouvez utiliser l&rsquo;API Contexte d\u00e9pr\u00e9ci\u00e9e dans une extension WordPress pour transmettre des param\u00e8tres globaux, tels que le titre du site, d&rsquo;un composant parent \u00e0 un composant enfant sans 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>En revanche, l&rsquo;approche moderne utilise la m\u00e9thode <code>createContext<\/code>. C&rsquo;est cette m\u00e9thode que vous devrez adopter en vous pr\u00e9parant \u00e0 React 19 :<\/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. Suppression des refs de chaines de caract\u00e8res<\/h3>\n<p>L&rsquo;utilisation des string refs \u00e9tait autrefois un moyen courant d&rsquo;acc\u00e9der \u00e0 un \u00e9l\u00e9ment DOM dans les composants React. Cependant, elles sont consid\u00e9r\u00e9es comme <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/03\/27\/update-on-async-rendering.html\" target=\"_blank\" rel=\"noopener noreferrer\">un h\u00e9ritage depuis React 16.3.0<\/a> et seront supprim\u00e9es dans la v19.<\/p>\n<p>Si les string refs \u00e9taient simples, elles pr\u00e9sentaient <a href=\"https:\/\/github.com\/facebook\/react\/issues\/1373\" target=\"_blank\" rel=\"noopener noreferrer\">plusieurs probl\u00e8mes<\/a>, tels que des conflits de noms potentiels et un manque de flexibilit\u00e9.<\/p>\n<p>Prenons un exemple d&rsquo;utilisation des string refs dans un bloc personnalis\u00e9 WordPress. Imaginez que vous avez un bloc Gutenberg personnalis\u00e9 qui inclut un champ de saisie, et que vous souhaitez que le champ de saisie soit mis au point automatiquement lorsque le bloc est ajout\u00e9 \u00e0 l&rsquo;\u00e9diteur. Voici comment vous auriez pu faire cela en utilisant des refs de chaine :<\/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>Pour te pr\u00e9parer \u00e0 React 19, tu dois remplacer les string refs par des callback <code>refs<\/code> ou l&rsquo;API <code>React.createRef<\/code>. Voici le m\u00eame exemple en utilisant un 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>Pour t&rsquo;aider \u00e0 passer de l&rsquo;utilisation des string refs au callback <code>ref<\/code>, tu peux utiliser la commande codemod suivante :<\/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. Suppression des usines de mod\u00e8les de modules<\/h3>\n<p>Une autre <a href=\"https:\/\/legacy.reactjs.org\/blog\/2019\/08\/08\/react-v16.9.0.html#deprecating-module-pattern-factories\" target=\"_blank\" rel=\"noopener noreferrer\">fonctionnalit\u00e9 d\u00e9pr\u00e9ci\u00e9e<\/a> qui sera supprim\u00e9e dans React 19 est les usines de motifs de modules. Ce mod\u00e8le \u00e9tait rarement utilis\u00e9 et faisait que React \u00e9tait l\u00e9g\u00e8rement plus grand et plus lent que n\u00e9cessaire.<\/p>\n<p>Les usines de compositions de modules permettaient aux d\u00e9veloppeurs de cr\u00e9er des composants de mani\u00e8re moins conventionnelle. Voici un exemple de la fa\u00e7on dont tu l&rsquo;utilises peut-\u00eatre :<\/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>Dans ce mod\u00e8le, <code>SettingsPanelFactory<\/code> renvoie un objet \u00e0 l&rsquo;aide d&rsquo;une m\u00e9thode <code>render<\/code> plut\u00f4t que de renvoyer directement du JSX.<\/p>\n<p>Pour \u00eatre en conformit\u00e9 avec React 19, tu dois faire migrer les fabriques de motifs de modules vers des fonctions r\u00e9guli\u00e8res qui renvoient directement JSX. Voici l&rsquo;exemple mis \u00e0 jour :<\/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. Suppression de l&rsquo;API createFactory<\/h3>\n<p>Dans React 19, <code>React.createFactory<\/code> est en cours de suppression. Cette m\u00e9thode \u00e9tait plus couramment utilis\u00e9e avant que <a href=\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\">JSX<\/a> ne soit largement pris en charge. Elle permettait aux d\u00e9veloppeurs de cr\u00e9er des \u00e9l\u00e9ments React sans utiliser la syntaxe JSX.<\/p>\n<p>Cependant, avec la pr\u00e9valence de JSX, <code>createFactory<\/code> est devenu obsol\u00e8te et peut \u00eatre remplac\u00e9 par un code JSX plus simple et plus lisible.<\/p>\n<p>Voici un exemple d&rsquo;utilisation de <code>createFactory<\/code> pour cr\u00e9er un \u00e9l\u00e9ment <code>button<\/code>. Cela peut faire partie d&rsquo;une extension WordPress personnalis\u00e9 qui g\u00e9n\u00e8re dynamiquement des \u00e9l\u00e9ments <code>button<\/code> en fonction des entr\u00e9es de l&rsquo;utilisateur :<\/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>Pour mettre \u00e0 jour ce code pour React 19, remplace <code>createFactory<\/code> par JSX. Ce changement rend le code plus moderne, plus lisible et plus facile \u00e0 maintenir :<\/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. Suppression de react-test-renderer\/shallow<\/h3>\n<p>React 19 supprime <code>react-test-renderer\/shallow<\/code> pour rationaliser les utilitaires de test et encourager les meilleures pratiques. Dans React 18, <code>react-test-renderer\/shallow<\/code> a \u00e9t\u00e9 mis \u00e0 jour pour r\u00e9exporter. <code><a href=\"https:\/\/github.com\/enzymejs\/react-shallow-renderer\" target=\"_blank\" rel=\"noopener noreferrer\">react-shallow-renderer<\/a><\/code>.<\/p>\n<p>Auparavant, vous pouviez utiliser <code>react-test-renderer\/shallow<\/code> pour cr\u00e9er des tests de rendu peu profonds pour tes composants React :<\/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>Pour \u00eatre en conformit\u00e9 avec React 19, vous devez installer <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>Et mettre \u00e0 jour votre 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>L&rsquo;\u00e9quipe React recommande de migrer vers la <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/intro\/\" target=\"_blank\" rel=\"noopener noreferrer\">biblioth\u00e8que de test React<\/a>, qui offre des pratiques de test plus robustes en se concentrant sur la fa\u00e7on dont les utilisateurs interagissent avec tes composants.<\/p>\n<p>Pour cela, installez la <code><a href=\"https:\/\/www.npmjs.com\/package\/@testing-library\/react\" target=\"_blank\" rel=\"noopener noreferrer\">@testing-library\/react<\/a><\/code> en tant que d\u00e9pendance dev :<\/p>\n<pre><code class=\"language-bash\">npm install @testing-library\/react --save-dev<\/code><\/pre>\n<p>Ensuite, vous pouvez tester le m\u00eame composant en utilisant cette approche moderne :<\/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>Suppression des d\u00e9pr\u00e9ciations dans React DOM<\/h2>\n<p>React DOM a \u00e9galement chang\u00e9 dans React 19, avec la suppression de certaines m\u00e9thodes d\u00e9pr\u00e9ci\u00e9es. Cette section pr\u00e9sente ces changements et vous guide dans la mise \u00e0 jour de ton code li\u00e9 au DOM.<\/p>\n<h3>1. Suppression de l&rsquo;API react-dom\/test-utils<\/h3>\n<p>L&rsquo;API <code><a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">react-dom\/test-utils<\/a><\/code> sera \u00e9galement supprim\u00e9e dans React 19. Cela a un impact sur la fa\u00e7on dont nous \u00e9crivons des tests pour nos composants React. Plus pr\u00e9cis\u00e9ment, l&rsquo;utilitaire <code>act<\/code> a \u00e9t\u00e9 d\u00e9plac\u00e9 de <code>react-dom\/test-utils<\/code> vers le paquet <code>react<\/code>.<\/p>\n<p>De plus, la plupart des autres utilitaires de <code>react-dom\/test-utils<\/code> ont <a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">\u00e9t\u00e9 supprim\u00e9s<\/a>. Voici comment adapter tes tests pour qu&rsquo;ils soient conformes \u00e0 ces changements.<\/p>\n<p>L&rsquo;utilitaire <code>act<\/code> est essentiel pour s&rsquo;assurer que toutes les mises \u00e0 jour li\u00e9es \u00e0 tes tests ont \u00e9t\u00e9 trait\u00e9es et appliqu\u00e9es au DOM. Dans React 19, vous devez importer <code>act<\/code> directement depuis <code>react<\/code> au lieu de <code>react-dom\/test-utils<\/code>.<\/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>Pour vous aider \u00e0 passer de l&rsquo;utilisation de <code>react-dom\/test-utils<\/code> aux nouvelles importations, vous pouvez utiliser la commande codemod suivante :<\/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>L&rsquo;\u00e9quipe React recommande \u00e9galement de migrer vos tests vers la biblioth\u00e8que de tests React pour une exp\u00e9rience de test moderne et bien prise en charge. Voici quelques cas d&rsquo;utilisation courants et comment les mettre \u00e0 jour.<\/p>\n<p>L&rsquo;utilitaire <code>renderIntoDocument<\/code> sera supprim\u00e9. Vous pouvez le remplacer par <code>render<\/code> \u00e0 partir de <code>@testing-library\/react<\/code>.<\/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>De m\u00eame, l&rsquo;utilitaire <code>Simulate<\/code> pour simuler des \u00e9v\u00e8nements sera supprim\u00e9. Vous devrez plut\u00f4t utiliser <code>fireEvent<\/code> de <code>@testing-library\/react<\/code>, qui envoie un \u00e9v\u00e8nement r\u00e9el sur l&rsquo;\u00e9l\u00e9ment.<\/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>Sachez que <code>fireEvent<\/code> envoie un \u00e9v\u00e9nement r\u00e9el, ce qui signifie qu&rsquo;il interagit avec l&rsquo;\u00e9l\u00e9ment de mani\u00e8re plus naturelle que les \u00e9v\u00e8nements synth\u00e9tiques cr\u00e9\u00e9s par <code>Simulate<\/code>. Pour bien comprendre la biblioth\u00e8que de test React, lisez sa <a href=\"https:\/\/testing-library.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentation<\/a>.<\/p>\n<h3>2. Suppression de l&rsquo;API findDOMNode<\/h3>\n<p>Un autre changement important \u00e0 venir dans React 19 est la suppression de <code>ReactDOM.findDOMNode<\/code>, qui a \u00e9t\u00e9 <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html#deprecations-in-strictmode\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9pr\u00e9ci\u00e9e dans React 16.6.0<\/a>.<\/p>\n<p>Cette fonction \u00e9tait utilis\u00e9e pour acc\u00e9der au n\u0153ud DOM sous-jacent d&rsquo;un composant React, mais elle pr\u00e9sentait <a href=\"https:\/\/legacy.reactjs.org\/docs\/strict-mode.html#warning-about-deprecated-finddomnode-usage\" target=\"_blank\" rel=\"noopener noreferrer\">plusieurs inconv\u00e9nients<\/a>, tels que la lenteur d&rsquo;ex\u00e9cution, la fragilit\u00e9 au refactoring et la rupture des niveaux d&rsquo;abstraction.<\/p>\n<p>\u00c0 la place, vous devrez utiliser les <a href=\"https:\/\/react.dev\/learn\/manipulating-the-dom-with-refs\" target=\"_blank\" rel=\"noopener noreferrer\">refs DOM<\/a>, qui fournissent un moyen plus fiable et plus efficace d&rsquo;interagir avec les \u00e9l\u00e9ments DOM dans tes composants React.<\/p>\n<p>Voici un exemple d&rsquo;utilisation de <code>findDOMNode<\/code> pour s\u00e9lectionner le texte d&rsquo;un champ de saisie lors du montage du composant :<\/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>Pour mettre \u00e0 jour ce code pour React 19, remplacez <code>findDOMNode<\/code> par un <code>ref<\/code>&#8230; Cette modification rend le code plus robuste et l&rsquo;aligne sur les pratiques modernes de React :<\/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. Suppression de l&rsquo;API render<\/h3>\n<p>Avec React 19, la m\u00e9thode <code>ReactDOM.render<\/code> sera supprim\u00e9e. Cette m\u00e9thode a \u00e9t\u00e9 <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9pr\u00e9ci\u00e9e dans React 18.0.0<\/a> en faveur de l&rsquo;API <code>createRoot<\/code> de <code>react-dom\/client<\/code>, qui offre un moyen plus efficace et plus moderne d&rsquo;initialiser et de rendre les applications React. Ce changement fait partie des efforts continus de React pour rationaliser et optimiser la biblioth\u00e8que.<\/p>\n<p>Dans une configuration WordPress typique, vous pouvez avoir un bloc personnalis\u00e9 ou une extension qui initialise une application React lorsque le DOM est pr\u00eat. Auparavant, vous utilisiez <code>ReactDOM.render<\/code>:<\/p>\n<pre><code class=\"language-jsx\">import { render } from 'react-dom';\nrender(&lt;App \/&gt;, document.getElementById('root'));<\/code><\/pre>\n<p>Avec React 19, vous devez utiliser <code>createRoot<\/code> pour initialiser et effectuer le rendu de votre application React :<\/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>Pour vous aider \u00e0 passer de l&rsquo;utilisation de <code>ReactDOM.render<\/code> \u00e0 l&rsquo;API <code>createRoot<\/code> \u00e0 partir de <code>react-dom\/client<\/code>, vous pouvez utiliser la commande codemod suivante :<\/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. Suppression de l&rsquo;API unmountComponentAtNode<\/h3>\n<p>React 19 supprime \u00e9galement la m\u00e9thode <code>ReactDOM.unmountComponentAtNode<\/code>, qui \u00e9tait <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9pr\u00e9ci\u00e9e dans React 18.0.0<\/a>. Cette m\u00e9thode \u00e9tait utilis\u00e9e pour d\u00e9monter un composant React du DOM.<\/p>\n<p>Dans React 19, vous devrez migrer vers l&rsquo;utilisation de la m\u00e9thode <code>root.unmount()<\/code>, qui est plus align\u00e9e sur l&rsquo;API mise \u00e0 jour pour la cr\u00e9ation et l&rsquo;hydratation des racines.<\/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>Pour vous aider \u00e0 passer de l&rsquo;utilisation de <code>unmountComponentAtNode<\/code> \u00e0 <code>root.unmount<\/code>, vous pouvez utiliser la commande codemod suivante :<\/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. Suppression de l&rsquo;API hydrate<\/h3>\n<p>ReactDOM.hydrate a \u00e9t\u00e9 <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9pr\u00e9ci\u00e9 dans React 18<\/a> et sera compl\u00e8tement supprim\u00e9 dans React 19.<\/p>\n<p>La nouvelle m\u00e9thode de l&rsquo;API client React DOM, <code>hydrateRoot<\/code>, remplace <code>ReactDOM.hydrate<\/code>, offrant un moyen plus efficace et plus moderne d&rsquo;hydrater les applications React rendues par le serveur.<\/p>\n<p>Dans un contexte WordPress, vous pourrez utiliser le rendu c\u00f4t\u00e9 serveur (SSR) pour fournir le contenu HTML initial afin d&rsquo;acc\u00e9l\u00e9rer le chargement des pages. Pour hydrater ce contenu dans une application React interactive, vous utilisiez auparavant <code>ReactDOM.hydrate<\/code>:<\/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>Avec React 19, vous devez utiliser <code>hydrateRoot<\/code> \u00e0 partir de <code>react-dom\/client<\/code> pour l&rsquo;hydratation :<\/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>Pour vous aider \u00e0 passer de <code>ReactDOM.hydrate<\/code> \u00e0 <code>ReactDOMClient.hydrateRoot<\/code>, vous pouvez utiliser la commande codemod suivante :<\/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>Suppression des types TypeScript d\u00e9pr\u00e9ci\u00e9s<\/h2>\n<p>Les d\u00e9veloppeurs WordPress utilisent souvent TypeScript pour ajouter la s\u00e9curit\u00e9 des types et am\u00e9liorer la qualit\u00e9 du code dans les composants React. Avec React 19, plusieurs types TypeScript d\u00e9pr\u00e9ci\u00e9s ont \u00e9t\u00e9 supprim\u00e9s ou d\u00e9plac\u00e9s vers des paquets plus pertinents.<\/p>\n<p>Il est crucial de comprendre ces changements pour s&rsquo;assurer que votre base de code reste robuste et compatible avec la derni\u00e8re version de React.<\/p>\n<p>Pour faciliter la transition, l&rsquo;\u00e9quipe React a mis \u00e0 disposition un outil appel\u00e9. <code><a href=\"https:\/\/github.com\/eps1lon\/types-react-codemod\/\" target=\"_blank\" rel=\"noopener noreferrer\">types-react-codemod<\/a><\/code>, qui peut automatiquement mettre \u00e0 jour votre base de code pour g\u00e9rer ces changements.<\/p>\n<p>Pour l&rsquo;utiliser, ex\u00e9cutez la commande codemod suivante, qui inclut plusieurs transformations pour mettre \u00e0 jour les types d\u00e9pr\u00e9ci\u00e9s.<\/p>\n<pre><code class=\"language-bash\">npx types-react-codemod@latest preset-19 .\/path-to-app<\/code><\/pre>\n<p>L&rsquo;outil propose \u00e9galement un mode interactif dans lequel vous pouvez choisir des transformations sp\u00e9cifiques \u00e0 appliquer :<\/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>Voyons quelques changements cl\u00e9s \u00e0 l&rsquo;aide d&rsquo;exemples.<\/p>\n<h3>1. Ref cleanup n\u00e9cessaire<\/h3>\n<p>Avec React 19, les fonctions de nettoyage <code>ref<\/code> am\u00e9liorent la s\u00e9curit\u00e9 des types en imposant des retours explicites dans les rappels <code>ref<\/code>. Les retours implicites peuvent amener TypeScript \u00e0 mal interpr\u00e9ter la valeur de retour.<\/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 n\u00e9cessite un argument<\/h3>\n<p>Auparavant, <code>useRef<\/code> pouvait \u00eatre appel\u00e9 sans argument, ce qui entra\u00eenait des probl\u00e8mes de type potentiels. Dans React 19, <code>useRef<\/code> n\u00e9cessite un argument pour s&rsquo;assurer que les refs sont toujours mutables.<\/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. Modifications du type TypeScript de ReactElement<\/h3>\n<p>Le type par d\u00e9faut des props <code>ReactElement<\/code> est pass\u00e9 de <code>any<\/code> \u00e0 <code>unknown<\/code>, ce qui am\u00e9liore la s\u00e9curit\u00e9 des types en exigeant une gestion explicite des types inconnus.<\/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>Si votre code s&rsquo;appuyait sur <code>any<\/code>, vous devez le mettre \u00e0 jour pour g\u00e9rer explicitement <code>unknown<\/code> ou le caster en <code>any<\/code>.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>En tant que d\u00e9veloppeurs WordPress, il est crucial de rester \u00e0 jour avec les derni\u00e8res avanc\u00e9es de React. Ce guide vous assure de comprendre les diff\u00e9rents changements \u00e0 venir dans React afin que tu puisses les appliquer \u00e0 vos projets WordPress.<\/p>\n<p>Une derni\u00e8re information : Avec React 19, la nouvelle transformation JSX sera n\u00e9cessaire. La bonne nouvelle, c&rsquo;est qu&rsquo;elle est <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/06\/jsx-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9j\u00e0 fournie avec WordPress 6.6<\/a>. Si la nouvelle transformation n&rsquo;est pas activ\u00e9e, vous verrez cet avertissement :<\/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>Il vous suffit d&rsquo;arr\u00eater d&rsquo;utiliser les importations React pour les transformations JSX, car elles ne sont plus n\u00e9cessaires.<\/p>\n<p><em>Avons-nous manqu\u00e9 quelque chose ? Partagez avec nous dans la section des commentaires !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En tant que d\u00e9veloppeurs WordPress, nous int\u00e9grons souvent des composants React personnalis\u00e9s dans nos th\u00e8mes et nos extensions pour cr\u00e9er des interfaces utilisateur dynamiques et r\u00e9actives. &#8230;<\/p>\n","protected":false},"author":287,"featured_media":77424,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1004],"class_list":["post-77423","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>Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6 - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez les principales mises \u00e0 jour, les conseils de compatibilit\u00e9 et les meilleures pratiques pour assurer une transition en douceur et am\u00e9liorer les performances de votre site web.\" \/>\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\/fr\/blog\/react-19-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6\" \/>\n<meta property=\"og:description\" content=\"Apprenez les principales mises \u00e0 jour, les conseils de compatibilit\u00e9 et les meilleures pratiques pour assurer une transition en douceur et am\u00e9liorer les performances de votre site web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-05T07:31:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-12T09:57:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/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=\"Apprenez les principales mises \u00e0 jour, les conseils de compatibilit\u00e9 et les meilleures pratiques pour assurer une transition en douceur et am\u00e9liorer les performances de votre site web.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/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_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6\",\"datePublished\":\"2024-07-05T07:31:35+00:00\",\"dateModified\":\"2024-07-12T09:57:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/\"},\"wordCount\":2525,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/\",\"name\":\"Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6 - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"datePublished\":\"2024-07-05T07:31:35+00:00\",\"dateModified\":\"2024-07-12T09:57:22+00:00\",\"description\":\"Apprenez les principales mises \u00e0 jour, les conseils de compatibilit\u00e9 et les meilleures pratiques pour assurer une transition en douceur et am\u00e9liorer les performances de votre site web.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"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\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6 - Kinsta\u00ae","description":"Apprenez les principales mises \u00e0 jour, les conseils de compatibilit\u00e9 et les meilleures pratiques pour assurer une transition en douceur et am\u00e9liorer les performances de votre site web.","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\/fr\/blog\/react-19-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6","og_description":"Apprenez les principales mises \u00e0 jour, les conseils de compatibilit\u00e9 et les meilleures pratiques pour assurer une transition en douceur et am\u00e9liorer les performances de votre site web.","og_url":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-07-05T07:31:35+00:00","article_modified_time":"2024-07-12T09:57:22+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/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":"Apprenez les principales mises \u00e0 jour, les conseils de compatibilit\u00e9 et les meilleures pratiques pour assurer une transition en douceur et am\u00e9liorer les performances de votre site web.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users-1024x512.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6","datePublished":"2024-07-05T07:31:35+00:00","dateModified":"2024-07-12T09:57:22+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/"},"wordCount":2525,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/","url":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/","name":"Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6 - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","datePublished":"2024-07-05T07:31:35+00:00","dateModified":"2024-07-12T09:57:22+00:00","description":"Apprenez les principales mises \u00e0 jour, les conseils de compatibilit\u00e9 et les meilleures pratiques pour assurer une transition en douceur et am\u00e9liorer les performances de votre site web.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/react-19-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/fr\/sujets\/react\/"},{"@type":"ListItem","position":3,"name":"Se pr\u00e9parer \u00e0 React 19 : un guide pour les utilisateurs de WordPress 6.6"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","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\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/77423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=77423"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/77423\/revisions"}],"predecessor-version":[{"id":77482,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/77423\/revisions\/77482"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77423\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77423\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77423\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77423\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77423\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77423\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77423\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77423\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77423\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/77424"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=77423"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=77423"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=77423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}