Skip to content

Commit

Permalink
Merge pull request #607 from reactjs/copy/react-dom-hooks
Browse files Browse the repository at this point in the history 
Translation of the React-DOM > Hooks chapter page
  • Loading branch information
@tdd
tdd authored Oct 23, 2023
2 parents 375161f + c98c870 commit d1ab799
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 25 deletions.
37 changes: 21 additions & 16 deletions TRANSLATORS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,16 +70,19 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
<li><a href="https://fr.react.dev/learn/conditional-rendering">Affichage conditionnel</a></li>
<li><a href="https://fr.react.dev/learn/rendering-lists">Afficher des listes</a></li>
<li><a href="https://fr.react.dev/learn/keeping-components-pure">Garder les composants purs</a></li>
<li><a href="https://fr.react.dev/learn/understanding-your-ui-as-a-tree">Votre UI vue comme un arbre</a></li>
<li><a href="https://fr.react.dev/learn/state-a-components-memory">L’état : la mémoire d’un composant</a></li>
<li><a href="https://fr.react.dev/learn/render-and-commit">Rendu et Commit</a></li>
<li><a href="https://fr.react.dev/learn/state-as-a-snapshot">L’état est un instantané</a></li>
<li><a href="https://fr.react.dev/learn/queueing-a-series-of-state-updates">Cumuler les mises à jour d’un même état</a></li>
<li><a href="https://fr.react.dev/learn/preserving-and-resetting-state">Préserver et réinitialiser l’état</a> (arbres UI)</li>
<li><a href="https://fr.react.dev/learn/escape-hatches">Échappatoires</a> (accueil chapitre)</li>
<li><a href="https://fr.react.dev/learn/referencing-values-with-refs">Référencer des valeurs avec les refs</a></li>
<li><a href="https://fr.react.dev/learn/manipulating-the-dom-with-refs">Manipuler le DOM avec des refs</a></li>
<li><a href="https://fr.react.dev/learn/synchronizing-with-effects">Synchroniser grâce aux Effets</a></li>
<li><a href="https://fr.react.dev/learn/you-might-not-need-an-effect">Vous n’avez pas forcément besoin d’un Effet</a></li>
<li><a href="https://fr.react.dev/learn/removing-effect-dependencies">Alléger les dépendances des Effets</a></li>
<li><a href="https://fr.react.dev/reference/react/use"><code>use</code></a></li>
<li><a href="https://fr.react.dev/reference/react/useCallback"><code>useCallback</code></a></li>
<li><a href="https://fr.react.dev/reference/react/useEffect"><code>useEffect</code></a></li>
<li><a href="https://fr.react.dev/reference/react/useImperativeHandle"><code>useImperativeHandle</code></a></li>
Expand All @@ -91,13 +94,15 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
<li><a href="https://fr.react.dev/reference/react/useTransition"><code>useTransition</code></a></li>
<li><a href="https://fr.react.dev/reference/react/experimental_taintObjectReference"><code>experimental_taintObjectReference</code></a></li>
<li><a href="https://fr.react.dev/reference/react/experimental_taintUniqueValue"><code>experimental_taintUniqueValue</code></a></li>
<li><a href="https://fr.react.dev/reference/react/experimental_useEffectEvent"><code>experimental_useEffectEvent</code></a></li>
<li><a href="https://fr.react.dev/reference/react/Suspense"><code>&lt;Suspense&gt;</code></a></li>
<li><a href="https://fr.react.dev/reference/react/cache"><code>cache</code></a></li>
<li><a href="https://fr.react.dev/reference/react/forwardRef"><code>forwardRef</code></a></li>
<li><a href="https://fr.react.dev/reference/react/startTransition"><code>startTransition</code></a></li>
<li><a href="https://fr.react.dev/reference/react/directives">Directives</a> (accueil chapitre)</li>
<li><a href="https://fr.react.dev/reference/react/use-client"><code>'use client'</code></a></li>
<li><a href="https://fr.react.dev/reference/react/use-server"><code>'use server'</code></a></li>
<li><a href="https://fr.react.dev/reference/react-dom/hooks">react-dom : Hooks</a> (accueil chapitre)</li>
<li><a href="https://fr.react.dev/reference/react-dom/components">react-dom : Composants</a> (accueil chapitre)</li>
<li><a href="https://fr.react.dev/reference/react-dom/components/select"><code>&lt;select&gt;</code></a></li>
<li><a href="https://fr.react.dev/reference/react-dom">API React DOM intégrées</a></li>
Expand Down Expand Up @@ -208,8 +213,8 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
<td></td>
<td>
<ul>
<li><a href=https://fr.react.dev/learn/adding-interactivity">Ajouter de l'interactivité</a> (accueil chapitre)</li>
<li><a href=https://fr.react.dev/learn/reacting-to-input-with-state">Réagir à la saisie avec un état</a></li>
<li><a href="https://fr.react.dev/learn/adding-interactivity">Ajouter de l'interactivité</a> (accueil chapitre)</li>
<li><a href="https://fr.react.dev/learn/reacting-to-input-with-state">Réagir à la saisie avec un état</a></li>
</ul>
</td>
</tr>
Expand All @@ -218,8 +223,8 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
<td></td>
<td>
<ul>
<li><a href=https://fr.react.dev/learn/editor-setup">Configuration de l'éditeur</a></li>
<li><a href=https://fr.react.dev/reference/react-dom/components/option"><code>&lt;option&gt;</code></a></li>
<li><a href="https://fr.react.dev/learn/editor-setup">Configuration de l'éditeur</a></li>
<li><a href="https://fr.react.dev/reference/react-dom/components/option"><code>&lt;option&gt;</code></a></li>
</ul>
</td>
</tr>
Expand All @@ -228,18 +233,18 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
<td></td>
<td>
<ul>
<li><a href=https://fr.react.dev/learn/sharing-state-between-components">Partager l’état entre des composants</a></li>
<li><a href=https://fr.react.dev/learn/preserving-and-resetting-state">Préserver et réinitialiser l’état</a></li>
<li><a href=https://fr.react.dev/learn/extracting-state-logic-into-a-reducer">Extraire la logique d’état dans un réducteur</a></li>
<li><a href=https://fr.react.dev/learn/passing-data-deeply-with-context">Transmettre des données en profondeur avec le contexte</a></li>
<li><a href=https://fr.react.dev/learn/scaling-up-with-reducer-and-context">Mise à l’échelle en combinant réducteur et contexte</a></li>
<li><a href=https://fr.react.dev/learn/lifecycle-of-reactive-effects">Cycle de vie des Effets réactifs</a></li>
<li><a href=https://fr.react.dev/learn/separating-events-from-effects">Séparer les événements des Effets</a></li>
<li><a href=https://fr.react.dev/learn/reusing-logic-with-custom-hooks">Réutiliser de la logique grâce aux Hooks personnalisés</a></li>
<li><a href=https://fr.react.dev/reference/react/useContext"><code>useContext</code></a></li>
<li><a href=https://fr.react.dev/reference/react/useReducer"><code>useReducer</code></a></li>
<li><a href=https://fr.react.dev/reference/react/StrictMode"><code>&lt;StrictMode&gt;</code></a></li>
<li><a href=https://fr.react.dev/reference/react-dom/components/common">Composants React-DOM communs</a></li>
<li><a href="https://fr.react.dev/learn/sharing-state-between-components">Partager l’état entre des composants</a></li>
<li><a href="https://fr.react.dev/learn/preserving-and-resetting-state">Préserver et réinitialiser l’état</a> (sauf arbres UI)</li>
<li><a href="https://fr.react.dev/learn/extracting-state-logic-into-a-reducer">Extraire la logique d’état dans un réducteur</a></li>
<li><a href="https://fr.react.dev/learn/passing-data-deeply-with-context">Transmettre des données en profondeur avec le contexte</a></li>
<li><a href="https://fr.react.dev/learn/scaling-up-with-reducer-and-context">Mise à l’échelle en combinant réducteur et contexte</a></li>
<li><a href="https://fr.react.dev/learn/lifecycle-of-reactive-effects">Cycle de vie des Effets réactifs</a></li>
<li><a href="https://fr.react.dev/learn/separating-events-from-effects">Séparer les événements des Effets</a></li>
<li><a href="https://fr.react.dev/learn/reusing-logic-with-custom-hooks">Réutiliser de la logique grâce aux Hooks personnalisés</a></li>
<li><a href="https://fr.react.dev/reference/react/useContext"><code>useContext</code></a></li>
<li><a href="https://fr.react.dev/reference/react/useReducer"><code>useReducer</code></a></li>
<li><a href="https://fr.react.dev/reference/react/StrictMode"><code>&lt;StrictMode&gt;</code></a></li>
<li><a href="https://fr.react.dev/reference/react-dom/components/common">Composants React-DOM communs</a></li>
</ul>
</td>
</tr>
Expand Down
18 changes: 9 additions & 9 deletions src/content/reference/react-dom/hooks/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
title: "React DOM Hooks"
title: "Hooks fournis par React DOM"
---

