diff --git a/TRANSLATORS.md b/TRANSLATORS.md
index aae7b7305..e4ed9bf3d 100644
--- a/TRANSLATORS.md
+++ b/TRANSLATORS.md
@@ -135,6 +135,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
Blog : Découvrez react.dev
Blog : React Labs juin 2022
Blog : React v18.0
+ Blog : Comment migrer sur React 18
Avertissement : prop ARIA invalide
Avertissement : règles des Hooks
Avertissement : props à traitement spécial
diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md
index 29ba0b71d..74d3634cb 100644
--- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md
+++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md
@@ -1,44 +1,44 @@
---
-title: "How to Upgrade to React 18"
+title: "Comment migrer sur React 18"
---
-March 08, 2022 by [Rick Hanlon](https://twitter.com/rickhanlonii)
+Le 8 mars 2022 par [Rick Hanlon](https://twitter.com/rickhanlonii)
---
-As we shared in the [release post](/blog/2022/03/29/react-v18), React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18.
+Comme nous l'avons annoncé dans le [billet de sortie](/blog/2022/03/29/react-v18), React 18 introduit des fonctionnalités basées sur notre nouveau moteur de rendu concurrent, avec une statégie d'adoption graduelle pour les applications existantes. Dans ce billet, nous vous guidons étape par étape dans votre migration sur React 18.
-Please [report any issues](https://github.com/facebook/react/issues/new/choose) you encounter while upgrading to React 18.
+Merci de nous [signaler tout problème](https://github.com/facebook/react/issues/new/choose) que vous rencontreriez en migrant sur React 18.
-For React Native users, React 18 will ship in a future version of React Native. This is because React 18 relies on the New React Native Architecture to benefit from the new capabilities presented in this blogpost. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s).
+Concernant les utilisateurs de React Native, React 18 sera livré dans une future version de React Native. C'est parce que React 18 repose sur la nouvelle architecture de React Native pour mettre en œuvre les nouvelles fonctionnalités présentées dans ce billet. Pour plus d'informations, regardez la [plénière d'ouverture de la React Conf](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s).
---
-## Installing {/*installing*/}
+## Installation {/*installing*/}
-To install the latest version of React:
+Pour installer la dernière version de React, faites :
```bash
npm install react react-dom
```
-Or if you’re using yarn:
+Ou si vous utilisez Yarn :
```bash
yarn add react react-dom
```
-## Updates to Client Rendering APIs {/*updates-to-client-rendering-apis*/}
+## Évolutions des API de rendu côté client {/*updates-to-client-rendering-apis*/}
-When you first install React 18, you will see a warning in the console:
+Lorsque vous installerez React 18 pour la première fois, vous verrez cet avertissement dans la console :
@@ -46,44 +46,46 @@ ReactDOM.render is no longer supported in React 18. Use createRoot instead. Unti
-React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.
+*(« ReactDOM.render n'est plus pris en charge dans React 18. Utilisez plutôt createRoot. Tant que vous ne basculerez pas vers la nouvelle API, votre appli se comportera comme si elle utilisait React 17. Apprenez-en davantage ici : https://reactjs.org/link/switch-to-createroot », NdT)*
+
+React 18 propose une nouvelle API dotée d'une bien meilleure ergonomie pour gérer les racines applicatives. Cette nouvelle API permet également le recours au nouveau moteur de rendu concurrent, et donc aux fonctionnalités concurrentes.
```js
-// Before
+// Avant
import { render } from 'react-dom';
const container = document.getElementById('app');
render(, container);
-// After
+// Après
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
-const root = createRoot(container); // createRoot(container!) if you use TypeScript
+const root = createRoot(container); // createRoot(container!) si vous utilisez TypeScript
root.render();
```
-We’ve also changed `unmountComponentAtNode` to `root.unmount`:
+Nous passons aussi de `unmountComponentAtNode` à `root.unmount` :
```js
-// Before
+// Avant
unmountComponentAtNode(container);
-// After
+// Après
root.unmount();
```
-We've also removed the callback from render, since it usually does not have the expected result when using Suspense:
+La fonction de rappel de `render` a également disparu, dans la mesure où elle n'a généralement pas le résultat attendu lorsqu'on utilise Suspense :
```js
-// Before
+// Avant
const container = document.getElementById('app');
render(, container, () => {
- console.log('rendered');
+ console.log('rendu effectué');
});
-// After
+// Après
function AppWithCallbackAfterRender() {
useEffect(() => {
- console.log('rendered');
+ console.log('rendu effectué');
});
return
@@ -96,59 +98,64 @@ root.render();
-There is no one-to-one replacement for the old render callback API — it depends on your use case. See the working group post for [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) for more information.
+Il n'y a pas d'alternative exacte à l'ancienne fonction de rappel de l'API de rendu racine ; tout dépend de votre cas d'utilisation. Consultez la discussion du groupe de travail sur [le remplacement de `render` par `createRoot`](https://github.com/reactwg/react-18/discussions/5) pour en apprendre davantage.
-Finally, if your app uses server-side rendering with hydration, upgrade `hydrate` to `hydrateRoot`:
+Pour finir, si votre appli utilise le rendu côté serveur avec l'hydratation, remplacez `hydrate` par `hydrateRoot` :
```js
-// Before
+// Avant
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(, container);
-// After
+// Après
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, );
-// Unlike with createRoot, you don't need a separate root.render() call here.
+// Contrairement à createRoot, vous n’avez ici pas besoin d’un appel
+// distinct à root.render()
```
-For more information, see the [working group discussion here](https://github.com/reactwg/react-18/discussions/5).
+Pour en apprendre davantage, consultez [cette discussion du groupe de travail](https://github.com/reactwg/react-18/discussions/5).
-**If your app doesn't work after upgrading, check whether it's wrapped in ``.** [Strict Mode has gotten stricter in React 18](#updates-to-strict-mode), and not all your components may be resilient to the new checks it adds in development mode. If removing Strict Mode fixes your app, you can remove it during the upgrade, and then add it back (either at the top or for a part of the tree) after you fix the issues that it's pointing out.
+**Si votre appli ne fonctionne plus après la migration, vérifiez si elle est enrobée par ``.** [Le mode strict est plus strict en React 18](#updates-to-strict-mode), et tous vos composants ne sont pas forcément conformes aux nouvelles vérifications qu'il effectue en mode développement. Si le retrait du mode strict fait refonctionner votre appli, vous pouvez le retirer pendant la migration puis le rajouter à la fin (soit à la racine soit sur une partie de l'arbre), après que vous aurez corrigé les problèmes qu'il met en lumière.
-## Updates to Server Rendering APIs {/*updates-to-server-rendering-apis*/}
+## Évolutions des API de rendu côté serveur {/*updates-to-server-rendering-apis*/}
+
+Cette version a repensé les API de `react-dom/server` pour prendre pleinement en charge Suspense côté serveur, ainsi que le rendu streamé côté serveur. Dans ce cadre, nous déprécions l'ancienne API de streaming basée Node, qui ne permettait pas un streaming incrémental côté serveur grâce à Suspense.
+
+Le recours à cette ancienne API entraînera un avertissement :
+
+* `renderToNodeStream` : **déprécié ⛔️️**
-In this release, we’re revamping our `react-dom/server` APIs to fully support Suspense on the server and Streaming SSR. As part of these changes, we're deprecating the old Node streaming API, which does not support incremental Suspense streaming on the server.
+Pour des environnements de streaming basés Node, utilisez plutôt :
-Using this API will now warn:
+* `renderToPipeableStream` : **nouveau ✨**
-* `renderToNodeStream`: **Deprecated ⛔️️**
+Nous avons aussi ajouté une nouvelle API permettant le rendu streamé côté serveur avec Suspense pour les moteurs JavaScript plus modernes, tels que Deno ou les Cloudflare Workers :
-Instead, for streaming in Node environments, use:
-* `renderToPipeableStream`: **New ✨**
+* `renderToReadableStream` : **nouveau ✨**
-We're also introducing a new API to support streaming SSR with Suspense for modern edge runtime environments, such as Deno and Cloudflare workers:
-* `renderToReadableStream`: **New ✨**
+Les API suivantes continuent de fonctionner, mais ne prennent que partiellement Suspense en charge :
-The following APIs will continue working, but with limited support for Suspense:
-* `renderToString`: **Limited** ⚠️
-* `renderToStaticMarkup`: **Limited** ⚠️
+* `renderToString` : **limité** ⚠️
+* `renderToStaticMarkup` : **limité** ⚠️
+
+Enfin, cette API continuera à fonctionner pour par exemple produire des e-mails :
-Finally, this API will continue to work for rendering e-mails:
* `renderToStaticNodeStream`
-For more information on the changes to server rendering APIs, see the working group post on [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), a [deep dive on the new Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37), and [Shaundai Person’s](https://twitter.com/shaundai) talk on [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) at React Conf 2021.
+Pour de plus amples informations sur les évolutions des API de rendu côté serveur, consultez la discussion du groupe de travail sur [la migration sur React 18 côté serveur](https://github.com/reactwg/react-18/discussions/22), une [exploration en profondeur de la nouvelle architecture de SSR avec Suspense](https://github.com/reactwg/react-18/discussions/37), et la présentation de [Shaundai Person](https://twitter.com/shaundai) sur le [rendu streamé côté serveur avec Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) à la React Conf 2021.
-## Updates to TypeScript definitions {/*updates-to-typescript-definitions*/}
+## Évolutions des définitions TypeScript {/*updates-to-typescript-definitions*/}
-If your project uses TypeScript, you will need to update your `@types/react` and `@types/react-dom` dependencies to the latest versions. The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the `children` prop now needs to be listed explicitly when defining props, for example:
+Si votre projet utilise TypeScript, vous devrez mettre à jour vos dépendances `@types/react` et `@types/react-dom` sur leurs dernières versions. Les nouveaux types sont plus fiables et détectent des erreurs auparavant ignorées par la vérification de types. L'évolution la plus visible tient à ce que la prop `children` doit désormais être listée explicitement quand vous définissez vos props, par exemple comme ceci :
```typescript{3}
interface MyButtonProps {
@@ -157,51 +164,51 @@ interface MyButtonProps {
}
```
-See the [React 18 typings pull request](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) for a full list of type-only changes. It links to example fixes in library types so you can see how to adjust your code. You can use the [automated migration script](https://github.com/eps1lon/types-react-codemod) to help port your application code to the new and safer typings faster.
+Consultez la [*pull request* des types de React 18](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) pour une liste complète des évolutions de typage. Elle comporte des liens vers des corrections de types dans des bibliothèques dont vous pouvez vous inspirer pour ajuster votre code. Vous pouvez aussi utiliser le [script de migration automatique](https://github.com/eps1lon/types-react-codemod) pour vous aider à adapter votre code applicatif afin de bénéficier de typages plus fiables et plus rapides.
-If you find a bug in the typings, please [file an issue](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package) in the DefinitelyTyped repo.
+Si vous remarquez un bug dans les typages, merci de [créer un ticket](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package) sur le dépôt DefinitelyTyped.
-## Automatic Batching {/*automatic-batching*/}
+## Traitement par lots automatique {/*automatic-batching*/}
-React 18 adds out-of-the-box performance improvements by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Before React 18, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default:
+React 18 améliore automatiquement les performances en utilisant plus de traitements par lot par défaut. On parle de traitements par lots lorsque React regroupe plusieurs mises à jour d'état au sein d'un seul recalcul de rendu pour améliorer les performances. Avant React 18, nous ne regroupions que les mises à jour d'état déclenchées au sein des gestionnaires d'événements React. Celles qui venaient par exemple de promesses, de `setTimeout`, de gestionnaires d'événements natifs ou de tout autre déclencheur n'étaient par défaut pas regroupées par React :
```js
-// Before React 18 only React events were batched
+// Avant React 18 seuls les événéments React utilisaient le regroupement
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
- // React will only re-render once at the end (that's batching!)
+ // React ne fera qu’un rendu à la fin (traitement par lot !)
}
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
- // React will render twice, once for each state update (no batching)
+ // React fera deux rendus, un pour chaque mise à jour d’état
+ // (pas de regroupement)
}, 1000);
```
-
-Starting in React 18 with `createRoot`, all updates will be automatically batched, no matter where they originate from. This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events:
+À partir de React 18 et si vous utilisez `createRoot`, toutes les mises à jour sont automatiquement regroupées, peu importe leur origine. Ça signifie que les mises à jour au sein de timers, de promesses, de gestionnaires d'événements natifs ou de tout autre déclencheur seront regroupées au même titre que celles dans des événements React :
```js
-// After React 18 updates inside of timeouts, promises,
-// native event handlers or any other event are batched.
+// Avec React 18 les mises à jour dans les timers, promesses, gestionnaires
+// d’événements natifs et tout autre déclencheur utilisent le regroupement.
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
- // React will only re-render once at the end (that's batching!)
+ // React ne fera qu’un rendu à la fin (traitement par lot !)
}
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
- // React will only re-render once at the end (that's batching!)
+ // React ne fera qu’un rendu à la fin (traitement par lot !)
}, 1000);
```
-This is a breaking change, but we expect this to result in less work rendering, and therefore better performance in your applications. To opt-out of automatic batching, you can use `flushSync`:
+Il s'agit d'une rupture de compatibilité ascendante *(breaking change, NdT)*, mais nous estimons que ça entraînera moins de rendus, et donc de meilleures performances pour vos applications. Pour éviter le regroupement automatique, vous pouvez toujours utiliser `flushSync` :
```js
import { flushSync } from 'react-dom';
@@ -210,60 +217,60 @@ function handleClick() {
flushSync(() => {
setCounter(c => c + 1);
});
- // React has updated the DOM by now
+ // React a mis à jour le DOM à ce stade
flushSync(() => {
setFlag(f => !f);
});
- // React has updated the DOM by now
+ // React a mis à jour le DOM à ce stade
}
```
-For more information, see the [Automatic batching deep dive](https://github.com/reactwg/react-18/discussions/21).
+Pour en apprendre davantage, consultez cette [explication détaillée du traitement par lots automatique](https://github.com/reactwg/react-18/discussions/21).
-## New APIs for Libraries {/*new-apis-for-libraries*/}
+## Nouvelles API à destination des bibliothèques {/*new-apis-for-libraries*/}
-In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs:
+Au sein du groupe de travail React 18, nous avons collaboré avec des mainteneurs de bibliothèques pour créer de nouvelles API nécessaires à la prise en charge du rendu concurrent dans des cas d'utilisation spécifiques à leurs domaines, tels que les styles et les sources de données extérieures. Pour prendre en charge React 18, certaines bibliothèques auront peut-être besoin de basculer vers l'une des API que voici :
-* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
-* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `