merging all conflicts

reactjs · Mar 25, 2024 · eccfa54 · eccfa54
2 parents 6abda16 + 7bdbab1
commit eccfa54
Show file tree

Hide file tree

Showing 11 changed files with 745 additions and 4 deletions.
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
@@ -433,7 +433,11 @@ interface ModalRendererProps {
 
 Notez que vous ne pouvez pas utiliser TypeScript pour retreindre le type de vos enfants à certains éléments JSX spécifiques, vous ne pouvez donc pas vous appuyer sur le système de typage pour indiquer qu'un composant n'accepterait par exemple que des enfants `<li>`.
 
+<<<<<<< HEAD
 Vous trouverez un exemple complet avec `React.ReactNode` et `React.ReactElement` et la vérification de types activée dans [ce bac à sable TypeScript](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
+=======
+You can see an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
+>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
 
 ### Props de style {/*typing-style-props*/}
 
@@ -453,7 +457,11 @@ Nous vous conseillons les ressources suivantes *(toutes en anglais, NdT)* :
 
  - [Le handbook TypeScript](https://www.typescriptlang.org/docs/handbook/) est la documentation officielle du langage et couvre tous les aspects importants.
 
+<<<<<<< HEAD
  - [Les notes de versions de TypeScript](https://devblogs.microsoft.com/typescript/) présentent chaque nouvelle fonctionnalité en détails.
+=======
+ - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover new features in depth.
+>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
 
  - [L'antisèche React TypeScript](https://react-typescript-cheatsheet.netlify.app/) est une antisèche synthétique maintenue par la communauté pour utiliser TypeScript avec React, qui couvre pas mal de cas à la marge et aborde plus de sujets que cette page.
 

diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
@@ -79,7 +79,11 @@ Ces props sont **déconseillées** pour une utilisation avec React :
 
 #### Comportement spécifique de rendu {/*special-rendering-behavior*/}
 
+<<<<<<< HEAD
 React placera toujours l'élément DOM correspondant au composant `<link>` dans le `<head>` du document, peu importe où il figure dans l'arborescence React. Le `<head>` est le seul endroit valide pour un `<link>` dans le DOM, mais il est plus confortable, et préférable en termes de composition, qu'un composant représentant une page donnée puisse produire les composants `<link>` lui-même.
+=======
+React will always place the DOM element corresponding to the `<link>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<link>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<link>` components itself.
+>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
 
 Il y a toutefois quelques exceptions :
 
@@ -91,8 +95,13 @@ Il y a toutefois quelques exceptions :
 
 Qui plus est, si le `<link>` est une feuille de styles (en d'autres termes, ses props comportent `rel="stylesheet"`), React ajoutera le comportement spécifique que voici :
 
+<<<<<<< HEAD
 * Le composant qui utilise `<link>` [suspendra](/reference/react/Suspense) pendant le chargement de la feuille de styles.
 * Si plusieurs composants produisent des liens vers la même feuille de styles, React les dédoublonnera et ne placera qu'un lien dans le DOM. Deux liens sont considérés identiques s'ils ont la même valeur de prop `href`.
+=======
+* The component that renders `<link>` will [suspend](/reference/react/Suspense) while the stylesheet is loading.
+* If multiple components render links to the same stylesheet, React will de-duplicate them and only put a single link into the DOM. Two links are considered the same if they have the same `href` prop.
+>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
 
 Ce comportement connaît toutefois deux exceptions :
 
@@ -133,7 +142,11 @@ export default function BlogPage() {
 
 ### Lier une feuille de styles {/*linking-to-a-stylesheet*/}
 
+<<<<<<< HEAD
 Si un composant dépend d'une certaine feuille de styles pour s'afficher correctement, vous pouvez produire un lien vers cette feuille de styles depuis le composant. Votre composant [suspendra](/reference/react/Suspense) le temps que la feuille de styles se charge. Vous pouvez fournir une prop `precedence` qui indiquera à React où injecter la feuille par rapport aux autres — les feuilles de styles avec une précédence plus forte pourront surcharger celles avec une précédence plus faible.
+=======
+If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence.
+>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
 
 <Note>
 
@@ -219,7 +232,11 @@ function Component() {
 
 ### Annoter des éléments spécifiques du document avec des liens {/*annotating-specific-items-within-the-document-with-links*/}
 
+<<<<<<< HEAD
 Vous pouvez utiliser le composant `<link>` avec la prop `itemProp` pour annoter des éléments spécifiques du document avec des liens vers des ressources associées. Dans ce cas, React, n'injectera *pas* ces annotations dans le `<head>` du document, mais les placera comme n'importe quel autre composant React.
+=======
+You can use the `<link>` component with the `itemProp` prop to annotate specific items within the document with links to related resources. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component.
+>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
 
 ```js
 <section itemScope>

diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
@@ -52,7 +52,11 @@ Ces props sont **déconseillées** pour une utilisation avec React :
 
 #### Comportement spécifique de rendu {/*special-rendering-behavior*/}
 
+<<<<<<< HEAD
 React peut déplacer les composants `<style>` dans le `<head>` du document, dédoublonner les feuilles de styles identiques et [suspendre](/reference/react/Suspense) pendant le chargement de la feuille de styles.
+=======
+React can move `<style>` components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](/reference/react/Suspense) while the stylesheet is loading.
+>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
 
 Pour activer ces comportements, fournissez les props `href` et `precedence`.  React dédoublonnera les feuilles de styles qui ont le même `href`.  La précédence indique à React où placer le nœud DOM `<style>` par rapport aux autres dans le `<head>` du document, ce qui détermine quelle feuille de styles peut surcharger quelle autre.
 

diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
@@ -196,14 +196,16 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
   border: 1px solid #aaa;
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;
@@ -283,14 +285,16 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
   border: 1px solid #aaa;
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;
@@ -377,14 +381,16 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
   border: 1px solid #aaa;
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;
@@ -467,14 +473,16 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
   border: 1px solid #aaa;
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;

diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
@@ -29,6 +29,18 @@ React-DOM comprend les fonctionnalités qui ne sont prises en charge que pour le
 * [Fonctions côté client](/reference/react-dom/client) - L'API dans `react-dom/client` vous permet d'effectuer le rendu de composants React côté client (dans le navigateur).
 * [Fonctions côté serveur](/reference/react-dom/server) - L'API dans `react-dom/server` vous permet d'effectuer le rendu de composants React côté serveur, vers du HTML.
 
+<<<<<<< HEAD
 ## API React historique {/*legacy-apis*/}
+=======
+## Rules of React {/*rules-of-react*/}
+
+React has idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications:
+
+* [Components and Hooks must be pure](/reference/rules/components-and-hooks-must-be-pure) – Purity makes your code easier to understand, debug, and allows React to automatically optimize your components and hooks correctly.
+* [React calls Components and Hooks](/reference/rules/react-calls-components-and-hooks) – React is responsible for rendering components and hooks when necessary to optimize the user experience.
+* [Rules of Hooks](/reference/rules/rules-of-hooks) – Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
+
+## Legacy APIs {/*legacy-apis*/}
+>>>>>>> 7bdbab144e09d4edf793ff5128080eb1dba79be4
 
 * [API React historique](/reference/react/legacy) - Ces fonctions sont présentes dans le module `react`, mais leur utilisation est découragée pour tout nouveau code.