<Intro>

The `react-dom` package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers *and other environments* see [the React Hooks page](/reference/react). This page lists all the Hooks in the `react-dom` package.
Le module `react-dom` contient les Hooks qui ne sont pris en charge que dans des applications web (qui ne tournent que dans un environnement DOM navigateur). Ces Hooks ne sont pas pris en charge dans des environnements hors-navigateur tels que les applications iOS, Android ou Windows. Si vous cherchez les Hooks pris en charge dans les navigateurs *et les autres environnements*, consultez la [page des Hooks React](/reference/react). La page où vous vous trouvez liste quant à elle tous les Hooks du module `react-dom`.

</Intro>

---

## Form Hooks {/*form-hooks*/}
## Hooks de formulaires {/*form-hooks*/}

<Canary>

Form Hooks are currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
Les Hooks de formulaires ne sont actuellement disponibles 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).

</Canary>

*Forms* let you create interactive controls for submitting information. To manage forms in your components, use one of these Hooks:
Les *formulaires* vous permettent de créer des contrôles interactifs pour envoyer des informations. Pour gérer les formulaires dans vos composants, utilisez l'un des Hooks suivants :

* [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) allows you to make updates to the UI based on the status of the a form.
* `useFormState` allows you to manage state inside a form.
* [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) vous permet de mettre à jour l'UI sur base de l'état d'un formulaire.
* `useFormState` vous permet de gérer l'état au sein d'un formulaire.

```js
function Form({ action }) {
Expand All @@ -31,7 +31,7 @@ function Form({ action }) {
const [count, incrementFormAction] = useFormState(increment, 0);
return (
<form action={action}>
<button formAction={incrementFormAction}>Count: {count}</button>
<button formAction={incrementFormAction}>Compteur : {count}</button>
<Button />
</form>
);
Expand All @@ -41,7 +41,7 @@ function Button() {
const { pending } = useFormStatus();
return (
<button disabled={pending} type="submit">
Submit
Envoyer
</button>
);
}
Expand Down

0 comments on commit d1ab799

Please sign in to comment.