`.
- En général, vous utiliserez les refs pour des actions non destructrices telles que la gestion du focus, le défilement ou la mesure des dimensions et positions d'éléments du DOM.
- Un composant n'expose pas, par défaut, ses nœuds DOM. Vous pouvez choisir d'en exposer un en utilisant `forwardRef` et en passant le second argument `ref` de la fonction de rappel au nœud désiré.
- Évitez de modifier les nœuds DOM gérés par React. Si vous devez absolument le faire, limitez-vous aux parties que React n'a aucune raison de mettre à jour.
+=======
+- Refs are a generic concept, but most often you'll use them to hold DOM elements.
+- You instruct React to put a DOM node into `myRef.current` by passing `
`.
+- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
+- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using the `ref` prop.
+- Avoid changing DOM nodes managed by React.
+- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
@@ -1119,7 +1173,11 @@ Faites en sorte qu'un clic sur le bouton « Recherche » donne le focus au cha
+<<<<<<< HEAD
Vous aurez besoin de `forwardRef` pour choisir d'exposer un nœud DOM pour votre propre composant `SearchInput`.
+=======
+You'll need to pass `ref` as a prop to opt into exposing a DOM node from your own component like `SearchInput`.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
@@ -1204,6 +1262,7 @@ export default function SearchButton({ onClick }) {
```
```js src/SearchInput.js
+<<<<<<< HEAD
import { forwardRef } from 'react';
export default forwardRef(
@@ -1216,6 +1275,16 @@ export default forwardRef(
);
}
);
+=======
+export default function SearchInput({ ref }) {
+ return (
+
+ );
+}
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
```
```css
diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md
index 197f0da92..87a2b6cb9 100644
--- a/src/content/learn/passing-data-deeply-with-context.md
+++ b/src/content/learn/passing-data-deeply-with-context.md
@@ -468,15 +468,19 @@ import { LevelContext } from './LevelContext.js';
export default function Section({ level, children }) {
return (
);
}
```
+<<<<<<< HEAD
React le comprend ainsi : « si un composant à l'intérieur de `
` demande `LevelContext`, alors donne-lui ce `level` ». Le composant utilisera la valeur du `` le plus proche dans l'arbre au-dessus de lui.
+=======
+This tells React: "if any component inside this `` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
@@ -514,9 +518,9 @@ import { LevelContext } from './LevelContext.js';
export default function Section({ level, children }) {
return (
);
}
@@ -566,9 +570,15 @@ export const LevelContext = createContext(1);
Le résultat est le même qu'avec le code d'origine, mais vous n'avez plus besoin de transmettre la prop `level` à chaque composant `Heading`. Au lieu de ça, il « détermine » son niveau d'en-tête en interrogeant la `Section` la plus proche :
+<<<<<<< HEAD
1. Vous passez une prop `level` à la ``.
2. `Section` enrobe ses enfants dans un ``.
3. `Heading` demande la valeur la plus proche de `LevelContext` avec `useContext(LevelContext)`.
+=======
+1. You pass a `level` prop to the ``.
+2. `Section` wraps its children into ``.
+3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
## Utiliser et fournir le contexte depuis le même composant {/*using-and-providing-context-from-the-same-component*/}
@@ -595,9 +605,9 @@ export default function Section({ children }) {
const level = useContext(LevelContext);
return (
);
}
@@ -643,9 +653,9 @@ export default function Section({ children }) {
const level = useContext(LevelContext);
return (
);
}
@@ -776,9 +786,9 @@ export default function Section({ children, isFancy }) {
'section ' +
(isFancy ? 'fancy' : '')
}>
-
+
{children}
-
+
);
}
@@ -864,6 +874,7 @@ D'une manière générale, si certaines informations sont nécessaires pour des
+<<<<<<< HEAD
* Le contexte permet à un composant de fournir certaines informations à l'ensemble de l'arbre situé en dessous de lui.
* Pour transmettre un contexte :
1. Créez-le et exportez-le avec `export const MyContext = createContext(defaultValue)`.
@@ -872,6 +883,16 @@ D'une manière générale, si certaines informations sont nécessaires pour des
* Le contexte traverse tous les composants intermédiaires.
* Le contexte vous permet d'écrire des composants qui « s'adaptent à leur environnement ».
* Avant d'utiliser un contexte, essayez de passer par les props ou en mettant du JSX dans les `children`.
+=======
+* Context lets a component provide some information to the entire tree below it.
+* To pass context:
+ 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
+ 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
+ 3. Wrap children into `` to provide it from a parent.
+* Context passes through any components in the middle.
+* Context lets you write components that "adapt to their surroundings".
+* Before you use context, try passing props or passing JSX as `children`.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
@@ -1022,7 +1043,11 @@ li {
Retirez la prop `imageSize` de tous les composants.
+<<<<<<< HEAD
Créez et exportez `ImageSizeContext` depuis `Context.js`. Ensuite, enrobez la `List` dans `` pour propager la valeur vers le bas, puis `useContext(ImageSizeContext)` pour la lire dans `PlaceImage` :
+=======
+Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
@@ -1036,7 +1061,7 @@ export default function App() {
const [isLarge, setIsLarge] = useState(false);
const imageSize = isLarge ? 150 : 100;
return (
-
-
+
)
}
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
index 7d830d241..2510ca774 100644
--- a/src/content/learn/react-compiler.md
+++ b/src/content/learn/react-compiler.md
@@ -326,7 +326,11 @@ export default defineConfig({
### Webpack {/*usage-with-webpack*/}
+<<<<<<< HEAD
Un chargeur Webpack maintenu par la communauté est [désormais disponible ici](https://github.com/SukkaW/react-compiler-webpack).
+=======
+A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
### Expo {/*usage-with-expo*/}
@@ -362,7 +366,11 @@ React Compiler peut vérifier statiquement la plupart des Règles de React, et
### Comment savoir si mes composants ont été optimisés ? {/*how-do-i-know-my-components-have-been-optimized*/}
+<<<<<<< HEAD
[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+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
### Quelque chose ne fonctionne plus après la compilation {/*something-is-not-working-after-compilation*/}
diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md
index f19187126..8abb2dec5 100644
--- a/src/content/learn/react-developer-tools.md
+++ b/src/content/learn/react-developer-tools.md
@@ -52,6 +52,7 @@ Pour finir, rafraîchissez votre page dans le navigateur pour l'afficher dans le
+<<<<<<< HEAD
## Mobile natif (React Native) {/*mobile-react-native*/}
Les outils de développement React peuvent également être utilisés pour inspecter les applis construites avec [React Native](https://reactnative.dev/).
@@ -59,11 +60,15 @@ La façon la plus simple d'utiliser les outils de développement React consiste
```bash
# Yarn
yarn global add react-devtools
+=======
+## Mobile (React Native) {/*mobile-react-native*/}
-# Npm
-npm install -g react-devtools
-```
+To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/react-native-devtools), the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
+
+[Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging)
+<<<<<<< HEAD
Ouvrez alors les outils de développement depuis le terminal :
```bash
react-devtools
@@ -74,3 +79,6 @@ react-devtools
> Essayez de relancer l'appli si les outils de développement ne se connectent toujours pas au bout de quelques secondes.
[En apprendre plus sur le débogage de React Native](https://reactnative.dev/docs/debugging).
+=======
+> For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the [Safari and other browsers](#safari-and-other-browsers) guide above.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md
index e83b99e31..4d921d336 100644
--- a/src/content/learn/render-and-commit.md
+++ b/src/content/learn/render-and-commit.md
@@ -70,9 +70,15 @@ Essayez de commenter l'appel à `root.render()` pour voir votre composant dispar
Une fois que le composant a fait son rendu initial, vous pouvez déclencher des rendus supplémentaires en mettant à jour son état au moyen d'une [fonction `set`](/reference/react/useState#setstate). Mettre à jour l'état local d'un composant met automatiquement un rendu en file d'attente. (C'est un peu comme le convive d'un restaurant qui commanderait du thé, un dessert et plein d'autres choses après avoir passé sa commande initiale, en fonction de l'état de sa faim et de sa soif.)
+<<<<<<< HEAD
+=======
+
+
+
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
## Étape 2 : rendu des composants par React {/*step-2-react-renders-your-components*/}
@@ -84,7 +90,11 @@ Après que vous avez déclenché un rendu, React appelle vos composants pour dé
Ce processus est récursif : si le composant mis à jour renvoie un autre composant, React fera le rendu de *ce* composant-là ensuite, et si ce dernier renvoie à son tour un autre composant, il fera le rendu de *ce* composant-là, et ainsi de suite. Le processus continue jusqu'à ce qu'il ne reste plus de composants imbriqués à traiter, pour que React sache exactement ce qu'il doit afficher à l'écran.
+<<<<<<< HEAD
Dans l'exemple qui suit, React appellera `Gallery()`, puis plusieurs fois `Image()` :
+=======
+In the following example, React will call `Gallery()` and `Image()` several times:
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
@@ -148,10 +158,17 @@ Le comportement par défaut, qui fait le rendu de tous les composants enveloppé
## Étape 3 : commit dans le DOM par React {/*step-3-react-commits-changes-to-the-dom*/}
+<<<<<<< HEAD
Après avoir fait le rendu de vos composants (c'est-à-dire après avoir appelé leurs fonctions), React devra mettre à jour le DOM.
- **Lors du rendu initial**, React utilisera l'API DOM [`appendChild()`](https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild) pour retranscrire à l'écran tous les nœuds DOM qu'il a créés.
- **Lors des rendus ultérieurs**, React s'attachera à effectuer le strict minimum d'opérations nécessaires (qu'il aura déterminées lors de la phase de rendu !) pour mettre le DOM en correspondance avec le résultat du dernier rendu en date.
+=======
+After rendering (calling) your components, React will modify the DOM.
+
+* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
+* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
**React ne modifie les nœuds DOM que s'il y a un écart d'un rendu à l'autre.** Par exemple, voici un composant qui refait son rendu avec des props différentes passées depuis son parent à chaque seconde. Remarquez que vous pouvez ajouter du texte dans l'``, modifier sa `value`, mais le texte ne disparaît pas quand le composant refait son rendu :
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index 6c957cfdd..763808194 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -1334,7 +1334,11 @@ export function useOnlineStatus() {
Dans l’exemple ci-dessus, `useOnlineStatus` est implémenté avec le duo [`useState`](/reference/react/useState) et [`useEffect`](/reference/react/useEffect). Cependant, ce n’est pas la meilleure solution possible. Elle ne tient pas compte d’un certain nombre de cas limites. Par exemple, elle suppose que lorsque le composant est monté, `isOnline` est déjà à `true`, mais ça peut être faux si le réseau est d’entrée de jeu hors-ligne. Vous pouvez utiliser l’API du navigateur [`navigator.onLine`](https://developer.mozilla.org/fr/docs/Web/API/Navigator/onLine) pour vérifier ça, mais l’utiliser directement ne marchera pas sur le serveur pour générer le HTML initial. En bref, ce code peut être amélioré.
+<<<<<<< HEAD
Heureusement, React 18 inclut une API dédiée appelée [`useSyncExternalStore`](/reference/react/useSyncExternalStore) qui se charge de tous ces problèmes pour vous. Voici votre Hook personnalisé `useOnlineStatus` réécrit pour en tirer avantage :
+=======
+React includes a dedicated API called [`useSyncExternalStore`](/reference/react/useSyncExternalStore) which takes care of all of these problems for you. Here is your `useOnlineStatus` Hook, rewritten to take advantage of this new API:
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
diff --git a/src/content/learn/setup.md b/src/content/learn/setup.md
new file mode 100644
index 000000000..2c46ee148
--- /dev/null
+++ b/src/content/learn/setup.md
@@ -0,0 +1,28 @@
+---
+title: Setup
+---
+
+
+React integrates with tools like editors, TypeScript, browser extensions, and compilers. This section will help you get your environment set up.
+
+
+
+## Editor Setup {/*editor-setup*/}
+
+See our [recommended editors](/learn/editor-setup) and learn how to set them up to work with React.
+
+## Using TypeScript {/*using-typescript*/}
+
+TypeScript is a popular way to add type definitions to JavaScript codebases. [Learn how to integrate TypeScript into your React projects](/learn/typescript).
+
+## React Developer Tools {/*react-developer-tools*/}
+
+React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](learn/react-developer-tools).
+
+## React Compiler {/*react-compiler*/}
+
+React Compiler is a tool that automatically optimizes your React app. [Learn more](/learn/react-compiler).
+
+## Next steps {/*next-steps*/}
+
+Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day.
diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index 7bfaeaf36..fba318c67 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -1450,7 +1450,11 @@ Si votre *linter* est [configuré pour React](/learn/editor-setup#linting), vous
#### Retirer l'état superflu {/*remove-unnecessary-state*/}
+<<<<<<< HEAD
Dans cet exemple, cliquer sur le bouton devrait demander à l'utilisateur son nom et le saluer dans une alerte. Vous avez essayé de recourir à un état pour vous souvenir du nom, mais pour une raison ou une autre ça affiche toujours « Bonjour ! ».
+=======
+When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason the first time it shows "Hello, !", and then "Hello, [name]!" with the previous input every time after.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
Pour corriger ce code, retirez la variable d'état superflue. (Nous explorerons les [raisons de ce problème](/learn/state-as-a-snapshot) prochainement.)
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 79a2f023f..71f8b847f 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -297,7 +297,11 @@ export default function Square() {
}
```
+<<<<<<< HEAD
La section _browser_ devrait afficher un carré avec un X à l'intérieur, comme ceci :
+=======
+The _browser_ section should be displaying a square with an X in it like this:
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
@@ -1333,7 +1337,11 @@ Récapitulons ce qui se passe techniquement lorsque l'utilisateur clique sur la
2. `handleClick` utilise son argument (`0`) pour mettre à jour le premier élément du tableau `squares`, le faisant passer de `null` à `X`.
3. L'état `squares` du composant `Board` est mis à jour, du coup `Board` et tous ses enfants refont leur rendu. Ça modifie la prop `value` du composant `Square` d'index `0` pour la passer de `null` à `X`.
+<<<<<<< HEAD
Au final l'utilisateur voit que la case supérieure gauche a changé après qu'il a cliqué dessus : elle est passée du vide à un `X`.
+=======
+In the end the user sees that the upper left square has changed from empty to having an `X` after clicking it.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
@@ -1414,7 +1422,11 @@ Mais attendez une minute, il y a un problème : essayez de cliquer plusieurs fo
Le `X` est écrasé par un `O` ! Même si ça pourrait constituer une variante intéressante du jeu, nous allons nous en tenir aux règles conventionnelles.
+<<<<<<< HEAD
Lorsque vous marquez une case avec un `X` ou un `O`, vous ne vérifiez pas d'abord si la case a déjà une valeur `X` ou `O`. Vous pouvez corriger ça en faisant un *retour anticipé*. Vérifiez si la case a déjà un `X` ou un `O`. Si la case est déjà remplie, faites un `return` tôt dans la fonction `handleClick`, avant qu'elle ne tente de mettre à jour l'état du plateau.
+=======
+When you mark a square with an `X` or an `O` you aren't first checking to see if the square already has an `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has an `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
```js {2,3,4}
function handleClick(i) {
@@ -1564,7 +1576,11 @@ Peu importe que vous définissiez `calculateWinner` avant ou après `Board`. Me
+<<<<<<< HEAD
Vous appellerez `calculateWinner(squares)` dans la fonction `handleClick` du composant `Board` pour vérifier si un joueur a gagné. Vous pouvez effectuer cette vérification au même endroit que celle pour une case déjà remplie. Dans les deux cas, nous souhaitons un retour anticipé :
+=======
+You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has an `X` or an `O`. We'd like to return early in both cases:
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
```js {2}
function handleClick(i) {
@@ -2259,7 +2275,11 @@ body {
+<<<<<<< HEAD
Lorsque vous itérez sur le tableau `history` au sein de la fonction que vous avez passée à `map`, l'argument `squares` vaut tour à tour chaque élément de `history`, et l'argument `move` vaut tour à tour chaque index de l'historique : `0`, `1`, `2`, etc. (Dans la plupart des cas, vous auriez besoin des données elles-mêmes, mais pour notre liste de coups nous n'avons besoin que des indices.)
+=======
+As you iterate through the `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.)
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
Pour chaque coup de l'historique de notre partie de tic-tac-toe, vous créez un élément de liste `` qui contient un bouton `
+<<<<<<< HEAD
Ça ne fonctionne qu'à un niveau de profondeur, et c'est vraiment une échappatoire. N'en abusez pas. React ne rattrapera le coup que pour les contenus textuels, il risque donc de rester quelques incohérences jusqu'au prochain rendu.
+=======
+This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. React will **not** attempt to patch mismatched text content.
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
---
@@ -371,10 +386,15 @@ export default function App({counter}) {
Il est toutefois rare d'appeler [`root.render`](#root-render) sur une racine hydratée. En général, vos composants [mettront plutôt à jour l'état](/reference/react/useState).
+<<<<<<< HEAD
### Afficher un dialogue lors d'erreurs non capturées {/*show-a-dialog-for-uncaught-errors*/}
+=======
+### Error logging in production {/*error-logging-in-production*/}
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
-
+By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`:
+<<<<<<< HEAD
`onUncaughtError` n'est disponible que dans la dernière version React Canary.
@@ -567,21 +587,22 @@ export function reportRecoverableError({error, cause, componentStack}) {
```
```js src/index.js active
+=======
+```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack", 15]]
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
import { hydrateRoot } from "react-dom/client";
-import App from "./App.js";
-import {reportUncaughtError} from "./reportError";
-import "./styles.css";
-import {renderToString} from 'react-dom/server';
+import { reportCaughtError } from "./reportError";
const container = document.getElementById("root");
-const root = hydrateRoot(container, , {
- onUncaughtError: (error, errorInfo) => {
- if (error.message !== 'Known error') {
- reportUncaughtError({
+const root = hydrateRoot(container, {
+ onCaughtError: (error, errorInfo) => {
+ if (error.message !== "Known error") {
+ reportCaughtError({
error,
- componentStack: errorInfo.componentStack
+ componentStack: errorInfo.componentStack,
});
}
+<<<<<<< HEAD
}
});
```
@@ -648,10 +669,15 @@ const root = hydrateRoot(
}
);
root.render();
+=======
+ },
+});
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
```
L'option onCaughtError est une fonction avec deux arguments :
+<<<<<<< HEAD
1. L'error qui a été capturée par le Périmètre.
2. Un objet errorInfo qui contient la componentStack de l'erreur.
@@ -813,45 +839,87 @@ export function reportUncaughtError({error, cause, componentStack}) {
export function reportRecoverableError({error, cause, componentStack}) {
reportError({ title: "Erreur récupérable", error, componentStack, dismissable: true });
+=======
+1. The error that was thrown.
+2. An errorInfo object that contains the componentStack of the error.
+
+Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system:
+
+
+
+```js src/reportError.js
+function reportError({ type, error, errorInfo }) {
+ // The specific implementation is up to you.
+ // `console.error()` is only used for demonstration purposes.
+ console.error(type, error, "Component Stack: ");
+ console.error("Component Stack: ", errorInfo.componentStack);
+}
+
+export function onCaughtErrorProd(error, errorInfo) {
+ if (error.message !== "Known error") {
+ reportError({ type: "Caught", error, errorInfo });
+ }
+}
+
+export function onUncaughtErrorProd(error, errorInfo) {
+ reportError({ type: "Uncaught", error, errorInfo });
+}
+
+export function onRecoverableErrorProd(error, errorInfo) {
+ reportError({ type: "Recoverable", error, errorInfo });
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
}
```
```js src/index.js active
import { hydrateRoot } from "react-dom/client";
import App from "./App.js";
-import {reportCaughtError} from "./reportError";
-import "./styles.css";
+import {
+ onCaughtErrorProd,
+ onRecoverableErrorProd,
+ onUncaughtErrorProd,
+} from "./reportError";
const container = document.getElementById("root");
-const root = hydrateRoot(container, , {
- onCaughtError: (error, errorInfo) => {
- if (error.message !== 'Known error') {
- reportCaughtError({
- error,
- componentStack: errorInfo.componentStack
- });
- }
- }
+hydrateRoot(container, , {
+ // Keep in mind to remove these options in development to leverage
+ // React's default handlers or implement your own overlay for development.
+ // The handlers are only specfied unconditionally here for demonstration purposes.
+ onCaughtError: onCaughtErrorProd,
+ onRecoverableError: onRecoverableErrorProd,
+ onUncaughtError: onUncaughtErrorProd,
});
```
```js src/App.js
-import { useState } from 'react';
-import { ErrorBoundary } from "react-error-boundary";
+import { Component, useState } from "react";
-export default function App() {
- const [error, setError] = useState(null);
-
- function handleUnknown() {
- setError("unknown");
+function Boom() {
+ foo.bar = "baz";
+}
+
+class ErrorBoundary extends Component {
+ state = { hasError: false };
+
+ static getDerivedStateFromError(error) {
+ return { hasError: true };
}
- function handleKnown() {
- setError("known");
+ render() {
+ if (this.state.hasError) {
+ return Something went wrong.
;
+ }
+ return this.props.children;
}
-
+}
+
+export default function App() {
+ const [triggerUncaughtError, settriggerUncaughtError] = useState(false);
+ const [triggerCaughtError, setTriggerCaughtError] = useState(false);
+
return (
<>
+<<<<<<< HEAD
{
@@ -939,6 +1007,26 @@ Vous pouvez utiliser l'option `onRecoverableError` pour afficher des dialogues d
```html index.html hidden
+=======
+
+ {triggerUncaughtError && }
+
+ {triggerCaughtError && (
+
+
+
+ )}
+
+ );
+}
+```
+
+```html public/index.html hidden
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
@@ -946,6 +1034,7 @@ Vous pouvez utiliser l'option `onRecoverableError` pour afficher des dialogues d
@@ -1161,6 +1250,14 @@ function Throw({error}) {
}
```
+=======
+ Purposefully using HTML content that differs from the server-rendered content to trigger recoverable errors.
+-->
+Server content before hydration.
+
+
+```
+>>>>>>> 55986965fbf69c2584040039c9586a01bd54eba7
## Dépannage {/*troubleshooting*/}
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index b689fc043..12d83b512 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -246,6 +246,7 @@ Ces événements sont déclenchés pour les ressources comme [`