Traduction of the "Reacting to input with state" page #461

KohdeAvekLeQ · 2023-04-27T20:57:30Z

Voilà ma PR pour cette nouvelle page, j'ai tenu compte des remarques de la précédente, il devrait y avoir moins d'erreurs, merci pour vos reviews.

KohdeAvekLeQ · 2023-04-27T20:58:23Z

src/content/learn/reacting-to-input-with-state.md

@@ -307,61 +308,61 @@ body { margin: 0; }

 </Sandpack>

-Pages like this are often called "living styleguides" or "storybooks".
+Les pages de ce type sont souvent appelées "living styleguides" ou "storybooks"


Ici je savais pas vraiment comment traduire ou ne pas traduire

github-actions · 2023-04-27T20:59:29Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

KohdeAvekLeQ · 2023-04-27T20:59:39Z

src/content/learn/reacting-to-input-with-state.md

      style="display: none">
  </label>
  <label>
-    Last name:
+    Nom :
    <b id="lastNameText">Jacobs</b>


Je n'ai pas eu d'idée pour le nom de famille "francisé", ou si je laisse comme ça

Bah, je mettrai un clin d’œil, genre "Deroin".

tdd · 2023-04-28T08:48:21Z

@KohdeAvekLeQ quand tu es prêt à la review, dis-le en sortant du mode Draft. Si tu crées ta PR prête d'entrée de jeu, crée-la en mode normal, pas en draft, ok ?

je la repasse en "ready for review", là.

tdd · 2023-04-28T08:50:17Z

