conditionnal rendering #40

sheplu · 2019-02-15T07:22:09Z

Conditionnal rendering

Nab69

Quelques corrections pour toi @sheplu , j'en ai surement laissé passer, je referais une lecture ;)

Nab69 · 2019-02-15T08:13:42Z

content/docs/conditional-rendering.md


-Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+Le rendu conditionel en React fonctionne de la même façon que les conditions en Javascript. On utilise l'opérateur Javascript [`if`](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Statements/if...else) ou le [opérateur conditionnel](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) pour créer des éléments représentant l'état courrant, et on laisse à React le rôle de mettre à jour l'UI.


je rajouterais bien "ternaire" comme dans MDN pour [opérateur conditionnel] qui deviendrais [opérateur (ternaire) conditionnel]. Je trouve ça un peu plus précis mais c'est vrai que ca n'est pas indiqué dans la doc en 'en'.

Nab69 · 2019-02-15T08:15:09Z

content/docs/conditional-rendering.md

@@ -24,7 +24,7 @@ function GuestGreeting(props) {
 }


Tu as oublié de traduire les littéraux :)
Welcome back! -> Bienvenue!
Please sign up -> Veuillez vous inscrire.

Nab69 · 2019-02-15T08:19:59Z

content/docs/conditional-rendering.md


-You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
+Vous pouvez utiliser des varibles pour stocker des éléments. Cela peut vous aider à rendre de façon conditonnelle une partie du composant pendant que le reste ne change pas.


varibles -> variables

Nab69 · 2019-02-15T08:22:43Z

content/docs/conditional-rendering.md


-Consider these two new components representing Logout and Login buttons:
+Considérons ces deux nouveaux composants représentant les boutons de Logout et Login :


Est-ce qu'on les considererait pas aussi comme des littéraux Se connecter/Se déconnecter ?

je me dis que Login/Logout sont des termes qui ne sont pas forcement traduits sur les sites en francais

C'est vrai que ca depend des sites... mais je serais plus partisan de faire la trad sur ce coup ☺️

Nab69 · 2019-02-15T08:24:50Z

content/docs/conditional-rendering.md


-It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
+Dans l'exemple ci-dessous, nous allons créer un [composant stateful](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) appelé `LoginControl`.


composant stateful -> composant à état

Nab69 · 2019-02-15T08:40:12Z

content/docs/conditional-rendering.md


-It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
+Cela fonctionne parce qu'en JavaScript, `true && expression` est toujours évalué à `expression`, et `false && expression` est toujours évalué à `false`.


Cela -> Ça

Nab69 · 2019-02-15T08:42:22Z

content/docs/conditional-rendering.md


-In the example below, we use it to conditionally render a small block of text.
+Dans l'exemple ci-dessous, on l'utilise pour rendre contionnellement un bloc de texte.


contionnellement -> conditionnellement
(le séjour à Hawaï te réussit pas ^^)

Nab69 · 2019-02-15T08:49:36Z

content/docs/conditional-rendering.md

