diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index 47b66eabb..1ded5fc16 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -429,7 +429,11 @@ export default function PackingList() { Remarquez qu'il faut écrire `importance > 0 && ...` plutôt que juste `importance && ...` afin de nous assurer que si `importance` vaut `0`, `0` ne sera pas affiché comme résultat ! +<<<<<<< HEAD Dans cette solution, on utilise deux conditions distinctes pour insérer une espace entre le nom et le libellé d'importance. On aurait aussi pu utiliser un fragment avec une espace au début : `importance > 0 && <> ...` ou ajouter l'espace immédiatement au début du `` : `importance > 0 && ...`. +======= +In this solution, two separate conditions are used to insert a space between then name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> ...` or add a space immediately inside the ``: `importance > 0 && ...`. +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad @@ -642,6 +646,12 @@ Merci à [Dan Lebowitz](https://twitter.com/lebo) pour la design du site et à [ Côté développement, merci à [Jared Palmer](https://twitter.com/jaredpalmer) pour avoir codé le prototype. Merci à [Dane Grant](https://twitter.com/danecando) et [Dustin Goodman](https://twitter.com/dustinsgoodman) de [ThisDotLabs](https://www.thisdot.co/) pour leur aide dans le développement de l'UI. Merci à [Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor) et [Danilo Woznica](https://twitter.com/danilowoz) de [CodeSandbox](https://codesandbox.io/) pour leur boulot sur l'intégration des bacs à sable. Merci à [Rick Hanlon](https://twitter.com/rickhanlonii) pour son travail de qualité sur le développement et le design, l'affinage des couleurs et d'autres subtilités. Merci à [Harish Kumar](https://www.strek.in/) et [Luna Ruan](https://twitter.com/lunaruan) pour avoir ajouté des nouvelles fonctionnalités au site et pour nous aider à le maintenir. +<<<<<<< HEAD Un immense merci à celles et ceux qui ont donné de leur temps pour participer aux programmes de tests alpha et beta. Votre enthousiasme et vos retours précieux nous ont aidé à affiner ces docs. Un merci tout particulier à notre beta testeuse [Debbie O'Brien](https://twitter.com/debs_obrien), qui a présenté son expérience avec les docs React à la React Conf 2021. Enfin, merci à la communauté React de nous avoir inspirés dans cette entreprise. Vous êtes la raison de tout cela, et nous espérons que ces nouvelles docs vous aideront à utiliser React pour construire toutes les interfaces utilisateurs que vous pourriez imaginer. +======= +Huge thanks to the folks who volunteered their time to participate in the alpha and beta testing program. Your enthusiasm and invaluable feedback helped us shape these docs. A special shout out to our beta tester, [Debbie O'Brien](https://twitter.com/debs_obrien), who gave a talk about her experience using the React docs at React Conf 2021. + +Finally, thanks to the React community for being the inspiration behind this effort. You are the reason we do this, and we hope that the new docs will help you use React to build any user interface that you want. +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md index a165df75d..dd4a42e1f 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -44,10 +44,17 @@ Les avertissements de développement n'affectent pas le comportement de votre ap En général, nous *ne changeons pas* le numéro de version majeure pour les raisons suivantes : +<<<<<<< HEAD * **Les avertissements de développement.** Puisqu'ils n'affectent pas le comportement de production, nous pouvons ajouter de nouveaux avertissements ou en modifier des existants entre deux versions majeures. C'est justement ce qui nous permet de communiquer de manière fiable sur les prochaines ruptures de compatibilité ascendante. * **Les API commençant par `unstable_`.** Il s'agit de fonctionnalités expérimentales dont les API ne sont pas encore stabilisées. En les livrant avec le préfixe `unstable_`, nous pouvons itérer plus rapidement et obtenir une API stable plus vite. * **Les versions Alpha et Canary de React.** Nous fournissons des versions alpha de React pour tester les nouvelles fonctionnalités en amont, mais nous avons besoin de la flexibilité nécessaire pour apporter les changements en fonction de ce que nous apprenons durant cette période. Si vous utilisez ces versions, n'oubliez pas que ces API peuvent changer avant la sortie de la version stable. * **Les API non documentées et les structures de données internes.** Il n'y a aucune garantie si vous utilisez des proriétés internes telle que `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` ou `__reactInternalInstance$uk43rzhitjg`. C'est à vos risques et périls. +======= +* **Development warnings.** Since these don't affect production behavior, we may add new warnings or modify existing warnings in between major versions. In fact, this is what allows us to reliably warn about upcoming breaking changes. +* **APIs starting with `unstable_`.** These are provided as experimental features whose APIs we are not yet confident in. By releasing these with an `unstable_` prefix, we can iterate faster and get to a stable API sooner. +* **Alpha and Canary versions of React.** We provide alpha versions of React as a way to test new features early, but we need the flexibility to make changes based on what we learn in the alpha period. If you use these versions, note that APIs may change before the stable release. +* **Undocumented APIs and internal data structures.** If you access internal property names like `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` or `__reactInternalInstance$uk43rzhitjg`, there is no warranty. You are on your own. +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad Cette politique se veut pragmatique : il ne s'agit évidemment pas de vous donner la migraine. Si nous changions de version majeure pour toutes ces raisons, nous finirions par publier plus de versions majeures et par conséquent nous causerions de nombreux problèmes de versions à la communauté. Ça signifierait également que nous ne pourrions pas améliorer React aussi vite que nous le voudrions. diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index bcc33006c..f9ea602be 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -624,7 +624,11 @@ export default function PackingList() { Remarquez qu'il faut écrire `importance > 0 && ...` plutôt que juste `importance && ...` afin de nous assurer que si `importance` vaut `0`, `0` ne sera pas affiché comme résultat ! +<<<<<<< HEAD Dans cette solution, on utilise deux conditions distinctes pour insérer une espace entre le nom et le libellé d'importance. On aurait aussi pu utiliser un fragment avec une espace au début : `importance > 0 && <> ...` ou ajouter l'espace immédiatement au début du `` : `importance > 0 && ...`. +======= +In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> ...` or add a space immediately inside the ``: `importance > 0 && ...`. +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index dd3d5cc27..0aaeca561 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -1149,7 +1149,11 @@ hr { +<<<<<<< HEAD Vous aurez besoin soit de convertir le `map` en une boucle manuelle, soit d'utiliser un Fragment. +======= +You'll either need to convert `map` to a manual loop, or use a Fragment. +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad @@ -1212,7 +1216,11 @@ hr { Il ne suffit plus d'utiliser l'index de la ligne comme `key` car chaque séparateur et paragraphe font ici partie du même tableau. En revanche, vous pouvez leur donner à chacun une clé distincte en utilisant un suffixe, par exemple `key={i + '-text'}`. +<<<<<<< HEAD Une autre approche consisterait à produire une collection de Fragments qui contiennent chacun `
` et `

...

`. Attention cependant, la syntaxe concise `<>...` ne nous permettrait pas de passer des clés, nous devons donc écrire `` explicitement : +======= +Alternatively, you could render a collection of Fragments which contain `
` and `

...

`. However, the `<>...` shorthand syntax doesn't support passing keys, so you'd have to write `` explicitly: +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad @@ -1258,7 +1266,11 @@ hr { +<<<<<<< HEAD Souvenez-vous que les Fragments (souvent écrits `<> `) vous permettent de regrouper des nœuds JSX sans avoir à ajouter des `
` superflues ! +======= +Remember, Fragments (often written as `<> `) let you group JSX nodes without adding extra `
`s! +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 64c0d1f7c..14a0fbed1 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -364,13 +364,17 @@ export default function Square() { -/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment `<>...`? +/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX Fragment `<>...`? +<<<<<<< HEAD *(« Des éléments JSX adjacents doivent être enrobés par une balise englobante. Vouliez-vous utiliser un Fragment JSX `<>...` ? », NdT.)* Les composants React doivent ne renvoyer qu'un unique élément JSX, et non plusieurs éléments JSX adjacents, comme nos deux boutons. Pour corriger ça, vous pouvez utiliser des *Fragments* (`<>` et ``) pour enrober plusieurs éléments JSX adjacents, comme ceci : +======= +React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *Fragments* (`<>` and ``) to wrap multiple adjacent JSX elements like this: +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad ```js {3-6} export default function Square() { diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md index 46a3d25a9..e9930a3f5 100644 --- a/src/content/reference/react-dom/components/input.md +++ b/src/content/reference/react-dom/components/input.md @@ -34,8 +34,12 @@ Pour afficher un champ de saisie, utilisez le [composant natif `` du navi +<<<<<<< HEAD Les extensions de React à la prop `formAction` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, `formAction` est limitée à son fonctionnement [du composant HTML natif du navigateur](https://react.dev/reference/react-dom/components#all-html-components). Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels). +======= +React's extensions to the `formAction` prop are currently only available in React's Canary and experimental channels. In stable releases of React `formAction` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad [`formAction`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/input#formaction) : une chaîne de caractères ou une fonction. Cette prop a priorité sur le `
` pour les champs de `type="submit"` ou `type="image"`. Lorsqu'une URL est passée à `formAction`, le formulaire se comporte comme un formulaire HTML classique. Mais si une fonction est passée à `formAction`, la fonction traitera l'envoi du formulaire. Allez voir [``](/reference/react-dom/components/form#props). diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md index 601bcd250..5e75ed8d9 100644 --- a/src/content/reference/react-dom/hooks/useFormState.md +++ b/src/content/reference/react-dom/hooks/useFormState.md @@ -5,7 +5,11 @@ canary: true +<<<<<<< HEAD Le Hook `useFormState` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels). Par ailleurs, vous aurez besoin d'utiliser un framework qui prenne en charge les [React Server Components](/reference/react/use-client) pour tirer pleinement parti de `useFormState`. +======= +The `useFormState` Hook is currently only available in React's Canary and experimental channels. Learn more about [release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports [React Server Components](/reference/react/use-client) to get the full benefit of `useFormState`. +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 7ea9b97dd..62160b4cb 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -5,7 +5,11 @@ canary: true +<<<<<<< HEAD Le Hook `useFormStatus` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels). +======= +The `useFormStatus` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad @@ -38,7 +42,7 @@ function Submit() { return } -export default App() { +export default function App() { return ( diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md index 1192a3807..9cc27ec31 100644 --- a/src/content/reference/react/use-server.md +++ b/src/content/reference/react/use-server.md @@ -115,11 +115,21 @@ async function requestUsername(formData) { // ... } +<<<<<<< HEAD export default App() { +======= +export default function App() { + return ( +
+ + +
+ ); +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad } ``` diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index b4a0f83dc..a529ded9b 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -5,7 +5,11 @@ canary: true +<<<<<<< HEAD Le Hook `use` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels). +======= +The `use` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md index e3859db5e..7e41388b4 100644 --- a/src/content/reference/react/useOptimistic.md +++ b/src/content/reference/react/useOptimistic.md @@ -5,7 +5,11 @@ canary: true +<<<<<<< HEAD Le Hook `useOptimistic` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels). +======= +The `useOptimistic` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad @@ -27,7 +31,11 @@ Le Hook `useOptimistic` n'est actuellement disponible que sur les canaux de livr ### `useOptimistic(state, updateFn)` {/*useoptimistic*/} +<<<<<<< HEAD `useOptimistic` est un Hook React qui vous permet d'afficher un état distinct pendant qu'une action asynchrone est en cours. Il accepte un argument d'état et renvoie une copie de cet état qui peut être différente pendant l'exécution de l'action asynchrone (par exemple une requête réseau). Vous fournissez une fonction qui accepte en arguments l'état courant et les données fournies à l'action, et renvoie l'état optimiste à utiliser pendant que l'action est en cours. +======= +`useOptimistic` is a React Hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request. You provide a function that takes the current state and the input to the action, and returns the optimistic state to be used while the action is pending. +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad Cet état est qualifié « d'optimiste » parce qu'il est généralement utilisé pour immédiatement présenter à l'utilisateur le résultat de l'exécution de l'action, même si cette action met en réalité du temps à aboutir. diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index 3b85ca7b0..cc7574491 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -57,7 +57,11 @@ L'instantané actuel de la valeur issue de la source, que vous pouvez utiliser p * Si une fonction `subscribe` différente est passée lors d'un nouveau rendu, React se réabonnera à la source de données en utilisant cette nouvelle fonction `subscribe`. Vous pouvez éviter ça en déclarant `subscribe` hors du composant. +<<<<<<< HEAD * Si la source est modifiée au sein d'une [transition non bloquante](/reference/react/useTransition), React se rabattra sur une application bloquante de la mise à jour. Plus spécifiquement, React rappellera `getSnapshot` juste avant d'appliquer les modifications au DOM. Si la valeur renvoyée diffère de celle produite par le premier appel, React redémarrera le processus de transition de zéro, en l'appliquant cette fois en tant que mise à jour bloquante, pour garantir que chaque composant à l'écran reflète bien la même version de la source. +======= +* If the store is mutated during a [non-blocking transition update](/reference/react/useTransition), React will fall back to performing that update as blocking. Specifically, for every transition update, React will call `getSnapshot` a second time just before applying changes to the DOM. If it returns a different value than when it was called originally, React will restart the update from scratch, this time applying it as a blocking update, to ensure that every component on screen is reflecting the same version of the store. +>>>>>>> 6570e6cd79a16ac3b1a2902632eddab7e6abb9ad * Nous vous déconseillons de _suspendre_ un rendu basé sur une valeur de la source renvoyée par `useSyncExternalStore`. Ça vient de ce que les mutations de la source ne peuvent pas être [marquées comme des transitions non bloquantes](/reference/react/useTransition), et déclencheront donc le plus proche [affichage de secours `Suspense`](/reference/react/Suspense), remplaçant ainsi du contenu déjà affiché avec un écran montrant un indicateur de chargement, ce qui est généralement indésirable en termes d'UX.