(Ah et aussi : tes titres de PR devraient choisir leur langue : "Traduction of the page" c'est mixé 😉).

Tu peux tout à fait utiliser un titre 100% français "Traduction de la page…" sinon 100% anglais "Translation of the… page"

KohdeAvekLeQ · 2023-04-28T08:55:03Z

Oops effectivement, traduction est pas trop anglais, ok pour le type de PR

tdd

Salut @KohdeAvekLeQ !

Avant toute chose, merci pour tout ce boulot ! C'est super cool de continuer à nous filer un coup de main.

On sent que ça s'améliore, j'ai vu en effet la prise en compte de pas mal de retours de ta première trad. Évidemment, tout n'est pas parfait, certaines "erreurs" sont toujours bien là, mais c'est normal, c'est le process ! 😁

J'ai fait la review jusqu'aux Défis, mais pas encore les Défis. Je suis pris cet après-midi, mais je voulais te donner de quoi avancer sans attendre longtemps (car je vais être en congés jusqu'à la Pentecôte).

Avec un peu de bol je pourrai trouver le temps de finaliser ma review avant de partir.

Avant de traiter les retours, lis bien TOUT ce message, notamment les consignes d'intégration optimale des retours par lot(s)

Tout est fait sous forme de Suggestions GitHub, il te suffit à chaque suggestion que tu approuves de
cliquer le bouton d'ajout au lot de modifs à committer (pas de commit direct !), et sur la fin de créer le commit groupé. (ce mode de regroupement en un seul commit est à favoriser absolument, mais tu devras aller dans l'onglet Files changed pour y accéder, il n'est pas utilisable dans l’onglet Conversation)

Si certaines appellent discussion, n'hésite pas, tu réponds, on en parle, on avance ensemble 🤝

Quand tout sera bouclé côté code, je ferai une repasse visuelle finale en local avant de fusionner. J'y recalerai si besoin les usual suspects : espaces insécables avant les ponctuations doubles, et apostrophes françaises.

Encore mille mercis, j'ai hâte de voir cette PR finalisée et dans main !

src/content/learn/reacting-to-input-with-state.md

tdd · 2023-04-28T10:37:10Z

src/content/learn/reacting-to-input-with-state.md

-* **Can you get the same information from the inverse of another state variable?** `isError` is not needed because you can check `error !== null` instead.
+* **Es-ce que cet état cause un paradoxe ?** Par exemple, `isTyping` et `isSubmitting` ne peuvent pas être tous les deux définis à `true`. Un paradoxe signifie généralement que l’état n’est pas suffisamment contraint. Il y a quatre combinaisons possibles de deux booléens, mais seulement trois correspondent à des états valides. Pour supprimer l’état "impossible", vous pouvez les combiner dans un `status` qui doit être l’une des trois valeurs suivantes : `'typing'`, `'submitting'`, ou `'success'`.
+* **La même information est-elle déjà disponible dans une autre variable d’état ?** Un autre paradoxe : `isEmpty` et `isTyping` ne peuvent pas être à `true` en même temps. En les rendant distinctes, vous risquez de les désynchroniser et de provoquer des bugs. Heureusement, vous pouvez supprimer `isEmpty` et vérifier à la place `answer.length === 0`.
+* **Pouvez-vous obtenir la même information à partir de l’inverse d'une autre variable d’état ?** `isError` n’est pas nécessaire car vous pouvez vérifier `error !== null` à la place.


Suggested change

* **Pouvez-vous obtenir la même information à partir de l’inverse d'une autre variable d’état ?** `isError` n’est pas nécessaire car vous pouvez vérifier `error !== null` à la place.

* **Pouvez-vous obtenir la même information en inversant une autre variable d’état ?** `isError` n’est pas nécessaire car vous pouvez vérifier `error !== null` à la place.

tdd · 2023-04-28T10:37:27Z

src/content/learn/reacting-to-input-with-state.md


-After this clean-up, you're left with 3 (down from 7!) *essential* state variables:
+Après ce nettoyage, il vous reste seulement 3 (au lieu de 7 !) variables d’état *essentielles* :


Suggested change

Après ce nettoyage, il vous reste seulement 3 (au lieu de 7 !) variables d’état *essentielles* :

Après ce nettoyage, il vous reste seulement 3 (au lieu de 7 !) variables d’état *essentielles* :

tdd · 2023-04-28T10:37:55Z

src/content/learn/reacting-to-input-with-state.md


 <DeepDive>

-#### Eliminating “impossible” states with a reducer {/*eliminating-impossible-states-with-a-reducer*/}
+#### Éliminer les états « impossibles » avec un réducteur {/*eliminating-impossible-states-with-a-reducer*/}


Suggested change

#### Éliminer les états « impossibles » avec un réducteur {/*eliminating-impossible-states-with-a-reducer*/}

#### Éliminer les états « impossibles » avec un réducteur {/*eliminating-impossible-states-with-a-reducer*/}

tdd · 2023-04-28T10:39:07Z

src/content/learn/reacting-to-input-with-state.md


 </DeepDive>

-### Step 5: Connect the event handlers to set state {/*step-5-connect-the-event-handlers-to-set-state*/}
+### Étape 5: Connecter les gestionnaires d’évènements pour définir l’état {/*step-5-connect-the-event-handlers-to-set-state*/}


Suggested change

### Étape 5: Connecter les gestionnaires d’évènements pour définir l’état {/*step-5-connect-the-event-handlers-to-set-state*/}

### Étape 5 : connecter les gestionnaires d’événements pour définir l’état {/*step-5-connect-the-event-handlers-to-set-state*/}

tdd · 2023-04-28T10:41:35Z

src/content/learn/reacting-to-input-with-state.md

+* La programmation déclarative consiste à décrire l’interface utilisateur pour chaque état visuel plutôt que de micro-gérer l’interface utilisateur (impératif).
+* Lors du développement d’un composant :
+  1. Identifier tous ses états visuels.
+  2. Déterminer les déclencheurs humains et informatiques des changements d’état.
+  3. Modéliser l’état avec `useState`.
+  4. Supprimer les états non essentiel pour éviter les bugs et les paradoxes.
+  5. Connecter les gestionnaires d’événements pour définir l’état.


Suggested change

* La programmation déclarative consiste à décrire l’interface utilisateur pour chaque état visuel plutôt que de micro-gérer l’interface utilisateur (impératif).

* Lors du développement d’un composant :

1. Identifier tous ses états visuels.

2. Déterminer les déclencheurs humains et informatiques des changements d’état.

3. Modéliser l’état avec `useState`.

4. Supprimer les états non essentiel pour éviter les bugs et les paradoxes.

5. Connecter les gestionnaires d’événements pour définir l’état.

* La programmation déclarative consiste à décrire l’interface utilisateur pour chaque état visuel plutôt que de micro-gérer l’interface (style impératif).

* Lors du développement d’un composant :

1. Identifiez tous ses états visuels.

2. Déterminez les déclencheurs humains et techniques des changements d’état.

3. Modélisez l’état avec `useState`.

4. Supprimez les états non essentiels pour éviter les bugs et les paradoxes.

5. Connectez les gestionnaires d’événements pour définir l’état.

Co-authored-by: Christophe Porteneuve <tdd@tddsworld.com>

github-actions · 2023-04-28T11:10:38Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

tdd

Yay @KohdeAvekLeQ, j'ai pu finir la review !

Je te laisse regarder et appliquer, après quoi je ferai ma repasse finale en local (typographie restante, ajustements "Deroin" manquants, et repasse visuelle pour éliminer les lignes à un seul mot, à coup de reformulations).

src/content/learn/reacting-to-input-with-state.md

Co-authored-by: Christophe Porteneuve <tdd@tddsworld.com>

github-actions · 2023-04-28T19:07:14Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

github-actions · 2023-04-28T23:01:08Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Three Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/404`	`76.36 KB` (-1 B)	169.99 KB
`/500`	`76.36 KB` (-1 B)	169.98 KB
`/[[...markdownPath]]`	`77.78 KB` (-1 B)	171.41 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

LECLERS Simon added 3 commits April 27, 2023 22:06

4 first steps

a97a34a

End of page

fde9ab7

Fixed remaining translations

07715c2

vercel bot deployed to Preview – fr-react-dev April 27, 2023 20:58 View deployment

KohdeAvekLeQ commented Apr 27, 2023

View reviewed changes

tdd marked this pull request as ready for review April 28, 2023 08:48

tdd self-assigned this Apr 28, 2023

tdd added Reviewing Un mainteneur qualifié est en train de composer la revue de code scope:required-pages Part of the required translations before we can ship translator:beginner The author of this translation has little to no prior doc translation experience labels Apr 28, 2023

tdd mentioned this pull request Apr 28, 2023

New French Translation Progress #448

Open

tdd requested changes Apr 28, 2023

View reviewed changes

Apply suggestions from code review

7e2221c

Co-authored-by: Christophe Porteneuve <tdd@tddsworld.com>

vercel bot deployed to Preview – fr-react-dev April 28, 2023 11:09 View deployment

tdd requested changes Apr 28, 2023

View reviewed changes

tdd added Reviewed and removed Reviewing Un mainteneur qualifié est en train de composer la revue de code labels Apr 28, 2023

Apply suggestions from code review

70b5974

Co-authored-by: Christophe Porteneuve <tdd@tddsworld.com>

vercel bot deployed to Preview – fr-react-dev April 28, 2023 19:05 View deployment

copy: final review pass on reacting with state

3bf1c30

tdd approved these changes Apr 28, 2023

View reviewed changes

vercel bot deployed to Preview – fr-react-dev April 28, 2023 23:00 View deployment

tdd merged commit aef287e into reactjs:main Apr 28, 2023
4 checks passed

KohdeAvekLeQ deleted the reacting-to-input-with-state branch April 29, 2023 17:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Traduction of the "Reacting to input with state" page #461

Traduction of the "Reacting to input with state" page #461

KohdeAvekLeQ commented Apr 27, 2023

KohdeAvekLeQ Apr 27, 2023

github-actions bot commented Apr 27, 2023

📦 Next.js Bundle Analysis for react-dev

KohdeAvekLeQ Apr 27, 2023

tdd Apr 28, 2023

tdd commented Apr 28, 2023

tdd commented Apr 28, 2023

KohdeAvekLeQ commented Apr 28, 2023

tdd left a comment

tdd Apr 28, 2023

tdd Apr 28, 2023

tdd Apr 28, 2023

tdd Apr 28, 2023

tdd Apr 28, 2023

github-actions bot commented Apr 28, 2023

📦 Next.js Bundle Analysis for react-dev

tdd left a comment

github-actions bot commented Apr 28, 2023

📦 Next.js Bundle Analysis for react-dev

github-actions bot commented Apr 28, 2023

📦 Next.js Bundle Analysis for react-dev

Three Pages Changed Size

	* Pouvez-vous obtenir la même information à partir de l’inverse d'une autre variable d’état ? `isError` n’est pas nécessaire car vous pouvez vérifier `error !== null` à la place.
	* Pouvez-vous obtenir la même information en inversant une autre variable d’état ? `isError` n’est pas nécessaire car vous pouvez vérifier `error !== null` à la place.


		After this clean-up, you're left with 3 (down from 7!) essential state variables:
		Après ce nettoyage, il vous reste seulement 3 (au lieu de 7 !) variables d’état essentielles :

	#### Éliminer les états « impossibles » avec un réducteur {/eliminating-impossible-states-with-a-reducer/}
	#### Éliminer les états « impossibles » avec un réducteur {/eliminating-impossible-states-with-a-reducer/}

	### Étape 5: Connecter les gestionnaires d’évènements pour définir l’état {/step-5-connect-the-event-handlers-to-set-state/}
	### Étape 5 : connecter les gestionnaires d’événements pour définir l’état {/step-5-connect-the-event-handlers-to-set-state/}

Traduction of the "Reacting to input with state" page #461

Traduction of the "Reacting to input with state" page #461

Conversation

KohdeAvekLeQ commented Apr 27, 2023

Choose a reason for hiding this comment

github-actions bot commented Apr 27, 2023

Size changes

📦 Next.js Bundle Analysis for react-dev

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tdd commented Apr 28, 2023

tdd commented Apr 28, 2023

KohdeAvekLeQ commented Apr 28, 2023

tdd left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 28, 2023

Size changes

📦 Next.js Bundle Analysis for react-dev

tdd left a comment

Choose a reason for hiding this comment

github-actions bot commented Apr 28, 2023

Size changes

📦 Next.js Bundle Analysis for react-dev

github-actions bot commented Apr 28, 2023

Size changes

📦 Next.js Bundle Analysis for react-dev

Three Pages Changed Size