(instance = current)} />
+
{instance = current}} />
```
-The original code returned the instance of the `HTMLDivElement` and TypeScript wouldn't know if this was _supposed_ to be a cleanup function or if you didn't want to return a cleanup function.
+Le code original renvoyait l'instance de `HTMLDivElement` et TypeScript ne pouvait savoir si le résultat était _censé_ être une fonction de nettoyage, ou si vous n'aviez pas l'intention de renvoyer quoi que ce soit.
-You can codemod this pattern with [`no-implicit-ref-callback-return`](https://github.com/eps1lon/types-react-codemod/#no-implicit-ref-callback-return).
+Vous pouvez corriger ce motif de code avec le codemod [`no-implicit-ref-callback-return`](https://github.com/eps1lon/types-react-codemod/#no-implicit-ref-callback-return).
-### `useDeferredValue` initial value {/*use-deferred-value-initial-value*/}
+### `useDeferredValue` accepte une valeur initiale {/*use-deferred-value-initial-value*/}
-We've added an `initialValue` option to `useDeferredValue`:
+Nous avons ajouté une `initialValue` optionnelle à `useDeferredValue` :
```js [[1, 1, "deferredValue"], [1, 4, "deferredValue"], [2, 4, "''"]]
function Search({deferredValue}) {
- // On initial render the value is ''.
- // Then a re-render is scheduled with the deferredValue.
+ // Au rendu initial la valeur est ''.
+ // Un rendu ultérieur sera planifié avec `deferredValue`.
const value = useDeferredValue(deferredValue, '');
return (
);
}
-````
+```
-When initialValue is provided, `useDeferredValue` will return it as `value` for the initial render of the component, and schedules a re-render in the background with the deferredValue returned.
+Lorsqu'initialValue est fournie, `useDeferredValue` la renvoie comme `value` pour le rendu initial du composant, et planifie un nouveau rendu en arrière-plan, lors duquel elle renverra deferredValue.
-For more, see [`useDeferredValue`](/reference/react/useDeferredValue).
+Pour en apprendre davantage, consultez la documentation de [`useDeferredValue`](/reference/react/useDeferredValue).
-### Support for Document Metadata {/*support-for-metadata-tags*/}
+### Prise en charge des métadonnées du document {/*support-for-metadata-tags*/}
-In HTML, document metadata tags like `
`, `<link>`, and `<meta>` are reserved for placement in the `<head>` section of the document. In React, the component that decides what metadata is appropriate for the app may be very far from the place where you render the `<head>` or React does not render the `<head>` at all. In the past, these elements would need to be inserted manually in an effect, or by libraries like [`react-helmet`](https://github.com/nfl/react-helmet), and required careful handling when server rendering a React application.
+En HTML, les balises de métadonnées du document telles que `<title>`, `<link>` et `<meta>` ne peuvent être placées que dans la section `<head>` du document. Avec React, le composant qui décide de quelles métadonnées sont pertinentes pour l'appli est généralement bien éloigné de l'endroit où vous définissez `<head>`. Par le passé, ces éléments auraient nécessité une insertion manuelle dans un Effet, ou au travers de bibliothèques telles que [`react-helmet`](https://github.com/nfl/react-helmet), et auraient nécessité quelques précautions lors du rendu côté serveur d'une application React.
-In React 19, we're adding support for rendering document metadata tags in components natively:
+React 19 prend désormais nativement en charge le rendu de métadonnées du document depuis vos composants :
```js {5-8}
function BlogPost({post}) {
@@ -544,35 +541,35 @@ function BlogPost({post}) {
<link rel="author" href="https://twitter.com/joshcstory/" />
<meta name="keywords" content={post.keywords} />
<p>
- Eee equals em-see-squared...
+ E égale m c au carré...
</p>
</article>
);
}
```
-When React renders this component, it will see the `<title>` `<link>` and `<meta>` tags, and automatically hoist them to the `<head>` section of document. By supporting these metadata tags natively, we're able to ensure they work with client-only apps, streaming SSR, and Server Components.
+Lorsque React fait le rendu de ce composant, il voit les balises `<title>`, `<link>` et `<meta>`, et les remonte automatiquement dans la section `<head>` du document. En prenant nativement en charge ces métadonnées, nous nous assurons au passage qu'elles fonctionnent aussi bien dans les applis entièrement côté client que dans des flux SSR ou des Composants Serveur.
<Note>
-#### You may still want a Metadata library {/*you-may-still-want-a-metadata-library*/}
+#### Vous aurez peut-être encore besoin d'une bibliothèque de métadonnées {/*you-may-still-want-a-metadata-library*/}
-For simple use cases, rendering Document Metadata as tags may be suitable, but libraries can offer more powerful features like overriding generic metadata with specific metadata based on the current route. These features make it easier for frameworks and libraries like [`react-helmet`](https://github.com/nfl/react-helmet) to support metadata tags, rather than replace them.
+Pour les cas simples, effectuer le rendu des métadonnées du document sous forme de balises est certes acceptable, mais les bibliothèques peuvent offrir des fonctionnalités plus avancées telles que la surcharge de métadonnées génériques par des valeurs spécifiques basées sur la route active. Ce que nous fournissons nativement facilite l'implémentation de frameworks et bibliothèques tels que [`react-helmet`](https://github.com/nfl/react-helmet), sans pour autant les remplacer.
</Note>
-For more info, see the docs for [`<title>`](/reference/react-dom/components/title), [`<link>`](/reference/react-dom/components/link), and [`<meta>`](/reference/react-dom/components/meta).
+Pour en apprendre davantage, consultez les documentations de [`<title>`](/reference/react-dom/components/title), [`<link>`](/reference/react-dom/components/link) et [`<meta>`](/reference/react-dom/components/meta).
-### Support for stylesheets {/*support-for-stylesheets*/}
+### Prise en charge des feuilles de styles {/*support-for-stylesheets*/}
-Stylesheets, both externally linked (`<link rel="stylesheet" href="...">`) and inline (`<style>...</style>`), require careful positioning in the DOM due to style precedence rules. Building a stylesheet capability that allows for composability within components is hard, so users often end up either loading all of their styles far from the components that may depend on them, or they use a style library which encapsulates this complexity.
+Les feuilles de styles, tant en variante externe (`<link rel="stylesheet" href="...">`) qu'intégrée (`<style>...</style>`), requièrent un emplacement adéquat dans le DOM en raison des règles de précédence de styles. Il n'est pas aisé de construire une gestion de feuilles de styles permettant la composabilité au sein des composants, de sorte que les utilisateurs se retrouvent souvent à charger tous leurs styles séparément des composants susceptibles d'en dépendre, ou à recourir à une bibliothèque de styles qui masque cette complexité.
-In React 19, we're addressing this complexity and providing even deeper integration into Concurrent Rendering on the Client and Streaming Rendering on the Server with built in support for stylesheets. If you tell React the `precedence` of your stylesheet it will manage the insertion order of the stylesheet in the DOM and ensure that the stylesheet (if external) is loaded before revealing content that depends on those style rules.
+Avec React 19, nous gérons cette complexité et proposons une intégration plus étroite encore avec le Rendu Concurrent côté client, et les flux de rendu côté serveur, grâce à une prise en charge native des feuilles de styles. Si vous indiquez à React la `precedence` de votre feuille de styles, il gèrera son ordre d'insertion dans le DOM et s'assurera que la feuille de styles (si elle est externe) est bien chargée avant d'afficher du contenu qui dépende des règles de style ainsi obtenues.
```js {4,5,17}
function ComponentOne() {
return (
- <Suspense fallback="loading...">
+ <Suspense fallback="Chargement...">
<link rel="stylesheet" href="foo" precedence="default" />
<link rel="stylesheet" href="bar" precedence="high" />
<article class="foo-class bar-class">
@@ -586,44 +583,44 @@ function ComponentTwo() {
return (
<div>
<p>{...}</p>
- <link rel="stylesheet" href="baz" precedence="default" /> <-- will be inserted between foo & bar
+ <link rel="stylesheet" href="baz" precedence="default" /> <-- sera insérée entre foo et bar
</div>
)
}
```
-During Server Side Rendering React will include the stylesheet in the `<head>`, which ensures that the browser will not paint until it has loaded. If the stylesheet is discovered late after we've already started streaming, React will ensure that the stylesheet is inserted into the `<head>` on the client before revealing the content of a Suspense boundary that depends on that stylesheet.
+Lors du rendu côté serveur *(SSR, Server-Side Rendering — NdT)*, React inclura la feuille de styles dans le `<head>`, ce qui garantira que le navigateur n'affichera rien jusqu'à son chargement. Si la feuille de styles est découverte tardivement après le début du flux de réponse, React s'assurera que la feuille de styles est insérée dans le `<head>` du client avant de révéler le contenu du périmètre Suspense qui dépend de cette feuille de styles.
-During Client Side Rendering React will wait for newly rendered stylesheets to load before committing the render. If you render this component from multiple places within your application React will only include the stylesheet once in the document:
+Lors du rendu côté client, React attendra que les feuilles de styles nouvellement injectées soient chargées avant de finaliser le rendu (phase de commit). Si vous affichez ce composant à de multiples endroits dans votre application, React n'inclura la feuille de styles qu'une seule fois dans le document :
```js {5}
function App() {
return <>
<ComponentOne />
...
- <ComponentOne /> // won't lead to a duplicate stylesheet link in the DOM
+ <ComponentOne /> // n’entraînera pas d’élément `link` dupliqué dans le DOM
</>
}
```
-For users accustomed to loading stylesheets manually this is an opportunity to locate those stylesheets alongside the components that depend on them allowing for better local reasoning and an easier time ensuring you only load the stylesheets that you actually depend on.
+Si vous êtes habitué·e à charger vos feuilles de styles manuellement, c'est l'occasion de placer ces feuilles de styles à côté des composants qui en dépendent, ce qui facilite un raisonnement local et permet de ne charger que les feuilles de styles dont vous avez effectivement besoin.
-Style libraries and style integrations with bundlers can also adopt this new capability so even if you don't directly render your own stylesheets, you can still benefit as your tools are upgraded to use this feature.
+Les bibliothèques de styles et les intégrations de styles par les *bundlers* peuvent aussi s'appuyer sur cette nouvelle fonctionnalité, de sorte que même si vous ne réalisez pas directement le rendu de vos feuilles de styles, vous pourriez en bénéficier une fois l'outillage mis à jour pour en tirer parti.
-For more details, read the docs for [`<link>`](/reference/react-dom/components/link) and [`<style>`](/reference/react-dom/components/style).
+Pour en apprendre davantage, consultez les documentations de [`<link>`](/reference/react-dom/components/link) et [`<style>`](/reference/react-dom/components/style).
-### Support for async scripts {/*support-for-async-scripts*/}
+### Prise en charge des scripts asynchrones {/*support-for-async-scripts*/}
-In HTML normal scripts (`<script src="...">`) and deferred scripts (`<script defer="" src="...">`) load in document order which makes rendering these kinds of scripts deep within your component tree challenging. Async scripts (`<script async="" src="...">`) however will load in arbitrary order.
+En HTML, les scripts normaux (`<script src="...">`) et différés (`<script defer="" src="...">`) sont chargés dans l'ordre du document, ce qui rend délicate leur injection dynamique au sein de votre arbre de composants. Les scripts asynchrones (`<script async="" src="...">`) sont en revanche chargés dans un ordre quelconque.
-In React 19 we've included better support for async scripts by allowing you to render them anywhere in your component tree, inside the components that actually depend on the script, without having to manage relocating and deduplicating script instances.
+Avec React 19, nous avons ajouté une meilleure prise en charge des scripts asynchrones en vous permettant de faire leur rendu à n'importe quel endroit de l'arbre de composants, au sein des composants qui se servent effectivement du script, sans avoir à gérer leur déplacement ni leur dédoublonnement.
```js {4,15}
function MyComponent() {
return (
<div>
<script async={true} src="..." />
- Hello World
+ Salut tout le monde
</div>
)
}
@@ -633,39 +630,40 @@ function App() {
<body>
<MyComponent>
...
- <MyComponent> // won't lead to duplicate script in the DOM
+ <MyComponent> // n’entraînera pas d’élément `script` dupliqué dans le DOM
</body>
</html>
}
```
-In all rendering environments, async scripts will be deduplicated so that React will only load and execute the script once even if it is rendered by multiple different components.
+Quel que soit l'environnement de rendu, les scripts asynchrones seront dédoublonnés afin que React ne charge et n'exécute le script qu'une seule fois, même s'ils figurent dans les rendus de plusieurs composants distincts.
-In Server Side Rendering, async scripts will be included in the `<head>` and prioritized behind more critical resources that block paint such as stylesheets, fonts, and image preloads.
+Pour le rendu côté serveur, les scripts asynchrones sont inclus dans le `<head>` et dépriorisés par rapport à des ressources plus critiques qui bloqueraient l'affichage, tels que les feuilles de styles, fontes et images préchargées.
-For more details, read the docs for [`<script>`](/reference/react-dom/components/script).
+Pour en apprendre davantage, consultez la documentation de [`<script>`](/reference/react-dom/components/script).
-### Support for preloading resources {/*support-for-preloading-resources*/}
+### Prise en charge du préchargement de ressources {/*support-for-preloading-resources*/}
-During initial document load and on client side updates, telling the Browser about resources that it will likely need to load as early as possible can have a dramatic effect on page performance.
+Lors du chargement initial du document et des mises à jour côté client, le fait d'indiquer au navigateur quelles ressources il devrait probablement charger le plus tôt possible peut dramatiquement améliorer les performances de la page.
-React 19 includes a number of new APIs for loading and preloading Browser resources to make it as easy as possible to build great experiences that aren't held back by inefficient resource loading.
+React 19 fournit une série de nouvelles fonctions pour charger voire précharger des ressources navigateur, afin de faciliter au mieux la construction d'expériences utilisateur haut de gamme qui ne soient pas gênées par un chargement inefficace des ressources.
```js
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'
function MyComponent() {
- preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly
- preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font
- preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet
- prefetchDNS('https://...') // when you may not actually request anything from this host
- preconnect('https://...') // when you will request something but aren't sure what
+ preinit('https://.../path/to/some/script.js', {as: 'script' }) // charge et exécute le script au plus tôt
+ preload('https://.../path/to/font.woff', { as: 'font' }) // précharge cette fonte
+ preload('https://.../path/to/stylesheet.css', { as: 'style' }) // précharge cette feuille de styles
+ prefetchDNS('https://...') // si vous n’êtes pas certain·e de charger quelque chose depuis cet hôte
+ preconnect('https://...') // si vous allez y charger quelque chose, mais n’êtes pas sûr·e de quoi
}
```
```html
-<!-- the above would result in the following DOM/HTML -->
+<!-- le code ci-dessus produirait le DOM/HTML suivant -->
<html>
<head>
- <!-- links/scripts are prioritized by their utility to early loading, not call order -->
+ <!-- les `link`/`script` sont priorisés selon leur utilité pour le chargement rapide,
+ et non selon leur ordre d’appel -->
<link rel="prefetch-dns" href="https://...">
<link rel="preconnect" href="https://...">
<link rel="preload" as="font" href="https://.../path/to/font.woff">
@@ -678,23 +676,23 @@ function MyComponent() {
</html>
```
-These APIs can be used to optimize initial page loads by moving discovery of additional resources like fonts out of stylesheet loading. They can also make client updates faster by prefetching a list of resources used by an anticipated navigation and then eagerly preloading those resources on click or even on hover.
+Ces fonctions peuvent être utilisées pour optimiser le chargement initial de la page en faisant remonter la découverte de ressources additionnelles, telles que les fontes, avant le chargement des feuilles de styles. Elles peuvent aussi accélérer les mises à jour côté client en pré-résolvant une série de ressources qu'utilisera une navigation, puis en préchargeant agressivement ces ressources lors du clic voire du survol.
-For more details see [Resource Preloading APIs](/reference/react-dom#resource-preloading-apis).
+Pour en apprendre davantage, consultez [API de préchargement de ressources](/reference/react-dom#resource-preloading-apis).
-### Compatibility with third-party scripts and extensions {/*compatibility-with-third-party-scripts-and-extensions*/}
+### Compatibilité avec les scripts et extensions tiers {/*compatibility-with-third-party-scripts-and-extensions*/}
-We've improved hydration to account for third-party scripts and browser extensions.
+Nous avons amélioré l'hydratation pour tenir compte des scripts et extensions de navigateur tiers.
-When hydrating, if an element that renders on the client doesn't match the element found in the HTML from the server, React will force a client re-render to fix up the content. Previously, if an element was inserted by third-party scripts or browser extensions, it would trigger a mismatch error and client render.
+Lors de l'hydratation, si un élément rendu côté client ne correspond pas à celui trouvé dans le HTML fourni par le serveur, React force un nouveau rendu client pour corriger le contenu. Auparavant, si un élément était injecté par des scripts ou extensions tiers, ça constituait une telle discordance et entraînait donc un nouveau rendu client.
-In React 19, unexpected tags in the `<head>` and `<body>` will be skipped over, avoiding the mismatch errors. If React needs to re-render the entire document due to an unrelated hydration mismatch, it will leave in place stylesheets inserted by third-party scripts and browser extensions.
+Avec React 19, les balises inattendues dans `<head>` et `<body>` sont ignorées, ce qui évite des discordances. Si React a besoin de refaire le rendu du document entier en raison d'une autre discordance d'hydratation, il laissera en place les feuilles de styles injectées par les scripts et extensions tiers.
-### Better error reporting {/*error-handling*/}
+### Meilleur signalement d'erreurs {/*error-handling*/}
-We improved error handling in React 19 to remove duplication and provide options for handling caught and uncaught errors. For example, when there's an error in render caught by an Error Boundary, previously React would throw the error twice (once for the original error, then again after failing to automatically recover), and then call `console.error` with info about where the error occurred.
+Nous avons amélioré la gestion d'erreurs dans React 19 pour retirer les doublons et fournir des options pour gérer vous-même les erreurs interceptées ou non interceptées. Lorsque par exemple une erreur survenue lors d'un rendu est interceptée par un Périmètre d'Erreurs, auparavant React aurait levé l'erreur deux fois (une pour l'erreur originale, puis une autre après avoir échoué à retomber sur ses pieds), pour finir par appeler `console.error` avec des infos d'emplacement pour l'erreur.
-This resulted in three errors for every caught error:
+Ça donnait trois erreurs listées pour chaque erreur interceptée :
<ConsoleBlockMulti>
@@ -709,7 +707,7 @@ Uncaught Error: hit
<ConsoleLogLine level="error">
-Uncaught Error: hit<span className="ms-2 text-gray-30">{' <--'} Duplicate</span>
+Uncaught Error: hit<span className="ms-2 text-gray-30">{' <--'} Doublon</span>
{' '}at Throws
{' '}at renderWithHooks
{' '}...
@@ -728,7 +726,7 @@ React will try to recreate this component tree from scratch using the error boun
</ConsoleBlockMulti>
-In React 19, we log a single error with all the error information included:
+Avec React 19, nous signalons une seule erreur avec toutes les infos déjà présentes :
<ConsoleBlockMulti>
@@ -750,28 +748,25 @@ React will try to recreate this component tree from scratch using the error boun
</ConsoleBlockMulti>
-Additionally, we've added two new root options to complement `onRecoverableError`:
-
-- `onCaughtError`: called when React catches an error in an Error Boundary.
-- `onUncaughtError`: called when an error is thrown and not caught by an Error Boundary.
-- `onRecoverableError`: called when an error is thrown and automatically recovered.
-
-For more info and examples, see the docs for [`createRoot`](/reference/react-dom/client/createRoot) and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot).
-
-### Support for Custom Elements {/*support-for-custom-elements*/}
+Qui plus est, nous avons ajouté deux nouvelles options racines en complément de `onRecoverableError` :
-React 19 adds full support for custom elements and passes all tests on [Custom Elements Everywhere](https://custom-elements-everywhere.com/).
+- `onCaughtError` : appelée lorsque React intercepte une erreur avec un Périmètre d'Erreurs.
+- `onUncaughtError` : appelée lorsque l'erreur est levée mais non interceptée par un Périmètre d'Erreurs.
+- `onRecoverableError` : appelée lorsque l'erreur est levée mais que React retombe sur ses pieds.
-In past versions, using Custom Elements in React has been difficult because React treated unrecognized props as attributes rather than properties. In React 19, we've added support for properties that works on the client and during SSR with the following strategy:
+Pour en apprendre davantage et voir d'autres exemples, consultez les documentations de [`createRoot`](/reference/react-dom/client/createRoot) et [`hydrateRoot`](/reference/react-dom/client/hydrateRoot).
-- **Server Side Rendering**: props passed to a custom element will render as attributes if their type is a primitive value like `string`, `number`, or the value is `true`. Props with non-primitive types like `object`, `symbol`, `function`, or value `false` will be omitted.
-- **Client Side Rendering**: props that match a property on the Custom Element instance will be assigned as properties, otherwise they will be assigned as attributes.
+### Prise en charge des *Custom Elements* {/*support-for-custom-elements*/}
-Thanks to [Joey Arhar](https://github.com/josepharhar) for driving the design and implementation of Custom Element support in React.
+React 19 prend désormais pleinement en charge les éléments personnalisés *(Custom Elements, nécessaires aux Web Components natifs, NdT)* et passe tous les tests de [Custom Elements Everywhere](https://custom-elements-everywhere.com/).
+Dans les précédentes versions, utiliser des éléments personnalisés dans React s'avérait difficile parce que React traitait les props non reconnues comme des attributs plutôt que comme des props. Avec React 19, nous avons ajouté une prise en charge des props qui fonctionne côté client et lors du SSR selon la stratégie suivante :
-#### How to upgrade {/*how-to-upgrade*/}
-See the [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide) for step-by-step instructions and a full list of breaking and notable changes.
+- **Côté serveur** : les props passées à un élément personnalisé produisent des attributs si leur type est primitif (ex. `string`, `number`) ou si la valeur est `true`. Les props de type non primitif tels qu’`object`, `symbol`, `function` ainsi que la valeur `false` sont ignorés.
+- **Côté client** : les props qui correspondent à une propriété de l'instance de l'élément personnalisé sont affectées à ces propriétés, à défaut de quoi elles produisent des attributs.
+Merci à [Joey Arhar](https://github.com/josepharhar) pour avoir piloté la conception et l'implémentation de la prise en charge des éléments personnalisés dans React.
+## Comment mettre à jour {/*how-to-upgrade*/}
+Consultez le [guide de migration React 19](/blog/2024/04/25/react-19-upgrade-guide) pour des instructions pas à pas et la liste complète des ruptures de compatibilité ascendante et des changements notables.
\ No newline at end of file
diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md
index 24edcaa4b..46063b260 100644
--- a/src/content/blog/2024/05/22/react-conf-2024-recap.md
+++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md
@@ -83,7 +83,7 @@ Regardez le flux intégral du jour 2 ici :
## Q&R {/*q-and-a*/}
-Les équipes React et Reaxct Native ont conclu chaque journée par une session de questions-réponses :
+Les équipes React et React Native ont conclu chaque journée par une session de questions-réponses :
- [React Q&A](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=27518s) modérée par [Michael Chan](https://twitter.com/chantastic)
- [React Native Q&A](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=27935s) modérée par [Jamon Holmgren](https://twitter.com/jamonholmgren)
diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md
index fba5f0e4f..303a95840 100644
--- a/src/content/blog/2024/10/21/react-compiler-beta-release.md
+++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md
@@ -2,127 +2,125 @@
title: "React Compiler : beta et feuille de route"
author: Lauren Tan
date: 2024/10/21
-description: At React Conf 2024, we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. In this post, we want to share what's next for open source, and our progress on the compiler.
+description: Lors de la React Conf 2024, nous avons annoncé la sortie expérimentale de React Compiler, un outil de niveau *build* qui optimise votre appli React grâce à de la mémoïsation automatique. Dans cet article, nous aimerions partager avec vous la suite de nos travaux *open source* et nos progrès sur ce compilateur.
---
-{/* FIXME:L10N */}
-
-October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes).
+Le 21 octobre 2024 par [Lauren Tan](https://twitter.com/potetotes).
---
<Intro>
-The React team is excited to share new updates:
+L'équipe React est heureuse de partager avec vous les annonces suivantes :
</Intro>
-1. We're publishing React Compiler Beta today, so that early adopters and library maintainers can try it and provide feedback.
-2. We're officially supporting React Compiler for apps on React 17+, through an optional `react-compiler-runtime` package.
-3. We're opening up public membership of the [React Compiler Working Group](https://github.com/reactwg/react-compiler) to prepare the community for gradual adoption of the compiler.
+1. Nous avons publié aujourd'hui la version beta de React Compiler, afin que les pionnier·ères de l'adoption et les mainteneur·ses de bibliothèques puissent l'essayer et nous faire part de leurs retours.
+2. Nous permettons officiellement l'utilisation de React Compiler sur les applis en React 17+, au travers d'un module optionnel `react-compiler-runtime`.
+3. Nous ouvrons l'accès public au [groupe de travail React Compiler](https://github.com/reactwg/react-compiler) pour préparer la communauté à l'adoption graduelle du compilateur.
---
-At [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. [You can find an introduction to React Compiler here](/learn/react-compiler).
+Lors de la [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), nous avons annoncé la sortie expérimentale de React Compiler, un outil de niveau *build* qui optimise votre appli React grâce à de la mémoïsation automatique. [Vous pouvez trouver une introduction au compilateur ici](/learn/react-compiler).
-Since the first release, we've fixed numerous bugs reported by the React community, received several high quality bug fixes and contributions[^1] to the compiler, made the compiler more resilient to the broad diversity of JavaScript patterns, and have continued to roll out the compiler more widely at Meta.
+Depuis cette première sortie, nous avons corrigé de nombreux bugs signalés par la communauté React, reçus plusieurs correctifs et contributions de haute qualité[^1] au compilateur, rendu le compilateur plus résilient face à une grande variété d'approches JavaScript, et continué à déployer plus largement le compilateur à Meta.
-In this post, we want to share what's next for React Compiler.
+Dans cet article, nous aimerions partager avec vous la suite de nos travaux sur ce compilateur.
-## Try React Compiler Beta today {/*try-react-compiler-beta-today*/}
+## Essayez React Compiler beta dès aujourd'hui {/*try-react-compiler-beta-today*/}
-At [React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg), we shared an update on React Compiler. Today, we are excited to announce a new Beta release of React Compiler and ESLint plugin. New betas are published to npm using the `@beta` tag.
+Lors de [React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg), nous avons parlé des derniers travaux sur React Compiler. Nous sommes ravi·es aujourd'hui de pouvoir annoncer la sortie en beta de React Compiler et d'un plugin ESLint. Les nouvelles beta seront publiées sur npm avec l'étiquette `@beta`.
-To install React Compiler Beta:
+Pour installer React Compiler beta :
<TerminalBlock>
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
</TerminalBlock>
-Or, if you're using Yarn:
+Ou si vous utilisez Yarn :
<TerminalBlock>
yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
</TerminalBlock>
-You can watch [Sathya Gunasekaran's](https://twitter.com/_gsathya) talk at React India here:
+Vous pouvez regarder la présentation de [Sathya Gunasekaran](https://twitter.com/_gsathya) à React India ici :
<YouTubeIframe src="https://www.youtube.com/embed/qd5yk2gxbtg" />
-## We recommend everyone use the React Compiler linter today {/*we-recommend-everyone-use-the-react-compiler-linter-today*/}
+## Utilisez le *linter* React Compiler dès maintenant {/*we-recommend-everyone-use-the-react-compiler-linter-today*/}
-React Compiler’s ESLint plugin helps developers proactively identify and correct [Rules of React](/reference/rules) violations. **We strongly recommend everyone use the linter today**. The linter does not require that you have the compiler installed, so you can use it independently, even if you are not ready to try out the compiler.
+Le plugin ESLint de React Compiler aide les développeur·ses à identifier proactivement les violations des [Règles de React](/reference/rules) et à les corriger. **Nous conseillons fortement à tout le monde d'utiliser le *linter* dès aujourd'hui.** Le *linter* ne requiert pas l'installation du compilateur, vous pouvez l'utiliser indépendamment, même si vous n'êtes pas encore prêt·e à essayer le compilateur.
-To install the linter only:
+Pour installer le *linter* seul :
<TerminalBlock>
npm install -D eslint-plugin-react-compiler@beta
</TerminalBlock>
-Or, if you're using Yarn:
+Ou si vous utilisez Yarn :
<TerminalBlock>
yarn add -D eslint-plugin-react-compiler@beta
</TerminalBlock>
-After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
+Après l'installation vous pouvez activer le *linter* en [l'ajoutant à votre configuration ESLint](/learn/react-compiler#installing-eslint-plugin-react-compiler). Utiliser ce *linter* vous aidera à identifier les infractions aux Règles de React, ce qui facilitera l'adoption du compilateur lorsqu'il sera officiellement prêt.
-## Backwards Compatibility {/*backwards-compatibility*/}
+## Rétrocompatibilité {/*backwards-compatibility*/}
-React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/learn/react-compiler#using-react-compiler-with-react-17-or-18).
+React Compiler produit du code qui s'appuie sur des API à l'exécution apparues avec React 19, mais le compilateur prend désormais également en charge les projets utilisant React 17 et 18. Si vous n'êtes pas encore sur React 19, la version beta vous permet d'essayer néanmoins React Compiler en spécifiant une `target` minimum dans votre configuration de compilation, et en ajoutant `react-compiler-runtime` comme dépendance. [Vous trouverez la documentation associée ici](/learn/react-compiler#using-react-compiler-with-react-17-or-18).
-## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/}
+## Utiliser React Compiler dans des bibliothèques {/*using-react-compiler-in-libraries*/}
-Our initial release was focused on identifying major issues with using the compiler in applications. We've gotten great feedback and have substantially improved the compiler since then. We're now ready for broad feedback from the community, and for library authors to try out the compiler to improve performance and the developer experience of maintaining your library.
+Notre version initiale se concentrait sur l'identification de problèmes majeurs lors de l'utilisation du compilateur sur du code applicatif. Nous avons reçu de super retours et avons largement amélioré le compilateur depuis. Nous sommes à présent prêt·es à recevoir des retours plus divers de la communauté, et notamment à ce que les auteur·es de bibliothèques essaient le compilateur pour améliorer leurs performances et l'expérience de développement liée à la maintenance de leur bibliothèque.
-React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm.
+React Compiler peut donc être utilisé pour compiler des bibliothèques. Dans la mesure où React Compiler doit être exécuté sur le code source original, avant toute transformation, il n'est généralement pas possible que la chaîne de construction d'une application compile les bibliothèques dont elle dépend. C'est pourquoi nous conseillons aux mainteneur·euses de bibliothèques de compiler et tester indépendamment leurs bibliothèques avec le compilateur, et de livrer le code compilé dans npm.
-Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
+Puisque votre code est pré-compilé, les utilisateur·rices de votre bibliothèque n'auront pas besoin d'activer le compilateur pour bénéficier de la mémoïsation automatique appliquée à votre bibliothèque. Si celle-ci s'adresse à des applications pas forcément encore sur React 19, pensez à préciser une `target` minimum et à ajouter `react-compiler-runtime` comme dépendance explicite de production. Ce module d'exécution utilisera une implémentation correcte des API selon la version de React de l'application, et émulera les API manquantes lorsque c'est nécessaire.
-[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries)
+[Vous trouverez la documentation associée ici](/learn/react-compiler#using-the-compiler-on-libraries).
-## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/}
+## Ouverture du groupe de travail React Compiler au public {/*opening-up-react-compiler-working-group-to-everyone*/}
-We previously announced the invite-only [React Compiler Working Group](https://github.com/reactwg/react-compiler) at React Conf to provide feedback, ask questions, and collaborate on the compiler's experimental release.
+Nous avions annoncé à React Conf le [groupe de travail React Compiler](https://github.com/reactwg/react-compiler), sur invitations uniquement, pour nous fournir des retours, poser des questions, et contribuer à la sortie expérimentale du compilateur.
-From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/facebook/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions).
+À compter d'aujourd'hui, de concert avec la sortie beta de React Compiler, nous ouvrons le groupe de travail à tout le monde. Le groupe de travail React Compiler a pour objectif de préparer l'écosystème pour une adoption graduelle, en douceur, de React Compiler dans les applications et bibliothèques existantes. Merci de continuer à nous soumettre des tickets de bugs sur le [dépôt React](https://github.com/facebook/react), mais réservez les retours, questions et échanges d'idées pour le [forum de discussion du groupe de travail](https://github.com/reactwg/react-compiler/discussions).
-The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum.
+L'équipe noyau utilisera par ailleurs ce dépôt de discussion pour partager les résultats de nos recherches. Alors que la version stable se rapprochera, toute information importante sera également publiée sur ce forum.
-## React Compiler at Meta {/*react-compiler-at-meta*/}
+## React Compiler à Meta {/*react-compiler-at-meta*/}
-At [React Conf](/blog/2024/05/22/react-conf-2024-recap), we shared that our rollout of the compiler on Quest Store and Instagram were successful. Since then, we've deployed React Compiler across several more major web apps at Meta, including [Facebook](https://www.facebook.com) and [Threads](https://www.threads.net). That means if you've used any of these apps recently, you may have had your experience powered by the compiler. We were able to onboard these apps onto the compiler with few code changes required, in a monorepo with more than 100,000 React components.
+Lors de la [React Conf](/blog/2024/05/22/react-conf-2024-recap), nous avions raconté les succès du déploiement du compilateur sur le Quest Store et Instagram. Nous avons depuis déployé React Compiler dans plusieurs applis web majeures de Meta, dont [Facebook](https://www.facebook.com) et [Threads](https://www.threads.net). Ça signifie que si vous avez utilisé ces applis récemment, vous avez sans doute bénéficié d'une expérience optimisée par le compilateur. Nous avons pu l'activer sur ces applis avec peu de modifications au code, dans un monorepo contenant plus de 100 000 composants React.
-We've seen notable performance improvements across all of these apps. As we've rolled out, we're continuing to see results on the order of [the wins we shared previously at ReactConf](https://youtu.be/lyEKhv8-3n0?t=3223). These apps have already been heavily hand tuned and optimized by Meta engineers and React experts over the years, so even improvements on the order of a few percent are a huge win for us.
+Nous avons constaté des améliorations de performance significatives pour toutes ces applis. Au fil du déploiement, nous continuons à observer des gains du même ordre de grandeur que ceux [que nous avions décrits lors de la React Conf](https://youtu.be/lyEKhv8-3n0?t=3223). Ces applis étaient déjà intensément optimisées à la main par les ingénieurs Meta experts en React depuis des années, de sorte que même une amélioration de quelques pourcents constitue un énorme bénéfice pour nous.
-We also expected developer productivity wins from React Compiler. To measure this, we collaborated with our data science partners at Meta[^2] to conduct a thorough statistical analysis of the impact of manual memoization on productivity. Before rolling out the compiler at Meta, we discovered that only about 8% of React pull requests used manual memoization and that these pull requests took 31-46% longer to author[^3]. This confirmed our intuition that manual memoization introduces cognitive overhead, and we anticipate that React Compiler will lead to more efficient code authoring and review. Notably, React Compiler also ensures that *all* code is memoized by default, not just the (in our case) 8% where developers explicitly apply memoization.
+Nous nous attendons par ailleurs à des gains de productivité en développement grâce à React Compiler. Pour en mesurer la portée, nous avons collaboré avec nos collègues en science des données à Meta[^2] pour mener une analyse statistique exhaustive de l'impact de la mémoïsation manuelle sur la productivité. Avant de déployer le compilateur à Meta, nous avons découvert qu'à peine 8% environ des *pull requests* liées à React utilisaient la mémoïsation manuelle, et que ces *pull requests* prenaient 31–46% plus de temps à écrire[^3]. Ça a validé notre intuition que la mémoïsation manuelle augmente fortement la charge cognitive, et nous nous attendons à ce que React Compiler produise du code plus efficace à écrire et à réviser. En particulier, React Compiler s'assure que *tout* le code est mémoïsé par défaut, pas seulement les 8% (dans notre cas) que les développeur·ses avaient explicitement mémoïsés.
-## Roadmap to Stable {/*roadmap-to-stable*/}
+## Feuille de route vers une version stable {/*roadmap-to-stable*/}
-*This is not a final roadmap, and is subject to change.*
+*Il ne s'agit pas d'une feuille de route définitive, elle reste sujette à changements.*
-We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and ESLint plugin.
+Nous avons l'intention de livrer une version candidate *(Release Candidate, NdT)* du compilateur dans l'avenir proche suite à la sortie de la version beta, lorsque la majorité des applis et bibliothèques qui respectent les Règles de React auront démontré leur bon fonctionnement avec le compilateur. Après une période de retours finaux par la communauté, nous comptons fournir une version stable du compilateur. La version stable annoncera le début de nouvelles fondations pour React, et nous conseillerons fortement à toutes les applis et bibliothèques d'utiliser le compilateur et le plugin ESLint.
-* ✅ Experimental: Released at React Conf 2024, primarily for feedback from early adopters.
-* ✅ Public Beta: Available today, for feedback from the wider community.
-* 🚧 Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue.
-* 🚧 General Availability: After final feedback period from the community.
+* ✅ Expérimentale : sortie à React Conf 2024, surtout pour des retours par les pionnier·ères de l'adoption.
+* ✅ Beta publique : disponible dès aujourd'hui, pour des retours par toute la communauté.
+* 🚧 Version candidate (RC) : React Compiler fonctionne sans accroc pour la majorité des applis et bibliothèques qui respectent les règles.
+* 🚧 Version stable : après une période de retours finaux de la communauté.
-These releases also include the compiler's ESLint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler's ESLint plugin, so only one plugin needs to be installed.
+Ces versions incluent le plugin ESLint du compilateur, qui donne accès aux diagnostics issus de l'analyse statique par le compilateur. Nous comptons combiner le plugin existant eslint-plugin-react-hooks avec le plugin ESLint du compilateur, pour ne plus avoir qu'un plugin unique à installer.
-Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Upgrading to each new release of the compiler is aimed to be straightforward, and each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns.
+Au-delà de la version stable, nous prévoyons d'ajouter plus d'optimisations et d'améliorations au compilateur. On y trouvera aussi bien des améliorations incrémentales à la mémoïsation automatique, que des optimisations entièrement nouvelles, avec le minimum d'impact sur votre code produit. Nous avons l'intention de permettre des migrations les plus simples possibles vers chaque nouvelle version, et que chacune améliore les performances et gère mieux la diversité des approches JavaScript et React.
-Throughout this process, we also plan to prototype an IDE extension for React. It is still very early in research, so we expect to be able to share more of our findings with you in a future React Labs blog post.
+Tout au long de ce processus, nous pensons également prototyper une extension EDI pour React. La recherche à ce sujet est encore très jeune ; nous vous en dirons davantage dans un prochain billet de blog React Labs.
---
-Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Alex Taylor](https://github.com/alexmckenley), [Jason Bonta](https://twitter.com/someextent), and [Eli White](https://twitter.com/Eli_White) for reviewing and editing this post.
+Merci à [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Alex Taylor](https://github.com/alexmckenley), [Jason Bonta](https://twitter.com/someextent) et [Eli White](https://twitter.com/Eli_White) pour avoir révisé et amendé cet article.
---
-[^1]: Thanks [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler.
+[^1]: Merci à [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi) et plusieurs autres pour leurs contributions au compilateur.
-[^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post.
+[^2]: Merci à [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) pour avoir piloté cette étude sur React Compiler à Meta, et pour avoir révisé cet article.
-[^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors.
\ No newline at end of file
+[^3]: Après avoir ajusté l'analyse selon l'ancienneté des auteur·es, le volume et la complexité des changements, et les facteurs agravants éventuels.
\ No newline at end of file
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index 27770e1e5..165fac7ab 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -12,9 +12,7 @@ Ce blog est la source officielle des mises à jour par l'équipe React. Toute a
<BlogCard title="React Compiler : beta et feuille de route" date="21 octobre 2024" url="/blog/2024/10/21/react-compiler-beta-release">
-{/* FIXME:L10N */}
-
-We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ...
+Nous avions annoncé la sortie expérimentale de React Compiler lors de la React Conf 2024. Nous avons beaucoup avancé depuis, et dans cet article nous aimerions partager avec vous la suite de nos travaux sur ce compilateur…
</BlogCard>
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
index d9a9b2d4b..ebb79196e 100644
--- a/src/content/learn/react-compiler.md
+++ b/src/content/learn/react-compiler.md
@@ -2,73 +2,80 @@
title: React Compiler
---
-{/* FIXME:L10N */}
-
<Intro>
-This page will give you an introduction to React Compiler and how to try it out successfully.
+
+Cette page fournit une introduction à React Compiler et explique comment l'essayer avec succès.
+
</Intro>
<Wip>
-These docs are still a work in progress. More documentation is available in the [React Compiler Working Group repo](https://github.com/reactwg/react-compiler/discussions), and will be upstreamed into these docs when they are more stable.
+
+Cette documentation est un travail en cours. Davantage de documentation est disponible sur le [dépôt du groupe de travail React Compiler](https://github.com/reactwg/react-compiler/discussions) et sera reportée ici lorsqu'elle se stabilisera.
+
</Wip>
<YouWillLearn>
-* Getting started with the compiler
-* Installing the compiler and ESLint plugin
-* Troubleshooting
+* Comment commencer à utiliser le compilateur
+* Comment installer le compilateur et le plugin ESLint
+* Comment vous dépanner
</YouWillLearn>
<Note>
-React Compiler is a new compiler currently in Beta, that we've open sourced to get early feedback from the community. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you’ve followed the [Rules of React](/reference/rules).
-The latest Beta release can be found with the `@beta` tag, and daily experimental releases with `@experimental`.
+React Compiler est un nouveau compilateur actuellement en beta, qui a été ouvert au public pour obtenir des retours rapides de la communauté. Même s'il est utilisé en production dans des sociétés comme Meta, déployer le compilateur en production pour votre appli dépendra de la santé de votre base de code et de la rigueur avec laquelle vous respectez les [Règles de React](/reference/rules).
+
+La dernière version beta est disponible au travers de l'étiquette `@beta`, et les versions quotidiennes expérimentales utilisent l'étiquette `@experimental`.
+
</Note>
-React Compiler is a new compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
+React Compiler est un nouveau compilateur actuellement en beta, qui a été ouvert au public pour obtenir des retours rapides de la communauté. Il s'agit d'un outil pour la phase de build qui optimise automatiquement votre appli React. Il fonctionne avec JavaScript et comprend les [Règles de React](/reference/rules), ce qui fait que vous n'avez pas besoin de réécrire quelque code que ce soit pour en bénéficier.
-The compiler also includes an [ESLint plugin](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler.
+Le compilateur inclut par ailleurs un [plugin ESLint](#installing-eslint-plugin-react-compiler) qui donne accès aux diagnostics issus de l'analyse statique par le compilateur directement dans votre éditeur. **Nous vous conseillons fortement d'utiliser le *linter* dès aujourd'hui.** Le *linter* ne requiert pas l'installation du compilateur, vous pouvez donc vous en servir même si vous n'êtes pas encore prêt·e à essayer le compilateur.
-The compiler is currently released as `beta`, and is available to try out on React 17+ apps and libraries. To install the Beta:
+Le compilateur est actuellement disponible *via* l'étiquette `beta`, et vous pouvez l'essayer sur les applis et bibliothèques utilisant React 17+. Pour installer la beta :
<TerminalBlock>
-npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+npm install --save-dev babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
</TerminalBlock>
-Or, if you're using Yarn:
+Ou si vous utilisez Yarn :
<TerminalBlock>
-yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+yarn add --dev babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
</TerminalBlock>
-If you are not using React 19 yet, please see [the section below](#using-react-compiler-with-react-17-or-18) for further instructions.
+Si vous n'utilisez pas encore React 19, merci de consulter [cette section](#using-react-compiler-with-react-17-or-18) pour des instructions complémentaires.
-### What does the compiler do? {/*what-does-the-compiler-do*/}
+### Que fait le compilateur ? {/*what-does-the-compiler-do*/}
-In order to optimize applications, React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as `useMemo`, `useCallback`, and `React.memo`. With these APIs you can tell React that certain parts of your application don't need to recompute if their inputs haven't changed, reducing work on updates. While powerful, it's easy to forget to apply memoization or apply them incorrectly. This can lead to inefficient updates as React has to check parts of your UI that don't have any _meaningful_ changes.
+Pour optimiser les applications, React Compiler mémoïse automatiquement votre code. Vous avez peut-être déjà l'habitude de mémoïser au travers de fonctions telles que `useMemo`, `useCallback` et `React.memo`. Ces fonctions vous permettent d'indiquer à React que certaines parties de votre appli n'ont pas besoin d'être recalculées si leurs entrées n'ont pas changé, ce qui réduit la charge des mises à jour. Même si elles sont puissantes, il reste trop facile d'oublier de mémoïser, ou de mal s'y prendre. Ça peut entraîner des mises à jour inefficaces lorsque React doit examiner des parties de votre UI qui n'ont pas reçu de changements _signifiants_.
-The compiler uses its knowledge of JavaScript and React's rules to automatically memoize values or groups of values within your components and hooks. If it detects breakages of the rules, it will automatically skip over just those components or hooks, and continue safely compiling other code.
+Le compilateur utilise sa connaissance de JavaScript et des règles de React pour mémoïser automatiquement des valeurs et groupes de valeurs au sein de vos composants et Hooks. S'il détecte des infractions aux règles, il évitera automatiquement de compiler les composants et Hooks concernés, et continuera à compiler de façon fiable le reste du code.
<Note>
-React Compiler can statically detect when Rules of React are broken, and safely opt-out of optimizing just the affected components or hooks. It is not necessary for the compiler to optimize 100% of your codebase.
+
+React Compiler peut détecter statiquement les infractions aux Règles de React, et éviter par sécurité d'optimiser les composants et Hooks concernés. Il n'est pas nécessaire que le compilateur optimise 100% de votre base de code.
+
</Note>
-If your codebase is already very well-memoized, you might not expect to see major performance improvements with the compiler. However, in practice memoizing the correct dependencies that cause performance issues is tricky to get right by hand.
+Si votre base de code est déjà très bien mémoïsée, vous ne verrez sans doute pas d'amélioration significative des performances grâce au compilateur. Ceci dit, en pratique mémoïser correctement les dépendances qui sont à l'origine des soucis de performances n'est pas chose aisée à réaliser manuellement.
<DeepDive>
-#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/}
-The initial release of React Compiler is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases:
+#### Quels genres de mémoïsations effectue le compilateur ? {/*what-kind-of-memoization-does-react-compiler-add*/}
+
+La version initiale de React Compiler se concentre principalement sur **l'amélioration des performances de mise à jour** (les nouveaux rendus de composants existants), elle cible donc les deux cas de figure suivants :
-1. **Skipping cascading re-rendering of components**
- * Re-rendering `<Parent />` causes many components in its component tree to re-render, even though only `<Parent />` has changed
-1. **Skipping expensive calculations from outside of React**
- * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data
+1. **Éviter le re-rendu en cascade de composants**
+ * Refaire le rendu de `<Parent />` entraîne un nouveau rendu de nombreux composants dans son arbre de composants, même si seul `<Parent />` a changé.
+2. **Éviter des calculs coûteux hors de React**
+ * Par exemple, un appel à `expensivelyProcessAReallyLargeArrayOfObjects()` au sein de votre composant ou Hook nécessitant cette donnée.
-#### Optimizing Re-renders {/*optimizing-re-renders*/}
+#### Optimiser les re-rendus {/*optimizing-re-renders*/}
-React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ — unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes:
+React vous permet d'exprimer votre UI sous forme d'une fonction de votre état courant (plus concrètement : les props, l'état et le Contexte). Dans son implémentation actuelle, lorsque l'état local d'un composant change, React refait le rendu de ce composant _et de tous ses enfants_ — à moins que vous n'ayez appliqué une forme de mémoïsation manuelle avec `useMemo()`, `useCallback()` ou `React.memo()`. Dans l'exemple qui suit, `<MessageButton>` fera un nouveau rendu chaque fois que l'état local de `<FriendList>` changera :
```javascript
function FriendList({ friends }) {
@@ -78,7 +85,7 @@ function FriendList({ friends }) {
}
return (
<div>
- <span>{onlineCount} online</span>
+ <span>{onlineCount} en ligne</span>
{friends.map((friend) => (
<FriendListCard key={friend.id} friend={friend} />
))}
@@ -87,54 +94,55 @@ function FriendList({ friends }) {
);
}
```
-[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
+[_Examiner cet exemple dans le bac à sable de React Compiler_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
-React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `<FriendListCard />` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `<MessageButton>` as the count changes.
+React Compiler applique automatiquement l'équivalent des mémoïsations manuelles, pour garantir que seules les parties pertinentes de l'appli refont leur rendu à chaque changement d'état, ce qu'on appelle parfois de la « réactivité granulaire ». Dans l'exemple qui précède, React Compiler détermine que la valeur renvoyée par `<FriendListCard />` peut être réutilisée même si `friends` change, et qu'on peut éviter de recréer ce JSX _et_ éviter de refaire le rendu de `<MessageButton>` quand le compteur change.
-#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/}
+#### Les calculs coûteux sont aussi mémoïsés {/*expensive-calculations-also-get-memoized*/}
-The compiler can also automatically memoize for expensive calculations used during rendering:
+Le compilateur peut aussi automatiquement mémoïser les calculs coûteux utilisés lors du rendu :
```js
-// **Not** memoized by React Compiler, since this is not a component or hook
+// **Pas** mémoïsé par React Compiler, puisque ce n’est ni un composant ni un Hook
function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }
-// Memoized by React Compiler since this is a component
+// Mémoïsé par React Compiler puisque c’est un composant
function TableContainer({ items }) {
- // This function call would be memoized:
+ // Cet appel de fonction serait mémoïsé :
const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
// ...
}
```
-[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA)
+[_Examiner cet exemple dans le bac à sable de React Compiler_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA)
-However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because:
+Ceci étant dit, si `expensivelyProcessAReallyLargeArrayOfObjects` est véritablement une fonction coûteuse à l'appel, vous voudrez peut-être implémenter sa propre mémoïsation hors de React, car :
-- React Compiler only memoizes React components and hooks, not every function
-- React Compiler's memoization is not shared across multiple components or hooks
+- React Compiler ne mémoïse que les composants et Hooks React, et non chaque fonction
+- La mémoïsation de React Compiler n'est pas partagée par de multiples composants ou Hooks
+
+Du coup, si `expensivelyProcessAReallyLargeArrayOfObjects` était utilisée par plusieurs composants distincts, même si exactement les mêmes éléments lui étaient passés, son calcul coûteux serait exécuté plusieurs fois. Nous vous conseillons de [mesurer](/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) d'abord pour voir si le calcul est véritablement coûteux avant de complexifier votre code avec une mémoïsation manuelle.
-So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](https://react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
</DeepDive>
-### Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
+### Devrais-je essayer le compilateur ? {/*should-i-try-out-the-compiler*/}
-Please note that the compiler is still in Beta and has many rough edges. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
+Veuillez noter que le compilateur est encore en beta et qu'il reste de nombreuses choses à affiner. Même s'il est déjà utilisé en production dans des sociétés telles que Meta, déployer le compilateur en production pour votre appli dépend de l'état de santé de votre base de code et de la rigueur avec laquelle vous respectez les [Règles de React](/reference/rules).
-**You don't have to rush into using the compiler now. It's okay to wait until it reaches a stable release before adopting it.** However, we do appreciate trying it out in small experiments in your apps so that you can [provide feedback](#reporting-issues) to us to help make the compiler better.
+**Vous n'avez pas à vous précipiter pour utiliser le compilateur dès maintenant. Vous pouvez parfaitement attendre qu'il atteigne sa version stable avant de l'adopter.** Ceci dit, nous apprécions les essais à échelle réduite dans vos applis, qui vous permettent de nous [faire des retours](#reporting-issues) afin de nous aider à améliorer le compilateur.
-## Getting Started {/*getting-started*/}
+## Démarrage {/*getting-started*/}
-In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
+En complément de cette documentation, nous vous conseillons de garder un œil sur le [groupe de travail React Compiler](https://github.com/reactwg/react-compiler) pour y trouver davantage d'informations et des discussions autour du compilateur.
-### Installing eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/}
+### Installer eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/}
-React Compiler also powers an ESLint plugin. The ESLint plugin can be used **independently** of the compiler, meaning you can use the ESLint plugin even if you don't use the compiler.
+React Compiler alimente également un plugin ESLint. Le plugin ESLint peut être utilisé **indépendamment** du compilateur, ce qui signifie que vous pouvez tirer parti du plugin ESLint même si vous n'utilisez pas le compilateur.
<TerminalBlock>
-npm install -D eslint-plugin-react-compiler@beta
+npm install --save-dev eslint-plugin-react-compiler@beta
</TerminalBlock>
-Then, add it to your ESLint config:
+Ajoutez ensuite ceci à votre configuration ESLint :
```js
import reactCompiler from 'eslint-plugin-react-compiler'
@@ -151,7 +159,7 @@ export default [
]
```
-Or, in the deprecated eslintrc config format:
+Ou si vous utilisez encore la forme dépréciée de son fichier de configuration :
```js
module.exports = {
@@ -164,42 +172,46 @@ module.exports = {
}
```
-The ESLint plugin will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase.
+Le plugin ESLint affichera toute violation des règles de React dans votre éditeur. Lorsqu'il le fait, ça signifie que le compilateur a évité d'optimiser ce composant ou Hook. Ça ne pose aucun problème, et le compilateur peut retomber sur ses pieds et continuer à optimiser d'autres composants dans votre base de code.
+
<Note>
-**You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized, but it is not required to fix everything before you can use the compiler.
+
+**Vous n'avez pas besoin de corriger immédiatement toutes les violations signalées par ESLint.** Vous pouvez les traiter à votre propre rythme pour augmenter le nombre de composants et Hooks aptes à être optimisés, mais il n'est pas nécessaire de tout corriger avant d'utiliser le compilateur.
+
</Note>
-### Rolling out the compiler to your codebase {/*using-the-compiler-effectively*/}
+### Déployer le compilateur sur votre base de code {/*using-the-compiler-effectively*/}
+
+#### Projets existants {/*existing-projects*/}
-#### Existing projects {/*existing-projects*/}
-The compiler is designed to compile functional components and hooks that follow the [Rules of React](/reference/rules). It can also handle code that breaks those rules by bailing out (skipping over) those components or hooks. However, due to the flexible nature of JavaScript, the compiler cannot catch every possible violation and may compile with false negatives: that is, the compiler may accidentally compile a component/hook that breaks the Rules of React which can lead to undefined behavior.
+Le compilateur est conçu pour compiler les fonctions composants et Hooks qui respectent les [Règles de React](/reference/rules). Il peut aussi gérer du code qui enfreint ces règles en évitant d'optimiser ces composants ou Hooks. Ceci dit, en raison de la nature flexible de JavaScript, le compilateur ne peut pas repérer toutes les violations imaginables et risque de compiler avec des faux négatifs ; c'est à dire qu'il pourrait accidentellement compiler un composant ou Hook qui enfreint les Règles de React, ce qui entraînera un comportement non défini.
-For this reason, to adopt the compiler successfully on existing projects, we recommend running it on a small directory in your product code first. You can do this by configuring the compiler to only run on a specific set of directories:
+Pour cette raison, afin d'adopter avec succès le compilateur sur des projets existants, nous vous conseillons de l'exécuter d'abord sur une petite partie de votre code produit. Pour cela, vous pouvez configurer le compilateur afin qu'il ne s'exécute que sur un sous-ensemble de vos dossiers :
```js {3}
const ReactCompilerConfig = {
sources: (filename) => {
- return filename.indexOf('src/path/to/dir') !== -1;
+ return filename.includes('src/path/to/dir');
},
};
```
-When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app.
+Lorsque vous gagnez en confiance sur votre déploiement du compilateur, vous pouvez étendre son champ d'action à d'autres dossiers, pour progressivement le déployer sur toute votre appli.
-#### New projects {/*new-projects*/}
+#### Nouveaux projets {/*new-projects*/}
-If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior.
+Si vous démarrez un nouveau projet, vous pouvez activer le compilateur sur la base de code entière, ce qu'il fait par défaut.
-### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/}
+### Utiliser React Compiler avec React 17 ou 18 {/*using-react-compiler-with-react-17-or-18*/}
-React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17.
+React Compiler donne ses meilleurs résultats avec React 19 RC. Si vous ne pouvez pas migrer vers cette version, vous pouvez installer le paquet complémentaire `react-compiler-runtime` qui permet au code compilé de tourner sur des versions antérieures à la 19. Gardez toutefois à l'esprit que la version minimale est la 17.
<TerminalBlock>
npm install react-compiler-runtime@beta
</TerminalBlock>
-You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:
+Vous aurez également besoin d'ajouter la `target` idoine à votre configuration du compilateur, en utilisant la version majeure de React que vous ciblez :
```js {3}
// babel.config.js
@@ -216,27 +228,27 @@ module.exports = function () {
};
```
-### Using the compiler on libraries {/*using-the-compiler-on-libraries*/}
+### Utiliser le compilateur sur des bibliothèques {/*using-the-compiler-on-libraries*/}
-React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm.
+React Compiler peut aussi être utilisé pour compiler des bibliothèques. Dans la mesure où React Compiler doit être exécuté sur le code source original, avant toute transformation, il n'est généralement pas possible que la chaîne de construction d'une application compile les bibliothèques dont elle dépend. C'est pourquoi nous conseillons aux mainteneur·euses de bibliothèques de compiler et tester indépendamment leurs bibliothèques avec le compilateur, et de livrer le code compilé dans npm.
-Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum [`target` and add `react-compiler-runtime` as a direct dependency](#using-react-compiler-with-react-17-or-18). The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
+Puisque votre code est pré-compilé, les utilisateur·rices de votre bibliothèque n'auront pas besoin d'activer le compilateur pour bénéficier de la mémoïsation automatique appliquée à votre bibliothèque. Si celle-ci s'adresse à des applications pas forcément encore sur React 19, pensez à [préciser une `target` et à ajouter `react-compiler-runtime` comme dépendance explicite](#using-react-compiler-with-react-17-or-18) de production. Ce module d'exécution utilisera une implémentation correcte des API selon la version de React de l'application, et émulera les API manquantes lorsque c'est nécessaire.
-Library code can often require more complex patterns and usage of escape hatches. For this reason, we recommend ensuring that you have sufficient testing in order to identify any issues that might arise from using the compiler on your library. If you identify any issues, you can always opt-out the specific components or hooks with the [`'use no memo'` directive](#something-is-not-working-after-compilation).
+Le code de bibliothèque est souvent plus complexe et tend à exploiter certaines échappatoires. Pour cette raison, nous vous conseillons de tester suffisamment votre code pour identifier tout problème qui pourrait résulter de l'utilisation du compilateur sur votre bibliothèque. Si vous repérez quelque problème que ce soit, vous pouvez toujours retirer les composants ou Hooks concernés du processus grâce à la [directive `'use no memo'`](#something-is-not-working-after-compilation).
-Similarly to apps, it is not necessary to fully compile 100% of your components or hooks to see benefits in your library. A good starting point might be to identify the most performance sensitive parts of your library and ensuring that they don't break the [Rules of React](/reference/rules), which you can use `eslint-plugin-react-compiler` to identify.
+Comme pour les applis, il n'est pas nécessaire de compiler 100% de vos composants et Hooks pour que votre bibliothèque profite de la compilation. Un bon point de départ consiste à identifier les parties de votre bibliothèque les plus critiques en termes de performances, et à vous assurer qu'elles n'enfreignent pas les [Règles de React](/reference/rules), ce que `eslint-plugin-react-compiler` peut vous aider à vérifier.
-## Usage {/*installation*/}
+## Utilisation {/*installation*/}
### Babel {/*usage-with-babel*/}
<TerminalBlock>
-npm install babel-plugin-react-compiler@beta
+npm install --save-dev babel-plugin-react-compiler@beta
</TerminalBlock>
-The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler.
+Le compilateur inclut un plugin Babel que vous pouvez utiliser dans votre chaîne de build pour exécuter le compilateur.
-After installing, add it to your Babel config. Please note that it's critical that the compiler run **first** in the pipeline:
+Après installation, ajoutez-le à votre configuration Babel. Veuillez noter qu'il est indispensable que le compilateur figure **en premier** dans la chaîne de traitement :
```js {7}
// babel.config.js
@@ -245,18 +257,18 @@ const ReactCompilerConfig = { /* ... */ };
module.exports = function () {
return {
plugins: [
- ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
+ ['babel-plugin-react-compiler', ReactCompilerConfig], // doit être en premier !
// ...
],
};
};
```
-`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis.
+`babel-plugin-react-compiler` doit être exécuté d'abord, avant tout autre plugin Babel, car le compilateur a besoin des informations du code source d'origine pour effectuer une analyse fiable.
### Vite {/*usage-with-vite*/}
-If you use Vite, you can add the plugin to vite-plugin-react:
+Si vous utilisez Vite, vous pouvez ajouter le plugin à vite-plugin-react :
```js {10}
// vite.config.js
@@ -280,13 +292,14 @@ export default defineConfig(() => {
### Next.js {/*usage-with-nextjs*/}
-Please refer to the [Next.js docs](https://nextjs.org/docs/canary/app/api-reference/next-config-js/reactCompiler) for more information.
+Merci de consulter la [documentation de Next.js](https://nextjs.org/docs/canary/app/api-reference/next-config-js/reactCompiler) pour les détails de mise en œuvre.
### Remix {/*usage-with-remix*/}
-Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
+
+Installez `vite-plugin-babel` et ajoutez-lui le plugin Babel du compilateur :
<TerminalBlock>
-npm install vite-plugin-babel
+npm install --save-dev vite-plugin-babel
</TerminalBlock>
```js {2,14}
@@ -301,7 +314,7 @@ export default defineConfig({
babel({
filter: /\.[jt]sx?$/,
babelConfig: {
- presets: ["@babel/preset-typescript"], // if you use TypeScript
+ presets: ["@babel/preset-typescript"], // si vous utilisez TypeScript
plugins: [
["babel-plugin-react-compiler", ReactCompilerConfig],
],
@@ -313,68 +326,71 @@ export default defineConfig({
### Webpack {/*usage-with-webpack*/}
-A community Webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
+Un chargeur Webpack maintenu par la communauté est [désormais disponible ici](https://github.com/SukkaW/react-compiler-webpack).
### Expo {/*usage-with-expo*/}
-Please refer to [Expo's docs](https://docs.expo.dev/preview/react-compiler/) to enable and use the React Compiler in Expo apps.
+Veuillez consulter la [documentation d'Expo](https://docs.expo.dev/preview/react-compiler/) pour activer et utiliser React Compiler dans les applis Expo.
### Metro (React Native) {/*usage-with-react-native-metro*/}
-React Native uses Babel via Metro, so refer to the [Usage with Babel](#usage-with-babel) section for installation instructions.
+React Native utilise Babel *via* Metro, consultez donc la section [Utilisation avec Babel](#usage-with-babel) pour les instructions d'installation.
### Rspack {/*usage-with-rspack*/}
-Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps.
+Merci de consulter la [documentation de Rspack](https://rspack.dev/guide/tech/react#react-compiler) pour activer et utiliser React Compiler dans les applis Rspack.
### Rsbuild {/*usage-with-rsbuild*/}
-Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps.
+Veuillez consulter la [documentation de Rsbuild](https://rsbuild.dev/guide/framework/react#react-compiler) pour activer et utiliser React Compiler dans les applis Rsbuild.
+
+## Dépannage {/*troubleshooting*/}
-## Troubleshooting {/*troubleshooting*/}
+Pour nous signaler tout problème, façonnez d'abord une reproduction minimaliste sur le [bac à sable React Compiler](https://playground.react.dev/) et ajoutez-la à votre ticket. Vous pouvez ouvrir des tickets sur le dépôt [facebook/react](https://github.com/facebook/react/issues).
-To report issues, please first create a minimal repro on the [React Compiler Playground](https://playground.react.dev/) and include it in your bug report. You can open issues in the [facebook/react](https://github.com/facebook/react/issues) repo.
+Vous pouvez aussi faire des retours au groupe de travail React Compiler en demandant à en devenir membre. Merci de [lire le README pour savoir comment devenir membre](https://github.com/reactwg/react-compiler).
-You can also provide feedback in the React Compiler Working Group by applying to be a member. Please see [the README for more details on joining](https://github.com/reactwg/react-compiler).
+### Que suppose le compilateur ? {/*what-does-the-compiler-assume*/}
-### What does the compiler assume? {/*what-does-the-compiler-assume*/}
+React Compiler suppose que votre code :
-React Compiler assumes that your code:
+1. …est du JavaScript valide et sémantique.
+2. …teste que les valeurs et propriétés pouvant être nulles ou optionnelles sont bien définies avant d'y accéder (en activant par exemple [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks) si vous utilisez TypeScript), avec par exemple un test du genre `if (object.nullableProperty) { object.nullableProperty.foo }` ou un chaînage optionnel `object.nullableProperty?.foo`.
+3. …respecte les [Règles de React](/reference/rules).
-1. Is valid, semantic JavaScript.
-2. Tests that nullable/optional values and properties are defined before accessing them (for example, by enabling [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks) if using TypeScript), i.e., `if (object.nullableProperty) { object.nullableProperty.foo }` or with optional-chaining `object.nullableProperty?.foo`.
-3. Follows the [Rules of React](https://react.dev/reference/rules).
+React Compiler peut vérifier statiquement la plupart des Règles de React, et évitera par sécurité de compiler lorsqu'il détecte une infraction. Pour voir celles-ci, nous vous conseillons d'installer [eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler).
-React Compiler can verify many of the Rules of React statically, and will safely skip compilation when it detects an error. To see the errors we recommend also installing [eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler).
+### Comment savoir si mes composants ont été optimisés ? {/*how-do-i-know-my-components-have-been-optimized*/}
-### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/}
+[React Devtools](/learn/react-developer-tools) (v5.0+) prend nativement en charge React Compiler et affichera un badge « Memo ✨ » à côté des composants qui ont été optimisés par le compilateur.
-[React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
+### Quelque chose ne fonctionne plus après la compilation {/*something-is-not-working-after-compilation*/}
-### Something is not working after compilation {/*something-is-not-working-after-compilation*/}
-If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized.
+Si vous avez installé eslint-plugin-react-compiler, le compilateur devrait afficher toute infraction aux règles de React directement dans votre éditeur. Lorsqu'il le fait, ça signifie que le compilateur a évité d'optimiser ce composant ou Hook. Ça ne pose aucun problème, et le compilateur peut retomber sur ses pieds et continuer à optimiser les autres composants de votre base de code. **Vous n'avez pas besoin de corriger immédiatement toutes les violations signalées par ESLint.** Vous pouvez les traiter à votre propre rythme pour augmenter le nombre de composants et Hooks optimisés.
-Due to the flexible and dynamic nature of JavaScript however, it's not possible to comprehensively detect all cases. Bugs and undefined behavior such as infinite loops may occur in those cases.
+Cependant, en raison de la nature flexible et dynamique de JavaScript, il n'est pas possible de détecter l'intégralité des cas de figure. Des bugs et comportements non définis tels que des boucles infinies de rendu sont susceptibles de survenir dans de tels cas.
-If your app doesn't work properly after compilation and you aren't seeing any ESLint errors, the compiler may be incorrectly compiling your code. To confirm this, try to make the issue go away by aggressively opting out any component or hook you think might be related via the [`"use no memo"` directive](#opt-out-of-the-compiler-for-a-component).
+Si votre appli ne fonctionne pas correctement après compilation alors que vous ne constatez aucune erreur ESLint, le compilateur a peut-être compilé à tort votre code. Pour le confirmer, essayez de faire disparaître le problème en désactivant agressivement tout composant ou Hook qui pourrait être concerné, en utilisant la [directive `"use no memo"`](#use-no-memo).
```js {2}
function SuspiciousComponent() {
- "use no memo"; // opts out this component from being compiled by React Compiler
+ "use no memo"; // retire ce composant du champ d’action de React Compiler
// ...
}
```
<Note>
+
#### `"use no memo"` {/*use-no-memo*/}
-`"use no memo"` is a _temporary_ escape hatch that lets you opt-out components and hooks from being compiled by the React Compiler. This directive is not meant to be long lived the same way as eg [`"use client"`](/reference/rsc/use-client) is.
+`"use no memo"` est une échappatoire _temporaire_ qui vous permet de sortir des composants et Hooks du champ d'action de React Compiler. Cette directive n'a pas vocation à être pérennisée, contrairement par exemple à [`"use client"`](/reference/rsc/use-client).
+
+Nous déconseillons de recourir à cette directive dans la mesure où elle n'est pas à strictement parler nécessaire. Une fois que vous avez sorti un composant ou Hook du champ d'action, il en reste exclu tant que la directive n'est pas retirée. Ça signifie que même si vous corrigez le code, le compilateur continuera à éviter de le compiler tant que vous n'aurez pas retiré la directive.
-It is not recommended to reach for this directive unless it's strictly necessary. Once you opt-out a component or hook, it is opted-out forever until the directive is removed. This means that even if you fix the code, the compiler will still skip over compiling it unless you remove the directive.
</Note>
-When you make the error go away, confirm that removing the opt out directive makes the issue come back. Then share a bug report with us (you can try to reduce it to a small repro, or if it's open source code you can also just paste the entire source) using the [React Compiler Playground](https://playground.react.dev) so we can identify and help fix the issue.
+Lorsque vous parvenez à éliminer l'erreur, confirmez que le retrait de la directive d'exclusion restaure le problème. Vous pouvez alors créer un ticket de bug auprès de nous (essayez de produire une reproduction minimaliste, ou s'il s'agit de code libre copiez-collez simplement le code source) en utilisant le [bac à sable React Compiler](https://playground.react.dev) pour que nous puissions identifier et corriger la source du problème.
-### Other issues {/*other-issues*/}
+### Autres problèmes {/*other-issues*/}
-Please see https://github.com/reactwg/react-compiler/discussions/7.
+Merci de vous référer à [cette discussion](https://github.com/reactwg/react-compiler/discussions/7) pour plus de détails.