@@ -186,13 +187,13 @@ render() {
 }
 ```

-Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+Tout comme en Javascript, c'est à vous de choisir un style approprié suivant ce que vous et votre équipe considérés plus facilement lisable. Rappelez vous aussi que lorsque les conditions deviennent trop complexes, il peut être le bon moment pour penser à [extraire un composant](/docs/components-and-props.html#extracting-components).


considérés -> considerez
lisable -> lisible (voir même compréhensible pourquoi pas)

je partirais presque aussi sur une trad du genre :
"suivant ce qui semble le plus lisible pour vous et votre équipe"

il peut être -> c'est peut être

Nab69 · 2019-02-15T08:59:51Z

content/docs/conditional-rendering.md


-### Preventing Component from Rendering {#preventing-component-from-rendering}
+### Empécher un Composant de se rendre {#preventing-component-from-rendering}


J'ai un peu du mal avec le titre, que penses-tu de ça ?
"Empêcher qu'un Composant soit rendu"

Nab69 · 2019-02-15T09:01:44Z

content/docs/conditional-rendering.md


-In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
+Dans de rare cas, vous voulez qu'un composant soit capable de se masquer même si il est rendu par un autre composant. Pour ce faire, il suffit de retourner `null` à la place de son rendu.


si il -> s'il ?

tdd

Salut @sheplu !

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

C'est ta première PR traitée, du coup on y trouve évidemment nombre de usual suspects. Ne te laisse pas démonter, c'est parfaitement normal, et ça ne déprécie en rien ton travail.

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, et sur la fin de créer le commit groupé (ce bouton est dispo dans la vue Files changed, mais pas la vue Conversation de la PR).

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.

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

content/docs/conditional-rendering.md

Co-Authored-By: sheplu <sheplu@users.noreply.github.com>

netlify · 2019-02-26T21:58:04Z

Deploy preview for fr-reactjs ready!

Built with commit 5d97aea

https://deploy-preview-40--fr-reactjs.netlify.com

netlify · 2019-02-26T22:03:46Z

Deploy preview for fr-reactjs ready!

Built with commit b0c0c60

https://deploy-preview-40--fr-reactjs.netlify.com

This includes translating literals in code samples

sheplu · 2019-02-27T09:28:10Z

Merci pour la review @tdd
Du coup j ai vu des changements/erreurs sur ma trad en cours, je modifie ca après la journée et je pourrais push surement dans la nuit

tdd · 2019-02-27T09:36:35Z

@sheplu et oui c'est tout l'intérêt d'attendre ses premières reviews pour ses PRs suivantes, même si ça fait un peu ronger son frein… 😉 .

Dans tes PRs à venir, pense à mettre à jour le libellé de la page (si nécessaire) dans content/nav.yml aussi.

conditionnal rendering

7811309

tesseralis mentioned this pull request Feb 15, 2019

[OLD] Legacy French Translation Progress #1

Closed

Nab69 added the Pending Review Un mainteneur qualifié doit encore faire la revue de cette PR label Feb 15, 2019

Nab69 reviewed Feb 15, 2019

View reviewed changes

fix typo and review

66583c1

tdd added Reviewing Un mainteneur qualifié est en train de composer la revue de code and removed Pending Review Un mainteneur qualifié doit encore faire la revue de cette PR labels Feb 26, 2019

tdd requested changes Feb 26, 2019

View reviewed changes

tdd added Reviewed and removed Reviewing Un mainteneur qualifié est en train de composer la revue de code labels Feb 26, 2019

Apply suggestions from code review

5d97aea

Co-Authored-By: sheplu <sheplu@users.noreply.github.com>

tdd approved these changes Feb 27, 2019

View reviewed changes

Final tweaks

b0c0c60

This includes translating literals in code samples

tdd merged commit db0e46b into reactjs:master Feb 27, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

conditionnal rendering #40

conditionnal rendering #40

sheplu commented Feb 15, 2019

Nab69 left a comment

Nab69 Feb 15, 2019

Nab69 Feb 15, 2019

Nab69 Feb 15, 2019

Nab69 Feb 15, 2019

sheplu Feb 15, 2019

Nab69 Feb 16, 2019

Nab69 Feb 15, 2019

Nab69 Feb 15, 2019

Nab69 Feb 15, 2019

Nab69 Feb 15, 2019

Nab69 Feb 15, 2019

Nab69 Feb 15, 2019

Nab69 Feb 15, 2019

tdd left a comment

netlify bot commented Feb 26, 2019

netlify bot commented Feb 26, 2019 •

edited

Loading

sheplu commented Feb 27, 2019

tdd commented Feb 27, 2019


		Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
		Le rendu conditionel en React fonctionne de la même façon que les conditions en Javascript. On utilise l'opérateur Javascript [`if`](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Statements/if...else) ou le [opérateur conditionnel](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) pour créer des éléments représentant l'état courrant, et on laisse à React le rôle de mettre à jour l'UI.


		You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
		Vous pouvez utiliser des varibles pour stocker des éléments. Cela peut vous aider à rendre de façon conditonnelle une partie du composant pendant que le reste ne change pas.


		Consider these two new components representing Logout and Login buttons:
		Considérons ces deux nouveaux composants représentant les boutons de Logout et Login :


		It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
		Dans l'exemple ci-dessous, nous allons créer un [composant stateful](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) appelé `LoginControl`.


		It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
		Cela fonctionne parce qu'en JavaScript, `true && expression` est toujours évalué à `expression`, et `false && expression` est toujours évalué à `false`.


		In the example below, we use it to conditionally render a small block of text.
		Dans l'exemple ci-dessous, on l'utilise pour rendre contionnellement un bloc de texte.


		### Preventing Component from Rendering {#preventing-component-from-rendering}
		### Empécher un Composant de se rendre {#preventing-component-from-rendering}


		In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
		Dans de rare cas, vous voulez qu'un composant soit capable de se masquer même si il est rendu par un autre composant. Pour ce faire, il suffit de retourner `null` à la place de son rendu.

conditionnal rendering #40

conditionnal rendering #40

Conversation

sheplu commented Feb 15, 2019

Nab69 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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tdd left a comment

Choose a reason for hiding this comment

netlify bot commented Feb 26, 2019

netlify bot commented Feb 26, 2019 • edited Loading

sheplu commented Feb 27, 2019

tdd commented Feb 27, 2019

netlify bot commented Feb 26, 2019 •

edited

Loading