Translation of all layout elements React Without ES6 #94
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Deploy preview for fr-reactjs ready! Built with commit 046fa10 |
JeremiePat
added
the
Pending Review
tdd
added
Reviewing
JeremiePat
requested changes
Mar 14, 2019
There was a problem hiding this comment.
Salut et bravo pour cette super traduction :)
Beaucoup des suggestion que je fait sont liés à des point de convention listé dans nos pages d'aide:
- Les conventions typographiques
- L'utilisation de
çavscela/ceci - Quelques détails liés au glossaire
Je t'invite à refaire une passe sur ces sujets car j'ai sans doute oublié des trucs.
Pour la traduction de legacy, dans ce contexte, "ancien" fait le bien le travail ;)
J'ai fait des suggestions GitHub, pour les accepter 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)
Reste plus qu'a attendre la revue final de @tdd
content/docs/react-without-es6.md
Outdated
| @@ -84,14 +84,14 @@ var Counter = createReactClass({ | |||
|
|
|||
| ## Autobinding {#autobinding} | |||
|
|
|||
| In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor: | |||
| Dans les composants React déclarés en tant que classe ES6, les méthodes suivent la même sémantique tout comme les classes ES6 régulières. Cela veut dire qu'elles ne vont pas lier le `this` a l'instance de classe. Pour ce faire, devez utiliser `.bind(this)` dans le constructeur: | |||
There was a problem hiding this comment.
Suggested change
| Dans les composants React déclarés en tant que classe ES6, les méthodes suivent la même sémantique tout comme les classes ES6 régulières. Cela veut dire qu'elles ne vont pas lier le `this` a l'instance de classe. Pour ce faire, devez utiliser `.bind(this)` dans le constructeur: | |
| Dans les composants React déclarés en tant que classe ES6, les méthodes suivent la même sémantique que les classes ES6 normales. Ça veut dire qu'elles ne vont pas lier le `this` a l'instance de classe. Pour ce faire, vous devez utiliser `.bind(this)` dans le constructeur : |
content/docs/react-without-es6.md
Outdated
| </button> | ||
| ); | ||
| } | ||
| }); | ||
| ``` | ||
|
|
||
| This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications. | ||
| L'écriture de classes ES6 inclue un peu plus de code générique pour les gestionnaires d'événements, mais ceci améliore légèrement les performances pour les grosses applis. |
There was a problem hiding this comment.
Suggested change
| L'écriture de classes ES6 inclue un peu plus de code générique pour les gestionnaires d'événements, mais ceci améliore légèrement les performances pour les grosses applis. | |
| L'écriture de classes ES6 inclue un peu plus de code générique pour les gestionnaires d'événements, mais ça améliore légèrement les performances pour les grosses applis. |
content/docs/react-without-es6.md
Outdated
|
|
||
| If the boilerplate code is too unattractive to you, you may enable the **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal with Babel: | ||
| Si vous ne trouvez pas le code générique très attirant, vous pouvez activer la proposition de syntaxe **expérimentale** avec Babel [Propriétés de Classe](https://babeljs.io/docs/plugins/transform-class-properties/) : |
There was a problem hiding this comment.
Suggested change
| Si vous ne trouvez pas le code générique très attirant, vous pouvez activer la proposition de syntaxe **expérimentale** avec Babel [Propriétés de Classe](https://babeljs.io/docs/plugins/transform-class-properties/) : | |
| Si vous trouvez le code générique trop déplaisant, vous pouvez activer la syntaxe **expérimentale** des [propriétés de classe](https://babeljs.io/docs/plugins/transform-class-properties/) dans Babel : |
content/docs/react-without-es6.md
Outdated
|
|
||
| If you'd rather play it safe, you have a few options: | ||
| Si vous préférez la prudence, quelques options s'offrent à vous: |
There was a problem hiding this comment.
Suggested change
| Si vous préférez la prudence, quelques options s'offrent à vous: | |
| Si vous préférez être prudent, quelques options s'offrent à vous : |
content/docs/react-without-es6.md
Outdated
| permalink: docs/react-without-es6.html | ||
| --- | ||
|
|
||
| Normally you would define a React component as a plain JavaScript class: | ||
| En temps normal, pour définir un composant React, vous utilisez une classe Javascript: |
There was a problem hiding this comment.
Suggested change
| En temps normal, pour définir un composant React, vous utilisez une classe Javascript: | |
| En temps normal, pour définir un composant React, vous utilisez une classe Javascript : |
There was a problem hiding this comment.
Attention aux espaces insécables avant les : cf. bonnes pratique de traduction.
content/docs/react-without-es6.md
Outdated
| > | ||
| >This section exists only for the reference. | ||
|
|
||
| Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` lets you use a legacy `mixins` system for that. | ||
| Des composants très différents les uns des autres peuvent partager des fonctionalites communes. Ce sont des [pré-occupations transversales](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` vous permet d'utiliser un système de `mixins` de patrimoine (???). |
There was a problem hiding this comment.
Suggested change
| Des composants très différents les uns des autres peuvent partager des fonctionalites communes. Ce sont des [pré-occupations transversales](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` vous permet d'utiliser un système de `mixins` de patrimoine (???). | |
| Des composants très différents les uns des autres peuvent partager des fonctionalites communes. Ce sont des [pré-occupations transversales](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` vous permet d'utiliser un ancien système de `mixins`. |
content/docs/react-without-es6.md
Outdated
|
|
||
| One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/docs/react-component.html#the-component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed. | ||
| Un cas d'utilisation courant est un composent qui veut se mettre à jour par intervalle de temps. C'est facile d'utiliser `setInterval()`, mais c'est important d'annuler votre intervalle si vous n'en avez plus besoin afin d'economiser de la mémoire. React fournit des [méthodes de cycle de vie](/docs/react-component.html#the-component-lifecycle), celles-si vous font savoir quand est-ce qu'un composant va être crée ou détruit. Créons une simple mixin qui utilise ces méthodes afin de fournir une simple fonction `setInterval()` qui va se nettoyer automatiquement lorsque le composant est détruit. |
There was a problem hiding this comment.
Suggested change
| Un cas d'utilisation courant est un composent qui veut se mettre à jour par intervalle de temps. C'est facile d'utiliser `setInterval()`, mais c'est important d'annuler votre intervalle si vous n'en avez plus besoin afin d'economiser de la mémoire. React fournit des [méthodes de cycle de vie](/docs/react-component.html#the-component-lifecycle), celles-si vous font savoir quand est-ce qu'un composant va être crée ou détruit. Créons une simple mixin qui utilise ces méthodes afin de fournir une simple fonction `setInterval()` qui va se nettoyer automatiquement lorsque le composant est détruit. | |
| Un composent qui veut se mettre à jour régulièrement au cours du temps est un cas d'utilisation courant. C'est facile d'utiliser `setInterval()`, mais c'est important d'annuler votre intervalle si vous n'en avez plus besoin afin d'economiser de la mémoire. React fournit des [méthodes de cycle de vie](/docs/react-component.html#the-component-lifecycle), celles-si vous font savoir quand est-ce qu'un composant va être crée ou détruit. Créons une simple mixin qui utilise ces méthodes afin de fournir une simple fonction `setInterval()` qui va se nettoyer automatiquement lorsque le composant est détruit. |
content/docs/react-without-es6.md
Outdated
| @@ -197,20 +197,20 @@ var SetIntervalMixin = { | |||
| var createReactClass = require('create-react-class'); | |||
|
|
|||
| var TickTock = createReactClass({ | |||
| mixins: [SetIntervalMixin], // Use the mixin | |||
| mixins: [SetIntervalMixin], // Utiliser la mixin | |||
There was a problem hiding this comment.
Suggested change
| mixins: [SetIntervalMixin], // Utiliser la mixin | |
| mixins: [SetIntervalMixin], // Utiliser le mixin |
content/docs/react-without-es6.md
Outdated
| getInitialState: function() { | ||
| return {seconds: 0}; | ||
| }, | ||
| componentDidMount: function() { | ||
| this.setInterval(this.tick, 1000); // Call a method on the mixin | ||
| this.setInterval(this.tick, 1000); // Appeler un méthode dans la mixin |
There was a problem hiding this comment.
Suggested change
| this.setInterval(this.tick, 1000); // Appeler un méthode dans la mixin | |
| this.setInterval(this.tick, 1000); // Appeler une méthode dans le mixin |
content/docs/react-without-es6.md
Outdated
| @@ -222,4 +222,4 @@ ReactDOM.render( | |||
| ); | |||
| ``` | |||
|
|
|||
| If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component. | |||
| Si un composant utilise plusieurs mixins et que nombreuses mixins définissent la même méthode de cycle de vie(C-à-d que de nombreuses mixins veulent faire un nettoyage lorsque le composant est détruit), vous avez la garantie que toutes ces méthodes de cycle de vie vont être appelées. Les méthodes définies dans les mixins se lancent dans l'ordre dans le lequel les mixins ont été listées, suivies par un appel de méthode dans le composant. | |||
There was a problem hiding this comment.
Suggested change
| Si un composant utilise plusieurs mixins et que nombreuses mixins définissent la même méthode de cycle de vie(C-à-d que de nombreuses mixins veulent faire un nettoyage lorsque le composant est détruit), vous avez la garantie que toutes ces méthodes de cycle de vie vont être appelées. Les méthodes définies dans les mixins se lancent dans l'ordre dans le lequel les mixins ont été listées, suivies par un appel de méthode dans le composant. | |
| Si un composant utilise plusieurs mixins et que de nombreux mixins définissent la même méthode de cycle de vie (C-à-d que de nombreux mixins veulent faire du nettoyage lorsque le composant est détruit), vous avez la garantie que toutes ces méthodes de cycle de vie seront appelées. Les méthodes définies dans les mixins se lancent dans l'ordre dans le lequel les mixins ont été listées, suivies par un appel de méthode dans le composant. |
tdd
requested changes
Mar 14, 2019
There was a problem hiding this comment.
Salut @sidbentifraouine !
Avant toute chose, merci pour tout ce boulot ! C'est super cool de nous filer un coup de main.
Avant de traiter les retours, lis bien TOUT ce message, notamment les consignes d'intégration optimale des retours par lot(s)
C'est plutôt pas mal, surtout pour une première trad ! 👏 Un gros paquet de retours touche aux insécables, au fait que mixin est masculin, à des oublis purs et simples de trad et à une fatigue manifeste sur la fin, bourrée de typos 😉
Rien de bien méchant, comme tu pourras le voir !
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.
Encore mille mercis, j'ai hâte de voir cette PR finalisée et dans master !
tdd
added
Reviewed
and removed
Reviewing
|
@sidbentifraouine pourrais-tu trouver le temps de traiter mes retours d'ici lundi midi ? pour info, si ce n'est pas le cas, j'auto-validerai les suggestions pour avancer. |
First translation PR fixes Co-Authored-By: sidbentifraouine <sidbentifraouine@gmail.com>
|
Merci infiniment 🙏 pour tous vos retours, je viens de commiter les changements demandés 🙂Bonne fin de week-end! |
tdd
approved these changes
Mar 17, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Bonjour j'espère que vous passez tous un agréable week-end, 🙂
Voici ma proposition de traduction pour la page React Without ES6,
Note: je n'ai pas réussi à trouver une traduction un minimum correcte pour
Legacyen ligne180, des proposition ? 😅